【Next.js】料金表の作り方を解説｜3プランと月額・年額の切替

export type Plan = {
    id: string;
    name: string;
    description: string;
    monthly: number; // 月払いの月額（税込）
    yearly: number; // 年払いの年額（税込）
    features: string[];
    featured?: boolean;
    cta: { label: string; href: string };
  };

  // 金額はサンプルです
  export const plans: Plan[] = [
    {
      id: "starter",
      name: "Starter",
      description: "個人で小さく始める",
      monthly: 980,
      yearly: 9800,
      features: ["プロジェクト3件", "基本テンプレート", "メールサポート"],
      cta: { label: "Starter で始める", href: "/signup?plan=starter" },
    },
    {
      id: "pro",
      name: "Pro",
      description: "仕事で毎日使う",
      monthly: 1980,
      yearly: 19800,
      features: ["プロジェクト無制限", "すべてのテンプレート", "優先サポート"],
      featured: true,
      cta: { label: "Pro で始める", href: "/signup?plan=pro" },
    },
    {
      id: "team",
      name: "Team",
      description: "チームで共有する",
      monthly: 9800,
      yearly: 98000,
      features: ["メンバー10人まで", "権限の管理", "請求書払い"],
      cta: { label: "Team について相談する", href: "/contact" },
    },
  ];

  export const yen = (n: number) => "¥" + n.toLocaleString("ja-JP");

import { plans, yen } from "@/lib/plans";

  export function PricingCards() {
    return (
      <section className="px-6 py-24">
        <h2 className="text-center text-3xl font-semibold">料金プラン</h2>
        <p className="mt-3 text-center text-zinc-600">どのプランも14日間は無料で試せます。</p>
        <div className="mx-auto mt-12 grid max-w-5xl gap-6 md:grid-cols-3">
          {plans.map((plan) => (
            <article
              key={plan.id}
              className={
                "flex flex-col rounded-2xl p-6 " +
                (plan.featured ? "border-2 border-zinc-900" : "border border-zinc-200")
              }
            >
              {plan.featured ? (
                <p className="w-fit rounded-full bg-zinc-900 px-3 py-1 text-xs text-white">おすすめ</p>
              ) : null}
              <h3 className="mt-3 text-lg font-semibold">{plan.name}</h3>
              <p className="mt-1 text-sm text-zinc-600">{plan.description}</p>
              <p className="mt-6 text-3xl font-semibold tabular-nums">
                {yen(plan.monthly)}
                <span className="text-sm font-normal text-zinc-500"> /月</span>
              </p>
              <p className="mt-1 text-xs text-zinc-500">税込</p>
              <ul className="mt-6 flex-1 space-y-2 text-sm">
                {plan.features.map((f) => (
                  <li key={f}>
                    <span aria-hidden="true">✓ </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={plan.cta.href}
                className="mt-8 inline-flex justify-center rounded-full bg-zinc-950 py-3 text-sm text-white"
              >
                {plan.cta.label}
              </a>
            </article>
          ))}
        </div>
      </section>
    );
  }

"use client";

  import { useState } from "react";
  import { yen, type Plan } from "@/lib/plans";

  type Cycle = "monthly" | "yearly";

  export function PricingSection({ plans }: { plans: Plan[] }) {
    const [cycle, setCycle] = useState<Cycle>("monthly");

    return (
      <section className="px-6 py-24 text-center">
        <h2 className="text-3xl font-semibold">料金プラン</h2>
        <div role="group" aria-label="支払いの周期" className="mt-8 inline-flex rounded-full border p-1">
          {(["monthly", "yearly"] as const).map((c) => (
            <button
              key={c}
              type="button"
              aria-pressed={cycle === c}
              onClick={() => setCycle(c)}
              className={
                "rounded-full px-4 py-2 text-sm " +
                (cycle === c ? "bg-zinc-950 text-white" : "text-zinc-600")
              }
            >
              {c === "monthly" ? "月払い" : "年払い（2か月分お得）"}
            </button>
          ))}
        </div>
        <div className="mx-auto mt-12 grid max-w-5xl gap-6 text-left md:grid-cols-3">
          {plans.map((plan) => (
            <article
              key={plan.id}
              className={
                "flex flex-col rounded-2xl p-6 " +
                (plan.featured ? "border-2 border-zinc-900" : "border border-zinc-200")
              }
            >
              <h3 className="text-lg font-semibold">{plan.name}</h3>
              <p className="mt-6 text-3xl font-semibold tabular-nums">
                {yen(cycle === "monthly" ? plan.monthly : plan.yearly)}
                <span className="text-sm font-normal text-zinc-500">
                  {cycle === "monthly" ? " /月" : " /年"}
                </span>
              </p>
              <p className="mt-1 text-xs text-zinc-500">
                {cycle === "monthly" ? "税込・毎月請求" : "税込・1年分を一括請求"}
              </p>
              <ul className="mt-6 flex-1 space-y-2 text-sm">
                {plan.features.map((f) => (
                  <li key={f}>{f}</li>
                ))}
              </ul>
              <a
                href={plan.cta.href + (plan.cta.href.includes("?") ? "&" : "?") + "cycle=" + cycle}
                className="mt-8 inline-flex justify-center rounded-full bg-zinc-950 py-3 text-sm text-white"
              >
                {plan.cta.label}
              </a>
            </article>
          ))}
        </div>
      </section>
    );
  }

  // app/page.tsx（サーバーコンポーネントのまま）
  // import { plans } from "@/lib/plans";
  // <PricingSection plans={plans} />