TanStack Start full-stack React framework expert. Auto-loads when working on TanStack Start projects, TanStack Router, Vite+Nitro full-stack apps, createServerFn, createFileRoute, file-based routing, SSR/SPA mode, server functions, middleware, React Query integration, tRPC, Cloudflare/Netlify/Vercel deployment, isomorphic code patterns, route loaders, useSession authentication, and Tailwind v4 setup.
TanStack Start is a full-stack React framework built on TanStack Router + Vite + Nitro. It provides file-based routing, server functions (RPC), SSR/SPA/static modes, and deploys anywhere (Cloudflare, Netlify, Vercel, Node, Bun).
| API | Purpose |
|---|---|
createFileRoute('/path') | Define a route with loader, component, head |
createRootRoute() / createRootRouteWithContext() | Root layout route |
createRouter({ routeTree, context }) | App router instance |
createServerFn({ method: 'GET'|'POST' }) | Server-only RPC function |
createMiddleware() | Request or function middleware |
useSession() | Cookie-based server session |
Route.useLoaderData() | Access route loader return value |
useNavigate()| Programmatic navigation |
<Link to="/path"> | Type-safe navigation link |
redirect({ to, throw: true }) | Redirect (throw inside loader/beforeLoad) |
notFound({ throw: true }) | Trigger 404 boundary |
src/
routes/
__root.tsx # Root layout (shellComponent when SSR disabled)
index.tsx # /
about.tsx # /about
posts/
$postId.tsx # /posts/:postId
routeTree.gen.ts # Auto-generated (never edit)
router.tsx # createRouter() entry
client.tsx # Client entry (StartClient)
ssr.tsx # SSR handler
app.config.ts # tanstackStart() vite plugin config
. in filename → / path separator (e.g., posts.index.tsx → /posts/)$param → dynamic segment_layout → pathless layout (no URL segment)(group) → route group (no URL impact)index.tsx → index route for a directory*.lazy.tsx → code-split lazy route{
"@tanstack/react-start": "latest",
"@tanstack/react-router": "latest",
"react": "^19.0.0",
"vite": "^6.0.0",
"vinxi": "latest"
}