コンテンツへスキップ
Supastack
JA
テーマ
ログインSupastack を入手
すべての記事

TanStack Start SaaS スターターキット, フル製品を Vite で

supastack は完全な TanStack Start アプリを同梱。型安全ルーティング、サーバー関数、認証、課金、AI、管理画面, Next.js 版と同じ SaaS を、同じモノレポで。

Noah Zixin Zhang約 2 分で読めます

supastack の TanStack Start アプリには何が含まれますか?

プランによりますが、どのライセンスにも Vite と TanStack Router 上の完全な supastack プロダクトが付属します。型安全なファイルベースルーティングと SSR、サーバー関数、認証、ワークスペース、8社の決済プロバイダーによる課金、AIアシスタント、OpenAPI リファレンス付き管理画面。Next.js アプリと同じスキーマとパッケージを読むため、2つの Web フロントエンドを1つのバックエンドで動かせます。

切り出しではなく、SaaS 丸ごと

多くの TanStack スターターはログインページと Todo リストで終わります。こちらは supastack の全画面, Next.js アプリが出すのと同じ画面群, を描画するので、TanStack Start を選んでも製品が減ることはありません。

  • ホームダッシュボード、分析、プロダクト全体の検索
  • メンバー、招待、セキュリティセッション、SSO 設定
  • 8 つの決済プロバイダーに対応したチェックアウト、プラン、署名付き Webhook の課金
  • AI アシスタントとバックグラウンドエージェントタスク(ワークスペース単位の予算付き)
  • OpenAPI 文書化 API とアプリ内リファレンスページ
  • オンボーディング、通知、メールプレビュー、フィードバック受信箱
  • 同じデザインシステム上の 13 言語と 20 以上のテーマパック

チームが TanStack Start を選ぶ理由

Vite 8 は即座に起動し、TanStack Router はエンドツーエンド型安全なファイルベースルーティングを提供。サーバー関数は呼び出すコードのすぐ近くにミューテーションを置けます。フレームワークロックインのないモダン React スタックです。

両方の Web アプリを同じ共有パッケージが駆動, 認証、データベース、課金、AI、ジョブ、メール, 機能は両方の画面に同時に届き、プロダクトロジックが分岐することはありません。

  • TanStack Start + React
  • TanStack Start + Vite
  • 型安全なファイルベースルーティングと SSR
  • TypeScript + Turborepo
  • Better Auth
  • Drizzle + PostgreSQL
  • Sentry + PostHog

2 つの Web スタック、1 つのバックエンド

Vite と TanStack エコシステムが好きなら TanStack Start を。あるいは両方の Web アプリを出すのも手です。同じスキーマと同じパッケージを読むので、一度作った機能は両方のフロントエンドで動きます。

すべてのライセンスに両方の Web アプリと Expo、Tauri が含まれます。このスタックだけなら単プラットフォームプランもあります。

クローンから本番まで

一度インストールし、共有データベースに向ければ、Vite 開発サーバーが数分でシードデータ付きで立ち上がります。本番ビルドは標準で Node サーバーとして動き、他のターゲットには Nitro プリセットを使えます。

  • 同じモノレポ、同じパッケージ, 一度のインストールで全アプリをカバー
  • 型安全ルートが製品成長後のリファクタを誠実に保つ
  • ガイドは Next.js 版と一対一対応, 学習コストは平坦のまま

よくある質問

  • TanStack Start アプリは機能フル装備ですか?, はい。Next.js アプリと同じ製品面, ホーム、分析、メンバー、セキュリティセッション、課金、設定、OpenAPI リファレンス, を描画し、同じようにテストされています。
  • Next.js と TanStack Start、どちらを選ぶべき?, チームが好きなフレームワークを選んでください, どちらも付いてきます。比較記事でトレードオフを詳しく解説しています。
  • Next.js アプリとデータベースを共有しますか?, はい。両方の Web アプリは同じパッケージ経由で同じスキーマを読むので、片方または両方のフロントエンドを単一バックエンドで運用できます。

次のプロダクトは、ここから。

一度の支払いで、収益を生む製品を作り続ける。