Deploy a TanStack Start app to Vercel

TanStack Start is a full-stack framework powered by TanStack Router for React and Solid, with support for full-document SSR, streaming, server functions, and bundling. It runs on Vercel when paired with Nitro, the server toolkit that builds your app for the Vercel runtime. Vercel detects TanStack Start and Nitro automatically, so once the Nitro plugin is in place, you can deploy from Git or the CLI without extra build configuration.

This guide walks you through installing the Nitro plugin, registering it in your Vite config, and deploying your TanStack Start app to Vercel with Git or the Vercel CLI so it builds and serves routes correctly. You'll also verify the live deployment, learn how Vercel runs your server functions on Fluid compute by default, and fix common framework detection issues, such as a missing TanStack Start preset in a monorepo.

Before you begin, make sure you have:

• A Vercel account
• Node.js 20+ and a package manager (e.g., npm).
• An existing TanStack Start project, or a new one created from the Vercel template
• A Git repository on GitHub, GitLab, or Bitbucket (if you want Git-based deployments)

TanStack Start apps are built on Vercel with Nitro. The Nitro Vite plugin compiles your server code into output that Vercel deploys as Vercel Functions. By default, Vercel runs these functions on Fluid compute, so your app scales with traffic, and you pay only for what you use, not for idle function time.

Because Vercel ships zero-configuration detection for both TanStack Start and Nitro, you don't need to set a build command or output directory. Vercel reads your project, identifies the framework, and applies the correct settings.

If you created your project from the Vercel template, Nitro is already configured, so you can skip to step two. For an existing project, install nitro from the root directory using your preferred package manager:

# npm
npm install nitro

# pnpm
pnpm add nitro

# yarn
yarn add nitro

Add the nitro plugin to the plugins array in your vite.config.ts file. Place it alongside the TanStack Start and React plugins:

import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import { defineConfig } from 'vite';
import viteReact from '@vitejs/plugin-react';
import { nitro } from 'nitro/vite';

export default defineConfig({
  plugins: [tanstackStart(), nitro(), viteReact()],
});

For a Solid project, swap the React plugins for their Solid equivalents and keep the nitro() plugin in place.

If your TanStack Start app uses private API keys or other secrets, save them to Vercel before deploying. Open your project's Environment Variables settings, add each key-value pair, and select the applicable environments (Production, Preview, and Development).

Since TanStack Start apps are built with Vite, the VITE_ prefix determines where a variable is available:

• Variables prefixed with VITE_ are bundled into your client-side code and readable in the browser through import.meta.env. Use this only for values that are safe to make public (e.g., publishable API keys).
• Variables without the prefix never reach the client bundle. They stay available to server-side code, such as server functions and loaders, through process.env. Keep secrets like database credentials and private API keys unprefixed.

To run your app locally with the same values, pull them into a .env file with the CLI:

vercel env pull

After you change a variable in Vercel, redeploy for the change to take effect. Existing deployments keep the values they were built with.

When deploying your TanStack Start project to Vercel, you have two options.

Deploy from Git:

1. Commit and push your project to a Git repository.
2. Go to the new project page and import the repository.
3. Vercel detects TanStack Start and fills in the build settings for you. Confirm the framework preset reads TanStack Start, then select Deploy.

Each push to your main branch triggers a new deployment from now on.

Install the Vercel CLI and deploy:

npm install -g vercel
vercel

The CLI guides you through linking the project to Vercel, then builds and deploys it to your preview environment. That same deployment can be promoted to production with vercel promote <deployment-id-or-url>, or you can trigger a new one with vercel --prod.

After the build finishes, Vercel returns a deployment URL. Open it and verify that:

• The page renders with server-side content
• Navigating between routes works without errors
• Any server functions return the expected responses

If the home page loads but routes return 404 errors, confirm that nitro() is present in your Vite config and redeploy. Routing failures on Vercel usually stem from a missing or misplaced Nitro plugin. You can also check your deployment logs for any errors.

In a monorepo, or in a project that previously used a different framework, Vercel may not automatically detect TanStack Start. To fix this, change the Framework Preset in your project’s framework settings. You can also set the preset in a vercel.json file:

{
  "framework": "tanstack-start"
}

Confirm your local build runs cleanly before deploying:

npm run build

Failing local builds indicate a potential issue with the project. Resolve the local error first, then redeploy. If the build passes locally but fails on Vercel, verify that your Node.js version in project settings matches the version you use locally.

• Read the full TanStack Start on Vercel documentation
• Learn how Vercel Functions run your server code
• Understand pricing and scaling with Fluid compute
• Explore the TanStack Start docs
• Configure Vercel-specific features through the Nitro Vercel provider docs
• Learn about TanStack Intent and TanStack Hotkeys