---
title: Comparison of Next.js and TanStack Start
tags: 
author: [Yuki Terashima](https://image.docswell.com/user/yt4)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/P7R95MP4E9.jpg?width=480
description: イベント「もうNext.jsには戻れない？次世代フルスタックフレームワークTanStack Startってなに」のLT資料です。  https://offers-jp.connpass.com/event/387230/
published: April 09, 26
canonical: https://image.docswell.com/s/yt4/5272W1-comparison-of-next-js-and-tanstack-start
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/P7R95MP4E9.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/PJXQKV3Z7X.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/3JK95QYVJD.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LE3WKPVQE5.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/8EDK3L8W7G.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V7PK428XJ8.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/2JVVXDN3JQ.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5EGLVYKYJL.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JQY6MN67P.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/K74W4VGME1.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LJ1Y43DYEG.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GJWGXPY172.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EZL6KXX73.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/Y76W2Q4P7V.jpg)

まとめ
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/G75M2RQP74.jpg)

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