Comparison of Next.js and TanStack Start

Comparison of Next.js and TanStack Start by Yuki Terashima (@y_temp4) 2026.04.09 | もう Next.js には戻れない？次世代フルスタックフレームワーク TanStack Start ってなに | #Offers_DeepDive 1

自己紹介 Yuki Terashima (@y_temp4) フリーランスの Web エンジニア おもにフロントエンドの開発を担当 2

• https://x.com/y_temp4

LTの概要 Next.js と TanStack Start を比較 同じところ 違うところ TanStack Start にフォーカスを当てたイベントの LT のため、 TanStack Start 贔屓になっているかもしれません🥺 3

Next.jsとTanStack Startの共通点 React ベースのフルスタックフレームワーク SSR API Routes ファイルベースルーティング 4

Next.jsとTanStack Startの違い 思想 RSC サーバー処理 ビルド デプロイ Next.js Convention over Configuration[1] あり Server Components + Server Actions Turbopack Vercel 最適化 TanStack Start Explicit & Full-stack Typesafe なし（開発中） Server Functions (RPC) Vite デプロイ先に依存しない 1. 例: API Reference: File-system conventions | Next.js ↩︎ 5

• https://nextjs.org/docs/app/api-reference/file-conventions
• #p5

React Server Componentsのサポート Next.js: あり layout や page はデフォルトで Server Components サーバーで取得・描画した内容に、必要なところだけ Client Components を重ねる TanStack Start: 現状は未サポート（開発中[1]） isomorphic by default [2] で、同じコードがサーバーとクライアントの両方で動く前提 loader は SSR 時はサーバー、画面遷移時はクライアントで実行される RSC-first ではなく、通常の React を SSR + hydrate しつつ、必要に応じて createServerFn() や Selective SSR / SPA Mode を使う設計 1. TanStack Start: A Client First Web Framework - Tanner Linsley - YouTube ↩︎ 2. Core Principle: Isomorphic by Default | TanStack Start React Docs ↩︎ 6

• #p5
• #p6
• https://www.youtube.com/watch?v=8XGcc-FRPuo&t=1167s
• https://tanstack.com/start/latest/docs/framework/react/guide/execution-model#core-principle-isomorphic-by-default

サーバー処理の違い Next.js: Server Components + Server Actions サーバーサイドでの処理をコンポーネントやアクションとして定義 TanStack Start: Server Functions (RPC) サーバーサイドの処理を関数として定義し、RPC で呼び出す 7

Next.js: Server Components + Server Actions
async function createPost(formData: FormData) {
"use server";
}

await db.post.create({ data: { title: String(formData.get("title")) } });

export default async function Page() {
const posts = await db.post.findMany();

}

return (
<>
<form action={createPost}>
<input name="title" />
<button type="submit">Add</button>
</form>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</>
);

8

TanStack Start: Server Functions (RPC)
import { createServerFn } from "@tanstack/react-start";
import {
createFileRoute,
redirect,
} from "@tanstack/react-router";
const getPosts = createServerFn().handler(async () => {
return db.post.findMany();
});
const createPost = createServerFn({ method: "POST" })
.inputValidator((data) => {
if (!(data instanceof FormData)) {
throw new Error("Expected FormData");
}
return { title: String(data.get("title")) };
})
.handler(async ({ data }) => {
await db.post.create({ data });
return redirect({ to: "/posts" });
});

export const Route = createFileRoute("/posts")({
loader: () => getPosts(),
component: PostsPage,
});
function PostsPage() {
const posts = Route.useLoaderData();

}

return (
<>
<form action={createPost.url} method="POST">
<input name="title" />
<button type="submit">Add</button>
</form>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</>
);

9

ビルドの違い Next.js: Turbopack フレームワークと強く統合されたビルド体験 Next.js 向け最適化が強く、セットアップは少なめ そのぶん内部挙動はフレームワーク依存になりやすい TanStack Start: Vite 既存の Vite エコシステムをそのまま使いやすい プラグインやビルド設定の自由度が高い デプロイ先やランタイムの選択肢を持ちやすい[1] 1. Hosting | TanStack Start React Docs ↩︎ 10

• https://tanstack.com/start/latest/docs/framework/react/guide/hosting
• #p5

型安全性 Next.js: 部分的 型安全性はある程度提供されるが、完全ではない TanStack Start: End-to-End クライアントとサーバーの両方で型安全性が保証される 11

Next.js: dynamic routeの例
// app/posts/[postId]/page.tsx
export default async function Page({
params,
}: {
params: Promise<{ postId: string }>;
}) {
const { postId } = await params;
}

return <div>Post ID: {postId}</div>;

params

の型がルート定義から自動推論されない（手動で型指定が必要）[1]

1. PageProps を使うともう少し型推論が効くようになる。参考: Page Props Helper | Next.js ↩︎

12

• #p5
• https://nextjs.org/docs/app/api-reference/file-conventions/page#page-props-helper

TanStack Start: dynamic routeの例
// src/routes/posts/$postId.tsx
// もしくは src/routes/posts.$postId.tsx など
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/posts/$postId")({
component: PostPage,
});
function PostPage() {
const { postId } = Route.useParams();
}

return <div>Post ID: {postId}</div>;

でパスパラメータを表現
パラメータの型がルート定義から推論される
$postId

13

まとめ 14

Next.jsとTanStack Start、どちらを選ぶべき？ 参考: When to Choose Each Framework | TanStack Start React Docs Next.js が向いているケース React Server Components を今すぐ本命で使いたい Vercel 前提、または Vercel 最適化の体験を重視したい まずは Convention over Configuration で素早く立ち上げたい 画像最適化やフォント最適化を標準機能として使いたい TanStack Start が向いているケース ルーティングの型安全性を最優先したい Vercel に縛られず、デプロイ先の自由度を持ちたい Convention よりも、Composable で明示的な設計を好む ルート単位で SSR を細かく制御したい TanStack Query など、TanStack エコシステムを活かしたい 15

• https://tanstack.com/start/latest/docs/framework/react/comparison#when-to-choose-each-framework