はじめに
SaaSを自分で作ってみたいと思ったことはありませんか。アイデアはあるけど、認証や決済、ダッシュボードを一から作るのは正直かなり面倒ですよね。
そんな中、Next.js公式チームが「Next-SaaS-Starter」というスターターテンプレートを公開していて、これがGitHubで15,000以上のスターを獲得するほど人気になっています。
個人的には、SaaS開発の「面倒な部分」がほぼ全部入りで、最初からこれを使えばよかったと思うレベルでした。今回はその内容を紹介していきます。
Next-SaaS-Starterとは
Next-SaaS-Starterは、Next.js公式チームが開発したSaaS構築用のオープンソーステンプレートです。「Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui」というコンセプトの通り、SaaSに必要な機能がひととおり揃っています。
正直なところ、「スターター」という名前ですが、そのまま本番運用できるレベルの完成度です。
特徴・メリット
1. 決済機能が最初から動く
Stripeとの連携が組み込まれていて、料金ページからチェックアウトまでの流れがすでに実装済みです。サブスクリプション管理もStripeカスタマーポータルを使う形になっていて、解約やプラン変更もユーザー自身で行えます。
これ、自分で実装しようと思ったらWebhookの処理とか結構ハマるポイントが多いんですよね。
2. 認証システムが堅牢
メール/パスワード認証がJWT + Cookieベースで実装されています。ルート保護用のグローバルミドルウェアも入っているので、「この画面はログイン必須」みたいな制御が簡単にできます。
3. チーム・ユーザー管理機能
複数ユーザーでの利用を想定したチーム機能があります。Owner/Memberのロールベースアクセス制御（RBAC）も基本的な部分は実装済みで、「誰が何をできるか」の管理ができます。
4. アクティビティログ
ユーザーの操作履歴を記録する仕組みも入っています。管理画面を作るときに「いつ誰が何をしたか」がわかるのは、運用面で意外と重要なんですよね。
5. マーケティングページ付き
ランディングページがアニメーション付きで実装されています。ターミナル風のアニメーション要素とかもあって、開発者向けSaaSならそのまま使えるレベルです。
技術スタック
| 領域 | 技術 |
|---|---|
| フレームワーク | Next.js |
| データベース | PostgreSQL |
| ORM | Drizzle |
| 決済 | Stripe |
| UI | shadcn/ui |
| 認証 | JWT + Cookie |
Drizzle ORMを使っているのがポイントですね。Prismaより軽量で、TypeScriptとの相性がいいです。
インストール方法
前提条件
- Node.js 18以上
- pnpm
- Stripeアカウント
- PostgreSQLデータベース（ローカルまたはNeonなどのマネージドサービス）
クローンとセットアップ
git clone https://github.com/nextjs/saas-starter
cd saas-starter
pnpm install
Stripeの設定
stripe login
環境変数の設定
pnpm db:setup
このコマンドで .env ファイルが作成されます。
データベースの初期化
pnpm db:migrate
pnpm db:seed
シードデータとして、テスト用ユーザーが作成されます。
- メール:
test@test.com - パスワード:
admin123
開発サーバーの起動
pnpm dev
Stripe Webhookのリッスン（別ターミナル）
stripe listen --forward-to localhost:3000/api/stripe/webhook
これでローカル環境での開発準備は完了です。
基本的な使い方
プロジェクト構造
├── app/
│ ├── (dashboard)/ # ダッシュボード画面
│ ├── (marketing)/ # ランディングページ
│ ├── api/ # APIルート
│ └── sign-in/ # 認証画面
├── components/ # UIコンポーネント
├── lib/
│ ├── db/ # データベース設定・スキーマ
│ ├── auth/ # 認証ロジック
│ └── payments/ # Stripe連携
└── ...
認証の使い方
ミドルウェアでルート保護が設定されているので、ダッシュボード配下のページは自動的にログイン必須になります。
// middleware.ts の例
export const config = {
matcher: ['/dashboard/:path*'],
};
Stripeサブスクリプションの確認
ユーザーのサブスクリプション状態を取得する例です。
import { getUser } from '@/lib/db/queries';
const user = await getUser();
if (user?.stripeSubscriptionId) {
// 有料プランユーザー向けの処理
}
チームメンバーの取得
import { getTeamByStripeCustomerId } from '@/lib/db/queries';
const team = await getTeamByStripeCustomerId(stripeCustomerId);
const members = team?.teamMembers || [];
実践的なユースケース
1. 開発者向けツールのSaaS化
APIキー管理やダッシュボード機能が必要なサービスなら、このテンプレートがそのまま使えます。料金プランを複数用意して、プランごとに機能制限をかける、といった実装も比較的簡単です。
2. B2B SaaSのMVP
チーム機能とRBACが入っているので、複数人で使う業務ツールのMVPを作るのに向いています。「まずは動くものを見せたい」というフェーズでは、これで十分だと思います。
3. サブスクリプションサービス
コンテンツ配信やオンラインサービスで、月額課金モデルを採用したい場合。Stripeとの連携が最初から動いているので、決済まわりの実装コストがかなり削減できます。
本番環境へのデプロイ
Vercelへのデプロイ
- GitHubにプッシュ
- Vercelでプロジェクトをインポート
- 環境変数を設定
必要な環境変数は以下の通りです。
BASE_URL=https://your-domain.com
STRIPE_SECRET_KEY=sk_live_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
POSTGRES_URL=postgres://...
AUTH_SECRET=your-secret-key
Stripe本番Webhookの設定
Stripeダッシュボードで本番用のWebhookエンドポイントを追加します。
https://your-domain.com/api/stripe/webhook
まとめ
Next-SaaS-Starterは、SaaS開発で面倒な部分をほぼカバーしてくれるテンプレートです。
- 決済（Stripe）が最初から動く
- 認証・認可が実装済み
- チーム管理・RBACも入っている
- UIもshadcn/uiできれいに整っている
「アイデアはあるけど、インフラ部分を作るのが面倒」という人には、かなりおすすめです。コスパ的にも、これを使わない理由がないレベルだと思います。
30代になって思うのは、「車輪の再発明をしない」ことの重要さなんですよね。こういう良質なテンプレートを使って、本当に作りたい機能に集中するのが正解だと思います。