Deployment

Vercel, Docker, self-hosted, environment variables, and production optimization.

Overview

Next.js offers multiple deployment options from serverless to self-hosted.

Key Concepts

• Vercel — Optimized deployment platform for Next.js
• Docker — Containerized deployment
• Self-Hosted — Deploy on your own infrastructure
• Environment Variables — .env.local for secrets
• Output Modes — Static, server, or hybrid

Code Examples

// next.config.js
module.exports = {
  output: 'standalone', // For Docker/self-hosted
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'example.com' }
    ]
  }
};

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

FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]

# Vercel deployment
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs"
}

Practice

Deploy a Next.js app to Vercel and configure custom domains and environment variables.