next saas starter

Next.js SaaS スターター

これは、認証、支払いのための Stripe 統合、ログイン ユーザー用のダッシュボードをサポートするNext.jsを使用して SaaS アプリケーションを構築するためのスターター テンプレートです。

デモ: https://next-saas-start.vercel.app/

なぜこれを作ったのか？

2020 年に、Next.js、Stripe、その他のツールを使用して SaaS アプリケーションを構築する方法を示す「React 2025」というコースを作成しました。

さて、もうすぐ 2025 年ですが、React 19 は、私が予測していなかったほど多くの素晴らしい新機能をもたらしました。このリポジトリは、最新の React および Next.js パターンのデモンストレーションです。これらのパターンにより、フォームの構築、データベースとの通信など、SaaS の構築におけるいくつかの一般的なタスクを大幅に簡素化できます。

たとえば、React には、インライン フォーム エラーや保留状態を処理するuseActionStateなどのフックが組み込まれています。 React Server Actions は、クライアント側から API ルートを呼び出すために必要な多くの定型コードを置き換えることができます。最後に、React useフックを Next.js と組み合わせることで、強力なuseUser()フックを驚くほど簡単に構築できるようになります。

ルート レイアウトの Postgres データベースからユーザーを取得できますが、 Promise待つことはできません。代わりに、 Promise React コンテキスト プロバイダーに転送し、そこでそれを「ラップ解除」して、ストリーミングされるデータを待ちます。これは、データベースからデータをフェッチする簡単なコード (例: getUser() ) と、クライアント コンポーネントで使用できる React フック (例: useUser() ) の両方の長所を利用できることを意味します。

興味深い事実: このアプリケーションの UI の大部分は v0 で構築されています。このリポジトリについて詳しく知りたい場合は、こちらをご覧ください。

特徴

• アニメーション化されたターミナル要素を含むマーケティング ランディング ページ ( / )
• Stripe Checkout に接続する価格設定ページ ( /pricing )
• ユーザー/チームに対する CRUD 操作を含むダッシュボード ページ
• オーナーとメンバーの役割を備えた基本的な RBAC
• Stripe カスタマーポータルによるサブスクリプション管理
• Cookie に保存された JWT を使用した電子メール/パスワード認証
• ログインルートを保護するグローバルミドルウェア
• サーバー アクションを保護したり、Zod スキーマを検証したりするためのローカル ミドルウェア
• あらゆるユーザーイベントのアクティビティログシステム

技術スタック

• フレームワーク: Next.js
• データベース: Postgres
• ORM : 霧雨
• 支払い: ストライプ
• UIライブラリ：shadcn/ui

はじめる

git clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install

ローカルで実行する

付属のセットアップ スクリプトを使用して、 .envファイルを作成します。

pnpm db:setup

次に、データベースの移行を実行し、デフォルトのユーザーとチームをデータベースにシードします。

pnpm db:migrate
pnpm db:seed

これにより、次のユーザーとチームが作成されます。

• ユーザー: [email protected]
• パスワード: admin123

もちろん、 /sign-upを通じて新しいユーザーを作成することもできます。

最後に、Next.js 開発サーバーを実行します。

pnpm dev

ブラウザで http://localhost:3000 を開いて、アプリの動作を確認します。

オプションで、CLI を通じてローカルで Stripe Webhook をリッスンし、サブスクリプション変更イベントを処理できます。

stripe listen --forward-to localhost:3000/api/stripe/webhook

支払いのテスト

Stripe 支払いをテストするには、次のテスト カードの詳細を使用します。

• カード番号: 4242 4242 4242 4242
• 有効期限: 将来の任意の日付
• CVC: 任意の 3 桁の数字

本番環境への移行

SaaS アプリケーションを実稼働環境にデプロイする準備ができたら、次の手順に従います。

本番環境の Stripe Webhook をセットアップする

1. Stripe ダッシュボードに移動し、運用環境用の新しい Webhook を作成します。
2. エンドポイント URL を実稼働 API ルート (例: https://yourdomain.com/api/stripe/webhook ) に設定します。
3. リッスンするイベントを選択します (例: checkout.session.completed 、 customer.subscription.updated )。

ヴェルセルへの展開

1. コードを GitHub リポジトリにプッシュします。
2. リポジトリを Vercel に接続し、デプロイします。
3. Vercel の展開プロセスに従って、プロジェクトをセットアップします。

環境変数を追加する

Vercel プロジェクト設定 (または展開中) で、必要な環境変数をすべて追加します。次のような実稼働環境の値を必ず更新してください。

1. BASE_URL : これを運用ドメインに設定します。
2. STRIPE_SECRET_KEY : 運用環境用の Stripe 秘密キーを使用します。
3. STRIPE_WEBHOOK_SECRET : 手順 1 で作成した運用 Webhook の Webhook シークレットを使用します。
4. POSTGRES_URL : これを運用データベースの URL に設定します。
5. AUTH_SECRET : これをランダムな文字列に設定します。 openssl rand -base64 32生成されます。

その他のテンプレート

このテンプレートは学習リソースとして使用するために意図的に最小限に抑えられていますが、コミュニティには、よりフル機能を備えた他の有料バージョンがあります。

• https://achromatic.dev
• https://shipfa.st
• https://メーカーキット.dev