はじめに
SaaSを1つ作るとき、認証・課金・データベース・デプロイ基盤といった「本題に入る前の土台」だけで数日〜数週間かかることは珍しくありません。しかもそれぞれの部品をバラバラのライブラリから選んで繋ぎ込むと、型の整合性が取れなかったり、後から思わぬ手戻りが発生したりします。
React Starter Kitは、この土台部分をあらかじめ組み上げた状態で提供するモノレポテンプレートです。React 19・tRPC・Cloudflare Workersを軸に、認証・課金・データベースまでを型安全につなぎ、git cloneした直後から機能開発に集中できる状態を目指しています。
React Starter Kitとは
React Starter Kit（RSK）は、kriasoft氏が開発・公開しているオープンソースのフルスタックReactテンプレートです。単体のUIライブラリではなく、フロントエンドからAPI、データベース、インフラ設定までを含む「本番投入可能なSaaSの雛形」として設計されています。2026年時点の最新版はv3.0で、それまでのExpress/GraphQL構成から、Bun・tRPC・Cloudflare Workersを中心とした構成へと全面的に刷新されました。
主な特徴
- 型安全なフルスタック構成 - TypeScript・tRPC・Drizzle ORMにより、データベースのスキーマ変更がそのままAPIとフロントエンドの型エラーとして検出される
- エッジネイティブなアーキテクチャ -
apps/app（React 19製SPA）・apps/api（Hono + tRPC）・apps/web（Astro製マーケティングサイト）の3つがCloudflare Workersのサービスバインディングで接続される - 認証・課金が最初から組み込み済み - Better Authによるメールワンタイムパスワード・パスキー・Google OAuth、およびStripeによる課金導線が用意されている
- モダンなフロントエンド構成 - React 19、TanStack Router、Tailwind CSS v4、shadcn/uiベースのUIコンポーネント
- AIコーディングツールとの親和性 -
CLAUDE.mdなど、Claude Code・Cursor・GitHub Copilot向けのプロジェクト情報がリポジトリに同梱されている
なお、v3.0は旧バージョンからの大幅なアーキテクチャ変更を伴うため、既存プロジェクトを段階的に移行するのではなく、新規テンプレートから始めることが公式に推奨されています。
インストール
React Starter Kitはnpmパッケージとしてインストールする形ではなく、GitHubテンプレートからリポジトリを生成して使います。ランタイムにはNode.jsではなくBun（v1.3以上）を使用します。
# GitHubのテンプレート機能から新規リポジトリを作成し、クローンした後
bun install
# 環境変数ファイルを用意
cp .env .env.local
# .env.local に Cloudflare / Stripe / 認証まわりの資格情報を設定
# データベースのスキーマを反映してサンプルデータを投入
bun db:push
bun db:seed
基本的な使い方
セットアップが終わったら、bun devでアプリ・API・マーケティングサイトをまとめて起動できます。個別に起動したい場合は、パッケージごとのスクリプトを使います。
bun dev # apps/app・apps/api・apps/web をまとめて起動
bun app:dev # React 19 製 SPA のみ起動 (http://localhost:5173)
bun api:dev # Hono + tRPC の API サーバーのみ起動 (http://localhost:8787)
bun web:dev # Astro 製マーケティングサイトのみ起動 (http://localhost:4321)
フロントエンドからAPIを呼び出す部分はtRPCによって型付けされています。バックエンド側で定義したルーターの戻り値の型が、そのままフロントエンド側の補完・型チェックに反映されるため、REST APIのようにレスポンスの形をドキュメントで確認しに行く必要がありません。
// apps/api 側: tRPCルーターの定義
export const userRouter = router({
me: protectedProcedure.query(({ ctx }) => {
return ctx.db.query.users.findFirst({
where: eq(users.id, ctx.user.id),
})
}),
})
// apps/app 側: 上のルーターがそのまま型付きで呼び出せる
const { data: user } = trpc.user.me.useQuery()
// user.id や user.email に、サーバー側の型のまま補完が効く
実践的なユースケース
React Starter Kitは単一の使い方だけでなく、プロジェクトの構成に応じていくつかの組み込み方があります。ここでは代表的な3つのパターンを紹介します。
認証フローの組み込み
会員登録・ログインを自前で実装すると、パスワードハッシュ化やセッション管理、OAuthのコールバック処理など、機能自体とは無関係な部分に工数が取られがちです。React Starter Kitでは認証にBetter Authを採用しており、メールのワンタイムパスワード・パスキー・Google OAuthといった複数の認証手段を、設定ファイルを差し替えるだけで有効化できます。
// apps/api/src/auth.ts (概念的な設定例)
export const auth = betterAuth({
database: drizzleAdapter(db, { provider: "pg" }),
emailAndPassword: { enabled: false },
emailOTP: { enabled: true },
socialProviders: {
google: {
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
},
},
})
課金導線の追加
SaaSにサブスクリプション課金を追加する際、Stripeのプラン管理・Webhook処理・請求状態の同期は、実装量の割にミスが目立ちやすい領域です。React Starter Kitにはあらかじめ課金用のtRPCルーターとStripe連携が組み込まれており、料金プランの定義とWebhookのハンドラを差し替えるだけで、ユーザーの課金状態をデータベースと同期できます。
export const billingRouter = router({
createCheckoutSession: protectedProcedure
.input(z.object({ priceId: z.string() }))
.mutation(async ({ ctx, input }) => {
const session = await stripe.checkout.sessions.create({
mode: "subscription",
customer: ctx.user.stripeCustomerId,
line_items: [{ price: input.priceId, quantity: 1 }],
success_url: `${ctx.origin}/billing/success`,
})
return { url: session.url }
}),
})
エッジへのデプロイ
React Starter Kitのバックエンドは、Node.jsサーバーとしてではなくCloudflare Workers上で動くことを前提に設計されています。apps/app・apps/api・apps/webがそれぞれ独立したWorkerとしてデプロイされ、サービスバインディングで相互に通信します。これにより、リージョンを意識せずユーザーに近い場所でAPIが処理されます。
# 各Workerを個別にビルド・デプロイ
bun app:deploy
bun api:deploy
bun web:deploy
# データベース（Neon PostgreSQL）へのマイグレーション適用
bun db:migrate
Cloudflare Workers以外に、コンテナ環境向けにGoogle Cloud Runへのデプロイも選択肢として用意されており、エッジ環境を使わない構成に切り替えることもできます。
まとめ
React Starter Kitは、SaaS開発でほぼ毎回必要になる認証・課金・データベース・デプロイ基盤を、型安全な形であらかじめ組み上げてくれるモノレポテンプレートです。v3.0でBun・tRPC・Cloudflare Workersを軸にした構成へ刷新されたことで、フロントエンドからインフラまでの型の一貫性がより強くなりました。ゼロから土台を組む代わりに、React Starter Kitをクローンするところから始めてみてはいかがでしょうか。