TanStack Startを触ってみて、Next.jsと比べた

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);
  },
});

Next.jsのApp Routerは文字列のルーティングで、paramsがanyっぽく扱われることがあるので、この違いは大きい。

2. Viteの恩恵

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

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

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

課題

1. Cloudflare Workers対応

2025年12月時点ではまだ不安定。Nodeランタイム前提の部分が多い。自分がよく使う Workers にそのまま載せられないのが痛い。

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、エコシステム・実績を重視するならNext.js、という使い分けが今のところの感想です。Cloudflare Workers必須の自分には、現時点ではまだ載せられない部分が多くて、本格導入は見送りました。

TanStack Startは荒削りだけど、考え方は好きです。1年後にもう一度触ってみたい。個人的には、型安全ルーティングの考え方だけでも、Next.jsを使う時に真似したいと思いました。