Dockerize Next.js 14 dengan App Router dan Otomatisasi CI/CD di GitHub Actions (2026)

Panduan lengkap step‑by‑step mengemas aplikasi Next.js 14 berbasis App Router ke dalam Docker, menyiapkan konfigurasi produksi, dan mengintegrasikan pipeline CI/CD menggunakan GitHub Actions untuk deployment otomatis ke Vercel atau cloud VPS.

1. Prasyarat

Pastikan Anda telah menginstal:

• Node.js 20.x (LTS) – node -v
• npm 10.x atau Yarn 4.x
• Docker Desktop 24.x (atau Docker Engine di Linux)
• Git & GitHub account
• Editor kode (VS Code direkomendasikan)

2. Membuat Proyek Next.js 14

npx create-next-app@latest my-next-app --ts --app

Perintah di atas membuat proyek baru dengan TypeScript dan struktur App Router (folder app/). Masuk ke direktori:

cd my-next-app

2.1. Jalankan di lokal

npm run dev

Buka http://localhost:3000 – pastikan halaman berfungsi.

3. Menyiapkan Dockerfile

Buat file Dockerfile di root proyek dengan isi berikut:

# ---------- Stage 1: Build ----------
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json .
COPY yarn.lock .
RUN npm ci --prefer-offline --no-audit
COPY . .
RUN npm run build

# ---------- Stage 2: Production ----------
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
# Hanya copy hasil build & node_modules produksi
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/.next/standalone .
EXPOSE 3000
CMD ["node", "server.js"]

Catatan: Next.js 14 menghasilkan folder .next/standalone yang dapat dijalankan tanpa source code lengkap, sehingga ukuran image berkurang.

4. Membuat .dockerignore

node_modules
.next
Dockerfile
.dockerignore
.git
.gitignore
README.md
.env.local

5. Build & Test Image Secara Lokal

# Build image dengan tag
docker build -t my-next-app:latest .

# Jalankan container
docker run -p 3000:3000 my-next-app:latest

Buka http://localhost:3000 – aplikasi harus muncul sama persis seperti di development.

6. Konfigurasi Environment untuk Produksi

Jika Anda menggunakan variabel environment, tambahkan file .env.production (tidak dimasukkan ke Docker image). Pada Docker, gunakan --env-file atau set variabel di platform hosting.

7. Membuat GitHub Actions Workflow

Di repositori GitHub, buat folder .github/workflows dan file docker-ci.yml:

name: Build & Deploy Docker

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      - name: Log in to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push image
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: ${{ secrets.DOCKERHUB_USERNAME }}/my-next-app:latest
          cache-from: type=registry,ref=${{ secrets.DOCKERHUB_USERNAME }}/my-next-app:cache
          cache-to: type=registry,ref=${{ secrets.DOCKERHUB_USERNAME }}/my-next-app:cache,mode=max

      - name: Deploy to Fly.io (optional example)
        if: github.ref == 'refs/heads/main'
        uses: superfly/flyctl-actions@master
        with:
          args: "deploy --image ${{ secrets.DOCKERHUB_USERNAME }}/my-next-app:latest"
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Penjelasan singkat tiap langkah:

• checkout: mengambil kode sumber.
• setup‑buildx: mengaktifkan builder multi‑platform (opsional).
• docker login: otentikasi ke Docker Hub menggunakan secret.
• build‑push: membangun image, men-cache layer, lalu push ke registry.
• deploy: contoh deploy ke Fly.io; ganti dengan Vercel, Render, atau VPS sesuai kebutuhan.

8. Menyiapkan Secrets di GitHub

Masuk ke Settings > Secrets and variables > Actions dan tambahkan:

• DOCKERHUB_USERNAME
• DOCKERHUB_TOKEN (personal access token dengan write:packages)
• FLY_API_TOKEN (jika menggunakan Fly.io)

9. Deploy ke VPS dengan Docker Compose (Alternatif)

Buat file docker-compose.yml di server:

version: "3.8"
services:
  web:
    image: yourdockerhubuser/my-next-app:latest
    restart: unless-stopped
    ports:
      - "80:3000"
    environment:
      - NODE_ENV=production
      - NEXT_PUBLIC_API_URL=https://api.example.com

Jalankan:

docker compose pull
docker compose up -d

10. Best Practice untuk Production

• Gunakan multi‑stage Dockerfile untuk mengurangi ukuran image (< 30 MB).
• Never commit .env ke repo; gunakan secrets.
• Enable HTTP/2 & TLS di reverse proxy (Caddy, Nginx, atau Cloudflare).
• Health checks di Docker Compose: healthcheck: test: ["CMD", "curl", "-f", "http://localhost:3000"].
• Cache static assets dengan next.config.js – output: 'standalone' dan experimental: { appDir: true } sudah default di v14.

11. Verifikasi & Monitoring

Setelah deployment, gunakan:

• docker logs -f untuk log real‑time.
• Tool monitoring seperti Prometheus + Grafana untuk metrik CPU/Memory.
• Uptime monitoring (UptimeRobot, Healthchecks.io) untuk endpoint /api/health.

12. Debugging Umum

• 404 pada static files: Pastikan folder public/ ter‑copy ke image.
• Environment variable undefined: Tambahkan ENV_VAR=value di docker-compose.yml atau gunakan .env.production dan --env-file.
• Port conflict: Jika port 3000 sudah dipakai, ubah EXPOSE di Dockerfile dan mapping di compose.

13. Kesimpulan

Dengan mengikuti langkah di atas, Anda memiliki workflow modern: pengembangan dengan Next.js 14, containerisasi ringan, dan CI/CD otomatis yang mendorong image ke Docker Hub serta men-deploy ke environment pilihan. Struktur multi‑stage, penggunaan secrets, dan health‑check menjadikan aplikasi siap produksi, aman, dan mudah di‑scale.

Tutorial ini memberi Anda fondasi kuat untuk mengubah proyek Next.js 14 menjadi layanan containerized yang dapat di‑deploy secara otomatis melalui GitHub Actions. Terapkan best practice security dan monitoring, lalu eksplorasi orchestrasi dengan Kubernetes ketika beban mulai meningkat.

---

Panduan lengkap Dockerize Next.js 14 dengan App Router, konfigurasi produksi, dan CI/CD otomatis menggunakan GitHub Actions. Langkah demi langkah, contoh kode, dan best practice untuk developer modern.

Programming,Software Engineering,Web Development,Next.js,Docker,CI/CD,GitHub Actions

#Programming #SoftwareEngineering #WebDev #Tech #Coding