Getting Started with TanStack Start

What is TanStack Start?

TanStack Start is a full-stack React framework built on top of TanStack Router. It brings type-safe routing, server functions, and seamless SSR to React applications — all without the complexity of configuring everything from scratch.

Setting Up a New Project

Install the dependencies and scaffold the project:

npm create tanstack@latest
cd my-app
npm install
npm run dev

File-Based Routing

Routes are defined by files in src/routes/. A file named posts.$slug.tsx maps to /posts/:slug, giving you fully type-safe params.

export const Route = createFileRoute('/posts/$slug')({
  loader: async ({ params }) => fetchPost(params.slug),
  component: PostPage,
})

Server Functions

Server functions run exclusively on the server but can be called from any component:

import { createServerFn } from '@tanstack/start'

export const getPosts = createServerFn().handler(async () => {
  return await db.posts.findMany()
})

Deploying to Netlify

Add the Netlify plugin to vite.config.ts and push. The netlify.toml config handles the build output and serverless function routing automatically.

TanStack Start is a strong choice for teams who want React with end-to-end type safety and minimal framework lock-in.