Deploy Next.js Frontend dengan Docker

Mengapa Docker?

Next.js adalah framework React yang banyak dipakai untuk membangun frontend modern.
Masalah sering muncul ketika aplikasi dijalankan di environment berbeda: dependency tidak cocok, versi Node tidak sama, atau konfigurasi server berantakan.

Docker menyelesaikan masalah ini dengan mengemas aplikasi ke dalam container yang konsisten, portabel, dan bisa dijalankan di mana saja.
Artikel ini membahas langkah sederhana membungkus project Next.js (frontend only) ke Docker.

File yang Dibutuhkan

Untuk deploy sederhana, cukup siapkan 3 file di root project:

Dockerfile
.dockerignore
docker-compose.yml

1. Dockerfile

Gunakan pendekatan multi-stage build agar image akhir tetap ringan.

1
# Stage 1: Build
2
FROM node:18-alpine AS builder
3

4
WORKDIR /app
5

6
# Copy manifest
7

8
COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
9

10
# Install deps
11

12
RUN npm install -g npm@latest && npm install || true
13

14
# Copy source & build
15

16
COPY . .
17
RUN npm run build
18

19
# Stage 2: Production
20

21
FROM node:18-alpine AS runner
22
WORKDIR /app
23

24
ENV NODE_ENV=production
25
ENV NEXT_TELEMETRY_DISABLED=1
26

27
# Copy deps & hasil build
28

29
COPY --from=builder /app/package.json ./
30
COPY --from=builder /app/.next ./.next
31
COPY --from=builder /app/public ./public
32
COPY --from=builder /app/next.config.* ./
33

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

Penjelasan singkat:

Stage pertama (builder): install dependency + build Next.js.
Stage kedua (runner): hanya ambil hasil build, lebih ramping untuk produksi.

2. .dockerignore

Agar build lebih cepat dan image lebih kecil, abaikan file yang tidak perlu:

1
node_modules
2
.docker
3
.git
4
Dockerfile
5
.dockerignore
6
*.log

3. docker-compose.yml

Dengan docker-compose, jalankan project cukup satu perintah:

1
services:
2
  frontend:
3
    build: .
4
    container_name: nextjs-frontend
5
    ports:
6
      - "3000:3000"
7
    environment:
8
      - NODE_ENV=production
9
    restart: always

Menjalankan Aplikasi

Buka terminal di root project lalu jalankan:

1
docker compose up -d --build
2

3
# cek container
4

5
docker compose ps
6

7
# lihat log
8

9
docker compose logs -f frontend

Setelah itu, buka http://localhost:3000 untuk melihat aplikasi.

Kesimpulan

Dengan konfigurasi sederhana ini, kamu sudah bisa:

Membuat Dockerfile untuk membangun dan menjalankan Next.js di container.
Menggunakan .dockerignore supaya image tetap kecil.
Menjalankan aplikasi hanya dengan docker-compose.

Hasil akhirnya: aplikasi Next.js bisa berjalan di environment apa pun dengan konsisten, ringan, dan mudah dikelola. Untuk produksi, tinggal tambahkan reverse proxy seperti Nginx, Caddy, atau Traefik untuk domain dan SSL.