Next.js疲れを感じているエンジニアは多いと思う。App Router、Server Components、キャッシュ周りの複雑さ...。

TanStack Startが選択肢として浮上してきた。実際に触ってみた所感をまとめる。

TanStack Startとは

TanStack Router(ファイルベースルーティング)をベースに、SSR/SSGを追加したフルスタックフレームワーク。Viteベース。

良い点

1. 型安全なルーティング

これが最大の魅力。パスパラメータ、検索パラメータまで完全に型が付く。

// 自動生成される型
const route = createFileRoute('/articles/$slug')({
  loader: async ({ params }) => {
    // params.slug は string 型が自動推論
    return fetchArticle(params.slug);
  },
});

2. Viteの恩恵

HMRが速い。Next.jsのTurbopackより体感で速い。

3. シンプルなメンタルモデル

Server Componentsのような「どこで実行されるか」を意識する必要が少ない。loaderで取得、componentで表示、が明確。

課題

1. Cloudflare Workers対応

2025年12月時点ではまだ不安定。Nodeランタイム前提の部分が多い。

2. 認証周り

Next.jsのmiddlewareのような仕組みがまだ弱い。自前で実装する部分が多い。

// beforeLoad で認証チェックする例
export const Route = createFileRoute('/dashboard')({
  beforeLoad: async ({ context }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({ to: '/login' });
    }
  },
});

3. エコシステム

next/image、next/font のような最適化ツールは自前で用意する必要がある。

Next.jsと比較

項目 Next.js TanStack Start
型安全ルーティング
SSR/SSG
エッジランタイム
学習コスト
エコシステム

結論

Next.jsの「代替」というより「別解」。

  • 型安全性を重視するなら: TanStack Start
  • エコシステム・実績を重視するなら: Next.js
  • Cloudflare Workers必須なら: 現時点では別の選択肢を

おわり

TanStack Startは荒削りだが、思想は好き。1年後にはもっと成熟しているはず。