Module 8: Deployment - Next.js Guide

Production Checklist

Environment Variables: Ensure all secrets are set in your hosting provider.
Build Check: Run npm run build locally to catch type errors and linting issues.
Image Optimization: Ensure next/image domains are whitelisted in next.config.js.

Deploying to Vercel

Vercel is the creators of Next.js and offers the best integration.

Push code to GitHub/GitLab/Bitbucket.
Import project in Vercel dashboard.
Configure Environment Variables.
Deploy.

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

Self-Hosting (Docker)

You can host Next.js anywhere using Node.js or Docker.

Dockerfile

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
CMD ["node", "server.min.js"]

Note: You must enable output: 'standalone' in next.config.js for this Dockerfile to work efficiently.

Runtimes: Edge vs Node.js

Next.js supports two runtimes.

Feature	Node.js (Default)	Edge
Startup	Slower (Cold starts)	Instant
APIs	Full Node.js API	Limited (Web Standards)
Region	Single Region (usually)	Global
Use Case	Complex logic, heavy libs	Middleware, simple APIs

// Switch runtime for a specific page/route
export const runtime = 'edge' // 'nodejs' (default) | 'edge'