TanStack Start が『Next.jsの真の代替』として登場
TanStack StartはTanStack Query/Routerで知られるTanner Linsley率いるチームが2024〜2025年に開発したフルスタックフレームワークです。Next.js App Routerとは異なる『TypeScript-first・型完全Server Functions・ファイルベースルーティング・SSR/SPA選択可能』というアプローチで、新規プロジェクトの選択肢として急速に注目を集めています。1.0安定版リリースが2025年で、Vercel・Netlify・Cloudflare等への対応も完成しています。
採用すべき5つのシグナル
- Next.js App Routerの複雑性に詰まった
- TypeScript型推論を最大限活用したい
- TanStack Query/Routerを既に使っている
- SPA + SSRの柔軟な選択が必要
- 新規プロジェクトで先進的選択肢を試したい
Next.js App Router/Remix/TanStack Start比較
Next.js App Router: シェア最大・複雑・React Server Components前提・Vercel最適化。
Remix（React Router v7）: Web標準志向・Loader/Actionパターン・Cloudflare等にも親和性。
TanStack Start: TS-first・型完全・TanStack統合・新しい・柔軟性高い。
使い分け: 安定実績はNext.js・Web標準はRemix・TS型推論・TanStack愛用はStart。
主要機能
- Server Functions: 型完全なサーバ関数
- File-based Routing: TanStack Router統合
- SSR/SPA: 同一プロジェクトで両方選択可能
- Streaming: React Suspense統合
- Type-safe Loaders: 型推論されたデータ取得
- Deployment: Vercel/Netlify/Cloudflare等多数対応
実装パターン
(1) セットアップ: npm create @tanstack/router
(2) Route定義: routes/ディレクトリでファイル単位
(3) Server Function: createServerFn().handler(async () => {})
(4) Loader: route.loader({ loader: async () => {} })
(5) デプロイ: Vercel/Cloudflare/Bunに対応
本番採用の判断基準
- 本番実績: 2025年GA以降、スタートアップ採用開始
- エコシステム: TanStack Query/Router・既存React UI libraries対応
- 学習コスト: Next.js経験者は2〜4週間で習得
- パフォーマンス: 静的解析でバンドル最適化
- ベンダーロックイン: 主要クラウド対応・OSS
採用しない方が良いケース
- 大規模プロジェクトで安定実績重視
- Vercel特化機能（Edge Config・ISR等）が必須
- チームがReact Server Components慣れている
- SEO極限最適化が必要（実績はNext.jsが上）
- Next.jsエコシステム（next-auth等）依存度高い
実装で詰まる3つの落とし穴
- Server Functionsの型: ジェネリックの推論
- SSR/SPA切替: ページ単位の戦略設計
- ビルド設定: デプロイ先別の構成
30日プラン
- 1週目: TanStack Start基礎・ファイルルーティング
- 2週目: Server Functions・Loaderパターン
- 3週目: TanStack Query統合・データ取得最適化
- 4週目: 本番デプロイ・Cloudflare/Vercel
関連リンク
Next.jsは Next.js深掘り、TanStack Queryは TanStack Query v5深掘り、Astroは Astro Server Islands深掘り を参照してください。SST v3は SST v3深掘り もどうぞ。