TanStack Router v1 vs Next.js App Router 移行判断｜型安全ルーティング・ファイルベース・SSR 比較

// TanStack Router: パラメータ・検索クエリが型定義される
export const Route = createFileRoute('/posts/$id')({
  loader: ({ params }) => fetchPost(params.id), // params.id が型推論される
});

設計思想の根本的な違い

TanStack Router と Next.js App Router は「クライアントファースト」と「サーバーファースト」という対極の設計思想を持っています。

比較軸	TanStack Router	Next.js App Router
設計思想	クライアントファースト・明示的	サーバーファースト・統合型
ルーティング	ファイルベース + 型安全パラメータ	ファイルシステム規約
型安全性	エンドツーエンド（params・search・loader 全て）	部分的（params は手動型注釈が必要）
ビルドツール	Vite（高速 HMR）	Webpack / Turbopack（Vercel 最適化）
データ取得	Loader + Server Functions（RPC）	React Server Components（RSC）
デプロイ先	Node.js・Cloudflare Workers・Deno 等	Vercel 最適化（他は Edge Runtime 制限あり）

TanStack Router の型安全なパラメータ推論

Next.js では params.id の型は string ですが、TanStack Router ではルート定義から自動推論されます。

// Next.js App Router：params の型は自動では string のみ
// app/posts/[id]/page.tsx
export default function Page({ params }: { params: { id: string } }) {
  // id が数値か文字列かは自前でバリデーションが必要
  const numId = parseInt(params.id, 10);
}

// TanStack Router：スキーマから型推論
// routes/posts/$id.tsx
export const Route = createFileRoute('/posts/$id')({
  params: {
    parse: (params) => ({ id: z.coerce.number().parse(params.id) }),
    stringify: (params) => ({ id: String(params.id) }),
  },
  loader: ({ params }) => {
    // params.id は number 型として推論される
    return fetchPost(params.id);
  },
});

ルート定義を変更するとコンパイルエラーが発生するため、存在しないルートへのリンクをビルド時に検出できます。

どちらを選ぶべきか：判断フローチャート

以下の質問に答えてどちらが適しているかを判断してください。

質問	YES →	NO →
Vercel にデプロイする予定か	Next.js が有利	—
SEO・OGP が最優先事項か	Next.js App Router	—
チームが Next.js を既に知っているか	Next.js（学習コスト低）	—
Cloudflare Workers へのデプロイが必要か	TanStack Router	—
TypeScript の型安全性が最優先事項か	TanStack Router	—
複雑な SPA・ダッシュボードを作るか	TanStack Router	—
RSC の自動キャッシュ・ストリーミングが欲しいか	Next.js App Router	—

Next.js App Router が向いているケース

• コンテンツ重視の SEO サイト（ブログ・EC・マーケティング）
• Vercel を使う（自動 PPR・Image Optimization・Edge Middleware）
• React Server Components によるサーバーサイドレンダリングを活用したい
• チームに Next.js 経験者が多く、採用市場での一般知名度が重要

// Next.js App Router の典型的なパターン
// app/posts/page.tsx（Server Component）
export default async function PostsPage() {
  const posts = await db.post.findMany(); // サーバーサイドで直接 DB アクセス
  return <PostList posts={posts} />;
}

TanStack Router が向いているケース

• TypeScript ファーストで型安全なルーティングが必須
• Vite を使って高速な開発環境を構築したい
• Cloudflare Workers / Deno / Bun など Vercel 以外にデプロイする
• 複雑な SPA・データダッシュボード（admin panel 等）

// TanStack Router の型安全なルーティング
import { Link } from '@tanstack/react-router';

// ルートが存在しない場合はコンパイルエラー
<Link to="/posts/$id" params={{ id: 1 }}>投稿を見る</Link>
//         ↑ 存在するルートのみ補完される

Failure Boundary：Next.js App Router の「黒箱」キャッシュ

Next.js App Router の最大の落とし穴はキャッシュ動作の複雑さです。fetch() のキャッシュ・revalidate・cache: 'no-store' のどれが効いているかが直感的でなく、ローカルとデプロイ環境で動作が変わることがあります。

特に Cloudflare Pages にデプロイする場合、Next.js の unstable_cache や PPR は Cloudflare Edge Runtime で動作しない機能があります。この点では TanStack Router の方が環境依存の落とし穴が少ないです。