--- title: "Deploy Your v0 App to Netlify" description: "Deploy a v0 app to Netlify by syncing it to GitHub for continuous deploys or exporting the code and using the Netlify CLI." source: "https://www.netlify.com/knowledge-base/deploy-your-v0-app-to-netlify/" last_updated: "2026-07-24T14:06:44.000Z" --- v0 (Vercel’s AI app builder, now at [v0.app](https://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](https://v0.app/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](#a-note-on-vercel-specific-services)). 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](https://app.netlify.com/signup). 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](https://v0.app/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: Vercel service Netlify / third-party equivalent Vercel KV / Edge Config [Netlify Blobs](https://docs.netlify.com/build/data-and-storage/netlify-blobs/) Vercel Postgres [Netlify Database](https://docs.netlify.com/build/data-and-storage/netlify-database/), or Neon/Supabase Vercel Blob Netlify Blobs, or an object store (S3, R2) Vercel Analytics A third-party analytics provider 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](https://v0.app/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](https://docs.netlify.com/build/frameworks/framework-setup-guides/nextjs/overview/)). 4. Add any environment variables your app needs (see [below](#add-environment-variables)). 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 installnpm 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](https://docs.netlify.com/cli/get-started/): ``` netlify link # or netlify init to create a new sitenetlify 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](https://www.netlify.com/guides/publish-and-update-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](https://ui.shadcn.com/docs/cli), [Open in v0](https://ui.shadcn.com/docs/registry/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](https://docs.netlify.com/cli/get-started/): `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](https://docs.netlify.com/build/functions/overview/) for backend logic, or connect a database to power dynamic features. ## Resources - [v0 FAQ](https://v0.app/faq) - [Open in v0 (shadcn registry)](https://ui.shadcn.com/docs/registry/open-in-v0) - [Next.js on Netlify](https://docs.netlify.com/build/frameworks/framework-setup-guides/nextjs/overview/) - [Netlify CLI: get started](https://docs.netlify.com/cli/get-started/) - [Set environment variables](https://docs.netlify.com/build/environment-variables/overview/)