見出し画像

最新版 Next.js スターターキット：認証、決済、AIチャット機能付きでSaaS開発を加速！[更新20250214a]

いとまる | Itomaru

Next.js Starter Kitの新版が公開されたので概略を自分用にまとめます。

冒頭まとめ:

  • 即戦力スターターキット: 認証、決済、AIチャット機能を備えたNext.js製スターターキットで、SaaS開発を劇的に加速。

  • モダンな技術スタック: Next.js 15、Tailwind CSS、shadcn/ui、Convex、Clerk、Polar、Vercel AI SDKを採用し、最先端の開発体験を提供。

  • 無料＆詳細解説: スターターキットは無料で利用可能。本記事では、構築手順の概略と最新アップデートを解説。

🚀 なぜNext.jsスターターキットを使うべきか？

GitHubで多くの支持を集める「Next.jsスターターキット」。このスターターキットを活用することで、SaaS開発に必要な基本機能を素早く実装し、アイデアの具現化に集中できます。

初版リリース以降、多くのフィードバックを受け、より強力なスターターキットへと進化しました。最新版 Next Starter Kit は無料で提供されているので、ぜひお試しください。

📌 技術スタック

  • フロントエンド: Next.js 15 (App Router), Tailwind CSS, shadcn/ui

  • バックエンド: Convex

  • 認証: Clerk

  • 決済: Polar.sh

  • AIチャット: Vercel AI SDK (OpenAI, DeepSeek, Groq対応)

認証・決済をより洗練された構成（Clerk, Polar）に刷新し、新たにAIチャット機能を追加。さらにNext.js 15に対応することで、より実践的で魅力的なスターターキットへと進化しました。

💡 スターターキットの機能デモ

まずは、スターターキットのデモをご覧ください。サインアウト状態から、認証、決済、ダッシュボード、AIチャットまでの一連の流れを体験できます。

主要機能

  • 洗練されたランディングページ: アニメーションが目を引くデザイン、ダークモード対応。

  • ダッシュボードアクセス制限: ダッシュボードにはプラン加入者のみがアクセス可能。

  • スムーズな認証フロー: ClerkによるGoogleログインなど、シームレスな認証体験。

  • クリーンな決済体験: Polarの直感的なUIで、スムーズな決済フロー。

  • AIチャット機能: OpenAI、DeepSeek、Groqのモデルを切り替え可能。

🛠️ スターターキット構築手順

< 作業全体のフロー >

  1. プロジェクトの準備:

    • リポジトリのクローン

    • 依存関係のインストール

    • .env.local ファイルの作成と初期設定

  2. 各サービスのセットアップ:

    • Clerk (認証) のアカウント作成とアプリケーション設定

    • Convex (データベース) の初期化と Clerk 連携設定

    • Polar (サブスクリプション) のアカウント作成、商品設定、Convex との連携設定

    • (オプション) ngrok の設定 (ローカルテスト用)

  3. アプリケーションの起動と動作確認

開発環境の準備

1. リポジトリのクローン

まずは、GitHub からスターターキットをクローンします。

git clone https://github.com/michaelshimeles/nextjs-starter-kit.git
cd nextjs-starter-kit

2. 依存関係のインストール

Bun (推奨) または npm で必要なパッケージをインストールします。

bun install  # または npm install

3. 環境変数の設定

.env.template をコピーして .env.local を作成し、必要な情報を入力します。

cp .env.template .env.local

.env.local には、各サービス (Clerk, Convex, Polar) の API キーや設定情報を記述します。詳細は次のセクションで解説します。

各サービスのセットアップと連携

Clerk (認証)

  1. アカウント作成 & アプリケーション作成:

    • Clerk Dashboard でアカウントを作成、ログインします。

    • "Create Application" をクリックし、アプリケーション名と認証方法 (Email, Googleなど) を設定。

  2. .env.local の設定:

    • Clerk ダッシュボードから以下のキーをコピー:

      • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

      • CLERK_SECRET_KEY

    • 以下のリダイレクト URL も設定 (Clerk ダッシュボードの "Redirect URLs" にも同じ設定を!):

      • NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in

      • NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

      • NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/

      • NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

