How to deploy Next.js app on Vercel

intermediate 12 min read Updated 2026-03-13

Quick Answer

Push your Next.js app to a Git repository, import it into Vercel dashboard via 'New Project', configure build settings and environment variables, then click 'Deploy' for automatic production build on global CDN. Test locally first with <code>npm run build</code> and <code>npm run lint</code> to avoid common failures.

Prerequisites

A functional Next.js app that builds successfully locally
Vercel account (sign up at vercel.com)
Git installed and repository ready (GitHub, GitLab, or Bitbucket)
Node.js with npm/yarn/pnpm package manager

Step-by-Step Instructions

Prepare Your Next.js App Locally

Navigate to your Next.js project directory in terminal. Run npm run build to generate production build and verify no errors occur. Also execute npm run lint to catch ESLint issues early, as Vercel enforces all rules during deployment. Ensure your app works in production mode with npm start.

If using pnpm or yarn, confirm your <code>package.json</code> scripts match your package manager to prevent build mismatches.

Initialize Git Repository

git init
git add .
git commit -m "Initial commit"

Run these commands in your project root to stage and commit all files. Create a repository on GitHub, GitLab, or Bitbucket, then push your code: git remote add origin YOUR_REPO_URL followed by git push -u origin main. This prepares your app for Vercel's Git-based deployments.

Avoid committing <code>node_modules</code> or <code>.env.local</code>; use <code>.gitignore</code> properly.

Import Repository in Vercel Dashboard

Log in to vercel.com, click New Project in dashboard. Select Import Project, choose your Git provider, and pick the repository containing your Next.js app. Vercel auto-detects Next.js framework preset. Authorize access if prompted.

Review Deployment Settings

In the import dialog, confirm Framework preset is Next.js, Build command is npm run build, and Output directory is .next. Set project name (auto-filled from repo) and select deploy branch (usually main). Adjust if using custom setups like pnpm.

For custom configs, add <code>vercel.json</code> in project root with <code>framework</code>: <code>"nextjs"</code> and <code>buildCommand</code>: <code>"npm run build"</code>.

Configure Environment Variables

Scroll to Environment Variables section in deployment settings. Add keys like DATABASE_URL (server-only) or NEXT_PUBLIC_API_URL (client-safe). Use Vercel dashboard for production secrets; reference them as process.env.VARIABLE in code. System vars like VERCEL_URL are auto-provided.

Never commit secrets to Git; paste from <code>.env.local</code> into Vercel.

Deploy the App

Click Deploy after settings review. Monitor real-time build logs in dashboard for errors. Wait for success message; Vercel handles optimization, SSR, and ISR automatically for Next.js.

Preview branches deploy to <code>*.vercel.app</code> URLs for testing.

Access Your Live App

On successful deploy, copy the provided URL like yourproject.vercel.app. Open in browser to verify functionality, including API routes and static pages. App runs on Vercel's global edge network with automatic HTTPS.

Set Up Custom Domain (Optional)

In project dashboard, go to Domains tab, click Add Domain. Enter your domain, follow DNS instructions (CNAME/A records) from registrar. Verify ownership; Vercel provisions SSL automatically.

Use wildcard domains like <code>*.example.com</code> for subdomains.

Post-Deployment Verification

Test all routes, forms, and API endpoints on live URL. Check environment variables via logs or debug pages. Review Functions tab for serverless performance. Re-deploy on Git pushes for CI/CD.

Enable auto-deploys in Git Integration settings for continuous updates.

Common Issues & Troubleshooting

ESLint errors fail deployment despite local success

Run <code>npm run lint</code> locally, fix all violations including warnings. Remove duplicate ESLint configs like <code>.eslintrc.json</code> and <code>.eslintrc.config.mjs</code>. Import missing PropTypes in components.

Build fails due to package manager mismatch (e.g., pnpm)

Set correct <strong>Install command</strong> in Vercel settings (e.g., <code>pnpm install</code>). Match <code>package.json</code> lockfile and run local build with same manager first.

Environment variables not working in production

Add vars in Vercel dashboard under project Settings > Environment Variables. Use <code>NEXT_PUBLIC_</code> prefix for client-side access. Restart deployment after changes.

Serverless functions can't access custom files

Add <code>vercel.json</code> with <code>functions</code> property: <pre><code>{"functions": {"api/*.js": {"includeFiles": "someDir/*.txt"}}}</code></pre>Use glob patterns for paths.

Deployment stuck or timeout during build

Check build logs for memory issues; increase Node version in settings. Build locally first. Exclude large <code>node_modules</code> via <code>.vercelignore</code>.

Visit Vercel View Vercel Pricing