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年後にはもっと成熟しているはず。