Deploy Your v0 App to Netlify

v0 (Vercel’s AI app builder, now at v0.app) turns a prompt into a working app in your browser. By default it generates a Next.js app with React, TypeScript, Tailwind CSS, and shadcn/ui components (v0 FAQ). The code is yours to export, and Netlify offers first-class Next.js support through its OpenNext-based Next.js Runtime — so if your team already uses Netlify, you can host a v0-generated app alongside your other Netlify projects and get Deploy Previews, Functions, and rollbacks on it.

v0 is designed for one-click deploys to Vercel, so deploying to Netlify takes a few more steps and means swapping out any Vercel-specific services your app uses (see the caveat below). This guide walks through that so your v0 project can live on the same platform and workflow as the rest of your work.

This guide covers two main paths, from the most automated to the most hands-on, plus how to pull a single v0 component into an existing site:

1. Sync v0 to GitHub and connect the repo to Netlify for continuous deploys. Best if you plan to keep editing the app.
2. Export the code and deploy with the Netlify CLI for local iteration or scripted/agent workflows.
3. Add a single v0 block to an existing project with the shadcn CLI.

Pick the first if you want a live URL that updates as you keep working in v0.

Prerequisites

• A v0 project that runs. v0 usually generates a Next.js (App Router) app with React, TypeScript, Tailwind, and shadcn/ui, though it can produce other targets.
• A Netlify account. The free plan hosts production sites within a monthly usage allowance.
• For the Git path: a GitHub account. v0 offers a bi-directional GitHub integration, so your v0 project and repository stay in sync (v0 FAQ).

A note on Vercel-specific services

v0 generates a standard Next.js app, and that code runs on Netlify. But because v0 is a Vercel product, a generated app may reach for Vercel-specific backing services — Vercel KV, Vercel Blob, Vercel Postgres, Edge Config, or Vercel Analytics. Those do not run on Netlify without substitution. Before deploying, scan your project for them and swap in equivalents:

If your v0 app is UI-only (the common case), there’s nothing to swap and you can deploy as-is.

Option 1: Sync v0 to GitHub, then connect the repo to Netlify

This is the path for a full app you intend to keep building. Every push redeploys the site, and every pull request gets its own preview URL.

1. In your v0 project, connect it to GitHub. v0’s bi-directional GitHub integration creates (or links) a repository and keeps it in sync with your v0 edits — changes you make in v0 push to the repo, and changes you push to the repo flow back (v0 FAQ). (Exact button labels in the v0 UI change over time; look for the GitHub/export option in your project.)
2. In Netlify, choose Add new project, then Import an existing project, and select the repository v0 created.
3. Netlify detects Next.js and fills in the build settings automatically. It uses its OpenNext-based Next.js Runtime (Next.js 13.5+), so server rendering, the App Router, and API routes work without manual configuration (Next.js on Netlify).
4. Add any environment variables your app needs (see below).
5. Deploy. Netlify builds the app and returns a live URL. From now on, every commit — whether it comes from v0 or from your own editor — triggers a new deploy.

Because the integration is bi-directional, you can keep prompting in v0 and edit the code directly; both land in the same repo, and Netlify redeploys either way.

Option 2: Export the code and deploy with the Netlify CLI

Use this when you want to run the app locally, iterate outside v0, or deploy from a script or agent.

1. Export the project from v0 to work locally — either by pulling the synced GitHub repo (Option 1, step 1) or exporting the code, then open a terminal in the project folder.
2. Install dependencies and build:

   npm install
   npm run build

   A Next.js app builds to .next/. If your v0 app is configured for a fully static export (output: 'export' in next.config.js), it builds to out/ instead.
3. Connect the folder to a Netlify site and deploy with the Netlify CLI:

   netlify link      # or netlify init to create a new site
   netlify deploy --prod

   netlify deploy runs your build by default, so the Next.js adapter is applied during the deploy. Do not add --no-build for a server-rendering Next.js app, or the SSR output won’t be generated.

If you are automating this from an agent, see Publishing and updating live sites with the Netlify CLI for the non-interactive, JSON-output workflow.

Netlify Drop caveat: Drop uploads finished static files and runs no build. It only works for a v0 app configured as a fully static export (out/). A default v0 app that uses server rendering or API routes will not run correctly if dropped as static files — use Option 1 or the CLI build instead.

Option 3: Add a single v0 component to an existing site

If you only want one v0-generated block inside an app already deploying to Netlify, you don’t need to move the whole project. v0 generates shadcn/ui components, and its Add to Codebase option gives you a shadcn CLI command that pulls the component into a local project (shadcn CLI, Open in v0):

npx shadcn@latest add "https://v0.app/..."   # the exact URL v0's "Add to Codebase" gives you

The command drops the files into your components directory. If v0’s UI doesn’t surface that command for your generation (the feature has changed over time), fall back to copying the component code from v0 directly, or use the GitHub sync from Option 1. Either way, commit the added files and push; your existing Netlify deploy picks them up on the next build.

Add environment variables

If your v0 app calls an API or a backend (for example, an AI model key or a database URL), those values live in v0’s environment, not Netlify’s. Add them in Netlify before deploying. Next.js only exposes browser-side variables prefixed with NEXT_PUBLIC_; keep secrets unprefixed so they stay server-side.

• In the Netlify UI: Project configuration → Environment variables, then add each key and value.
• With the Netlify CLI: netlify env:set MY_KEY value.

Rebuild after adding variables so the new values reach your app. Copy the exact variable names from wherever the service defines them rather than guessing.

Troubleshooting

The build fails on Netlify but worked in v0. v0 and Netlify may build on different Node versions. Pin the version with a .nvmrc file or a NODE_VERSION environment variable to match what your project expects.

A server-rendered page 404s or errors after a static deploy. You deployed a server-rendering app as static files (for example with --no-build or Netlify Drop). Use Option 1, or run netlify deploy --prod and let the default build run so the Next.js adapter applies. Only set output: 'export' if your app is genuinely static.

A feature that worked in v0 is broken live. Look for a missing environment variable or an API that only accepted requests from v0’s preview domain. Add the variable in Netlify and update any allowed-origin lists on your backend.

A shadcn component is missing styles. Confirm Tailwind is configured and the component’s dependencies were installed. Re-running npx shadcn@latest add for that component pulls any files it needs.

Keep building

Once your v0 app is on Netlify, you have deploy previews on every pull request (if you used the Git path), so you can review changes before they reach production. From here, add a custom domain, wire up Netlify Functions for backend logic, or connect a database to power dynamic features.

Resources

• v0 FAQ
• Open in v0 (shadcn registry)
• Next.js on Netlify
• Netlify CLI: get started
• Set environment variables