Convex (データベース & バックエンド)

  1. Convex の初期化:

    • プロジェクトルートで npx convex dev を実行し、指示に従って Convex プロジェクトを作成。

  2. Clerk との連携 (JWT Template):

    • Clerk ダッシュボードで "JWT Templates" > "New template" > "Convex" を選択。"Issuer" をコピーし、"Apply Changes" を忘れずに!

    • Convex ダッシュボードの "Settings" > "Environment Variables" で以下を追加:

      • Name: CLERK_SIGNING_KEY

      • Value: コピーした "Issuer"

  3. .env.local の設定:

    • Convex ダッシュボードから以下をコピー:

      • NEXT_PUBLIC_CONVEX_URL

      • CONVEX_DEPLOYMENT

    • Convexダッシュボード > "Settings" > "Environment Variables" で以下を追加。

      • CONVEX_ADMIN_KEY (値は任意)

Polar (サブスクリプション管理)

  1. アカウント & 組織作成:

  2. .env.local の設定:

    • "Organization Identifier" をコピーし、POLAR_ORGANIZATION_ID に設定。

  3. API Token 作成 (Convex 用):

    • Polar の "Settings" > "Developers" > "New token" で、全権限、有効期限なしのトークンを作成。

    • Secret token をコピーし、Convex の環境変数に追加:

      • Name: POLAR_ACCESS_TOKEN

  4. 商品の作成:

    • Polar で "Products" > "New product" を作成。商品名、説明、価格 (月額/年額) を設定。

    • 各プランの ID (月額、年額) をメモ (Convex の plans テーブル設定で使用)。

  5. Convex でのプラン設定:

    • Convex ダッシュボードの plans テーブルに、以下の JSON 形式でデータを追加 (値は Polar での設定に合わせる)。

  6. Webhook 設定 (Polar → Convex):

    • Polar の "Settings" > "Webhooks" > "Add endpoint" で以下を設定:

      • URL: Convex の "HTTP Actions URL" + /payments/webhook (例: https://<your-deployment>.convex.cloud/payments/webhook)。ローカルテスト時は ngrok の URL を使用 (後述)。

      • Format: "Raw"

      • Events: "All events"

      • "Generate" をクリックし、Webhook Secret をコピー。"Create" で保存。

    • Webhook Secret を Convex と .env.local の POLAR_WEBHOOK_SECRET に追加。

ngrok (ローカルテスト用) ※オプション

ローカルで Webhook を受信するには、ngrok でサーバーを公開します。

  1. ngrok インストール: 公式サイト からダウンロード。

  2. 実行: ngrok http 3000

  3. .env.local & Convex 設定: FRONTEND_URL を ngrok の URL に設定。Polar の Webhook URL も変更。

その他の環境変数 (オプション)

AI 連携 (OpenAI, DeepSeek, Groq) を利用する場合は、.env.local に API キーを設定します。

アプリケーションの起動

bun run dev

http://localhost:3000 (または ngrok URL) で動作確認！

トラブルシューティング

エラー発生時は以下を確認しましょう。

  • .env.local の設定、API キーのコピーミス

  • ターミナルのエラーメッセージ

  • Convex ダッシュボードのテーブルや関数

  • Clerk, Convex, Polar のダッシュボード設定

  • 認証関連のエラー * Clerkのダッシュボードで設定したURLと .env.localに記載したURLが一致しているか * 使用しているClerkのkeyが正しいか

まとめ

このスターターキットでできること:

  • 認証、データベース、サブスクリプション管理機能が最初から組み込まれた Next.js アプリケーションをすぐに開発開始できる

  • Clerk, Convex, Polar というモダンなサービスを活用し、スケーラブルでセキュアなアプリケーションを構築可能

  • 面倒な設定作業から解放され、アプリケーションのコアロジックに集中できる

このスターターキットを活用して、Next.js でのアプリケーション開発を加速させましょう！

いいなと思ったら応援しよう！