Next.js is designed for seamless deployment. Vercel (the creators of Next.js) provides the simplest path, but self-hosting is fully supported.

Deploy to Vercel

Option 1: Vercel CLI 

  npm install -g vercel
vercel login
vercel

Follow the prompts. Vercel detects Next.js automatically and configures build settings.

  1. Push your project to GitHub, GitLab, or Bitbucket
  2. Go to vercel.com and import your repository
  3. Vercel auto-detects Next.js and sets build command (next build) and output (.next)
  4. Click Deploy

Every push to your main branch triggers a production deployment. Pull requests get preview URLs automatically.

Environment Variables

Add secrets in the Vercel dashboard under Settings → Environment Variables:

  DATABASE_URL=postgresql://...
AUTH_SECRET=your-secret
GITHUB_ID=your-client-id
NEXT_PUBLIC_API_URL=https://api.example.com
Scope When applied
Production Main branch deployments
Preview Pull request deployments
Development vercel dev locally

Never commit .env.local to Git. Add via dashboard or CLI: vercel env add DATABASE_URL

Build Checklist

Before deploying, verify locally:

  npm run build     # Must succeed without errors
npm run start     # Test production build locally

Common issues:

Problem Fix
Build fails on fetch Add { cache: 'no-store' } or dynamic = 'force-dynamic'
Missing env vars Add them in Vercel dashboard
Image domains blocked Configure images.remotePatterns in next.config.ts

Custom Domain and Previews

  1. Go to Project Settings → Domains and add your domain
  2. Update DNS records as instructed (usually CNAME to cname.vercel-dns.com)
  3. Vercel provisions SSL automatically

Every pull request gets a unique preview URL to share with teammates for review.

Self-Hosting

Run Next.js on your own infrastructure:

  npm run build
npm run start     # Starts on port 3000

Enable standalone output in next.config.ts:

  const nextConfig = { output: 'standalone' };
export default nextConfig;

Docker example:

  FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci && COPY . . && npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

Next.js also runs on Railway, Render, AWS Amplify, and Cloudflare Pages.

Your Next.js app is ready for production. Explore the React track to deepen your frontend skills.