production and dev for a next app

docker-compose.yml

---
version: "3"
services:
  dev-app: # a nextjs app
    build: 
      context: ./
      target: BUILD_IMAGE
    container_name: next-dev
    volumes:
      - ./:/app
      - /app/node_modules
    ports:
      - "3001:3000"
    environment:
      NODE_ENV: development
    restart: unless-stopped
    #stdin_open: true # docker run -i
    #tty: true        # docker run -t
    profiles: ["dev"]
    command: npm run dev

  prod-app: # simple chat with chatgpt
    build: 
      context: .
      target: PRODUCTION_STAGE
    container_name: next
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: production
    restart: unless-stopped
    #stdin_open: true # docker run -i
    #tty: true        # docker run -t
    profiles: ["prod"]
    #command: sh

Dockerfile

# Build Stage
FROM node:16-alpine AS BUILD_IMAGE

WORKDIR /app

COPY package*.json ./
COPY . .
RUN npm run build


# Production Stage
FROM node:16-alpine AS PRODUCTION_STAGE

WORKDIR /app

COPY --from=BUILD_IMAGE /app/package*.json ./
COPY --from=BUILD_IMAGE /app/.next ./.next
COPY --from=BUILD_IMAGE /app/public ./public
COPY --from=BUILD_IMAGE /app/node_modules ./node_modules

ENV NODE_ENV=production

EXPOSE 3000

CMD ["npm", "start"]

Dockerfile-pnpm

# this dockerfile uses pnpm instead of npm to run a nextjs project
FROM node:18-alpine as pnpm_base
WORKDIR /app
RUN npm i --global --no-update-notifier --no-fund pnpm@7
RUN apk add --no-cache g++ make py3-pip libc6-compat

# STAGE 2: fetch deps into the pnpm store
# We run pnpm fetch in a separate step to avoid re-fetching deps on every code change
# fetch is a pnpm command that downloads all dependencies to the local store
FROM pnpm_base as fetched_deps
WORKDIR /app
ENV NODE_ENV production
COPY pnpm-lock.yaml ./
RUN pnpm config set store-dir /workdir/.pnpm-store
RUN pnpm fetch

# STAGE 3: Copy the application code and install all deps from cache into the application
FROM fetched_deps as with_all_deps
COPY . ./
RUN pnpm install --offline

# STAGE 4: Build the NextJS app
FROM with_all_deps as BUILD_IMAGE
RUN pnpm build
#RUN pnpm deploy pruned --prod

# STAGE 5: Create a clean production image - only take pruned assets
FROM node:18-alpine AS PRODUCTION_STAGE
WORKDIR /app

ENV NODE_ENV=production
RUN addgroup --system --gid 1001 app
RUN adduser --system --uid 1001 app
USER app

COPY --chown=app:app --from=BUILD_IMAGE /app/package*.json ./
COPY --chown=app:app --from=BUILD_IMAGE /app/.next ./.next
COPY --chown=app:app --from=BUILD_IMAGE /app/public ./public
COPY --chown=app:app --from=BUILD_IMAGE /app/node_modules ./node_modules

ENV PORT 3000
EXPOSE 3000

CMD ["next", "start"]