Deployment — Next.js Complete Guide

Option 1: Vercel — easiest and recommended

ANALOGY

Real-world analogy: A managed warehouse. Deploying to Vercel is like using a fully-managed warehouse vs building your own. With a managed warehouse, you just send your inventory and they handle all the storage, security, temperature control, and shipping. With Vercel, you just push your code and they handle servers, HTTPS, CDN, and scaling.

Deploy to Vercel in under 5 minutes

bash

# Step 1: Install the Vercel CLI
npm install -g vercel

# Step 2: Login to your Vercel account
vercel login

# Step 3: Deploy from your project folder
vercel

# Done! Your site is live at https://your-project.vercel.app
# Every git push to your main branch redeploys automatically

TIP

Connect GitHub for automatic deployments. The professional workflow: connect your GitHub repo to Vercel at vercel.com. Every time you push code to the main branch, Vercel automatically deploys it. Every pull request also gets a unique preview URL. This is how real teams ship software.

Option 2: Your own server (VPS)

Deploy on DigitalOcean, AWS, Hetzner, or any VPS

bash

# On your server, after cloning your repo:
npm install
npm run build        # Compiles everything

npm run start        # Starts production server on port 3000

# Keep it running permanently with PM2 (a process manager)
npm install -g pm2
pm2 start npm --name "nelsonlabs" -- start
pm2 startup          # Auto-restart if the server reboots
pm2 save

Option 3: Docker

Dockerfile

dockerfile

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["npm", "start"]

Option 4: Static export (no server needed)

next.config.js — for apps that don't need a server

const nextConfig = {
  output: "export",  // Generates static HTML/CSS/JS files in the /out folder
};

Upload the /out folder to any static host

bash

npm run build
# Creates a /out folder with pure HTML, CSS, and JavaScript
# Upload to: Netlify, GitHub Pages, AWS S3, Cloudflare Pages, or any web host

Pre-deployment checklist

—Set all environment variables in the Vercel dashboard (Settings → Environment Variables)
—Run npm run build locally first — if it fails locally, it will fail on Vercel
—Add your custom domain (Settings → Domains in Vercel dashboard)
—HTTPS is automatic on Vercel — no configuration needed
—Add error monitoring (Sentry is free and integrates perfectly with Next.js)
—Set up a robots.txt and sitemap.xml for SEO if it's a public-facing site