How to 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 Vercel CLI without extra build configuration.

In the steps below, you'll install the Nitro plugin, register it in your Vite config, deploy your app, and verify the live deployment. You'll also learn how Vercel runs your server functions on Fluid compute by default, and how to fix detection issues when Vercel doesn't apply the TanStack Start preset, such as in a monorepo.

Copy link to headingPrerequisites

Before you begin, make sure you have:

• A Vercel account and Vercel CLI installed (npm install -g vercel)
• Node.js 24+ and a package manager (e.g., npm)
• An existing TanStack Start project, or a new one created from the template
• A Git repository on GitHub, GitLab, or Bitbucket

Copy link to headingHow it works

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.

Copy link to headingSteps

Copy link to heading1. Add the Nitro plugin to your project

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:

pnpm i nitro

yarn add nitro

npm i nitro

bun add nitro

Copy link to heading2. Register Nitro in your Vite config

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.

Copy link to heading3. Set environment variables

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). You can also add variables from the terminal with the Vercel CLI:

vercel env add MY_KEY

The CLI prompts you for the value and the environments to apply it to. To scope a variable to one environment, pass it directly:

vercel env add MY_KEY production

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:

vercel env pull

You can't read secret environment variables (e.g., API keys) after creating them, so they won't appear in your .env file. Instead, create a separate, non-sensitive variable in the Development environment with a development credential.

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

Copy link to heading4. Deploy your app

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.

Deploy with the Vercel CLI:

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.

Copy link to heading5. Verify your deployment

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 more information, including any errors.

Copy link to headingTroubleshooting

Copy link to headingFramework preset not detected

In a monorepo, or in a project that previously used a different framework, Vercel may not automatically detect TanStack Start.

You have three ways to set the framework preset:

• In the dashboard, under the project's framework settings.
• In vercel.json:

{
  "framework": "tanstack-start"
}

• With the Vercel CLI:

vercel project update <project-name> --framework tanstack-start

Copy link to headingBuild succeeds, but the deployment returns errors

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.

Copy link to headingResources and next steps

• 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