Deploy a Next.js site to Vercel, step by step

Vercel is made by the team behind Next.js, and it detects Next.js projects automatically. Here is the path from a project on your computer to a live site.

Before you start

1. Check that the project builds locally: run npm install, then npm run build. If it fails here, it will fail on Vercel too.
2. Confirm your Node.js version meets the project's requirements. Next.js 15 needs Node.js 18.18 or newer.
3. Make sure secrets are not committed. Keys belong in environment variables, not in the repository.

Put the project in Git

Create a repository on GitHub, GitLab or Bitbucket and push the project. Add a .gitignore that excludes node_modules and local environment files.

Import and deploy

1. In Vercel choose Add New → Project and select your repository.
2. Vercel detects the framework. Leave the default build command and output settings unless the project's README says otherwise.
3. Add environment variables before the first deploy if the project needs them.
4. Click Deploy. When it finishes, Vercel gives you a URL on its own domain.

Environment variables

Open the project's Settings → Environment Variables. You can set different values for Production, Preview and Development. In Next.js, only variables whose names start with NEXT_PUBLIC_ are exposed to the browser; everything else stays on the server. Changing a variable requires a new deployment to take effect.

Preview deployments

Each branch and pull request gets its own preview URL. Use that to review a change on a real URL, on your phone, before it reaches production. Merging to the production branch publishes it.

Connect your domain

1. Go to Settings → Domains and add your domain.
2. Vercel shows the DNS records to create. Add exactly those at your domain registrar or DNS host.
3. Wait for DNS to propagate. Vercel issues an HTTPS certificate automatically once the records resolve.
4. Decide whether the bare domain or the www version is primary and redirect the other to it.

Quick health check after launch

• Open the site on a phone and a desktop.
• Check forms, images and links.
• Run a speed test and look at Core Web Vitals.
• Make sure your sitemap and robots file are reachable if you want search engines to find the site.

Netlify instead?

The flow is very similar: import the repository, confirm the build command and publish directory, then add the domain. Our deployment guide covers both hosts for BuildKitly Next.js themes.