Panduan Lengkap Setup Next.js 14 dengan App Router di Docker untuk Pengembangan Modern

Tutorial step‑by‑step ini menunjukkan cara membangun proyek Next.js 14 terbaru, mengaktifkan App Router, mengonfigurasi environment, serta men-deploy semuanya dalam container Docker—ideal untuk tim yang mengutamakan kecepatan, konsistensi, dan skalabilitas.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

Node.js >= 20 LTS (dengan nvm atau asdf)
Docker Desktop 4.30+ (dengan dukungan BuildKit)
Git
Editor kode (VS Code direkomendasikan)

2. Membuat Proyek Next.js 14 Baru

npx create-next-app@latest my-next14-app \
  --typescript \
  --eslint \
  --app

Parameter --app mengaktifkan fitur App Router yang menjadi standar di Next.js 14. Setelah selesai, masuk ke folder proyek:

cd my-next14-app

2.1. Verifikasi Versi

npm list next

Anda harus melihat next@14.x.x. Jika tidak, perbarui:

npm install next@latest

3. Struktur Dasar dengan App Router

Next.js 14 memperkenalkan folder app/ sebagai entry point. Berikut contoh minimal:

app/
├─ layout.tsx          // Wrapper global
├─ page.tsx            // Halaman beranda
├─ dashboard/
│  └─ page.tsx        // Sub‑route /dashboard
└─ api/
   └─ hello/route.ts  // API Route

3.1. Contoh `layout.tsx`

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

3.2. Contoh `page.tsx` beranda

export default function HomePage() {
  return (
    <main>
      <h1>Selamat Datang di Next.js 14!</h1>
      <p>Aplikasi ini berjalan di dalam Docker.</p>
    </main>
  );
}

4. Menyiapkan Dockerfile

Gunakan multi‑stage build untuk menghasilkan image ringan.

# syntax=docker/dockerfile:1.4
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --ignore-scripts
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
RUN npm ci --omit=dev && npm cache clean --force
EXPOSE 3000
CMD ["npm", "run", "start"]

4.1. Penjelasan

builder: meng‑install semua dependency, men‑run npm run build untuk menghasilkan .next.
runner: hanya menyalin artefak produksi dan meng‑install dependency tanpa dev‑tools, sehingga ukuran image turun menjadi ~80 MB.

5. Docker Compose untuk Pengembangan Lokal

version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app:cached
      - /app/node_modules
    environment:
      - NODE_ENV=development
    command: npm run dev
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:3000/api/hello"]
      interval: 10s
      timeout: 5s
      retries: 3

Dengan volumes di atas, perubahan file langsung tercermin di container, memberi pengalaman hot‑reload seperti native.

6. Menjalankan dan Memverifikasi

# Build dan start container
docker compose up --build -d
# Cek log
docker compose logs -f web
# Buka browser ke http://localhost:3000

Jika semua berjalan, Anda akan melihat halaman beranda yang telah dibuat.

7. Best Practice untuk Produksi

Variables rahasia: gunakan Docker secret atau .env.production dan jangan commit ke repo.
Cache layer: pada tahap builder, letakkan COPY package*.json sebelum kode sumber untuk memanfaatkan layer caching saat hanya dependency yang berubah.
Security: jalankan container dengan user non‑root. Tambahkan ke Dockerfile:
```
RUN addgroup -S appgroup && adduser -S appuser -G appgroup
USER appuser
```
Logging: pipe output ke stdout/stderr dan gunakan eksternal log collector (Datadog, Loki).
Performance: aktifkan next/image dengan loader default, dan tambahkan header Cache-Control pada static assets via next.config.js.

8. Deploy ke Cloud Provider (Contoh: Fly.io)

Fly.io mendukung Docker langsung, cukup push image:

# Login ke Fly
fly auth login
# Buat app baru
fly launch --name my-next14-app --copy-config
# Deploy
fly deploy

Fly.io otomatis meng‑expose port 8080; ubah EXPOSE 3000 menjadi EXPOSE 8080 atau set PORT env di fly.toml.

9. Debugging Umum

Container tidak start: periksa docker compose logs untuk error “module not found”. Pastikan node_modules tidak ditimpa oleh volume yang kosong.
Hot‑reload tidak berfungsi: pastikan command: npm run dev dijalankan dan watchOptions.poll di next.config.js di‑set ke true pada WSL2.
Build terlalu lambat: aktifkan turbo (pnpm) dan gunakan --max-old-space-size=4096 pada tahap build.

10. Kesimpulan

Dengan mengikuti langkah di atas, Anda kini memiliki lingkungan pengembangan dan produksi yang konsisten, menggunakan Next.js 14 dengan App Router, serta ter‑container-kan dalam Docker. Pendekatan ini meminimalkan “works on my machine” dan mempercepat kolaborasi tim serta skalabilitas ke cloud.

Implementasi Next.js 14 dalam Docker tidak hanya memberi Anda kontrol penuh atas dependensi dan lingkungan, tetapi juga membuka jalur otomatisasi CI/CD yang lebih mudah. Ikuti best practice keamanan, caching, dan logging untuk menjamin performa produksi yang handal, dan manfaatkan platform seperti Fly.io atau Vercel untuk scaling tanpa hambatan.

Tutorial lengkap 2026 tentang cara setup Next.js 14 dengan App Router, Docker, dan best practice produksi. Panduan step‑by‑step untuk developer modern.

Programming,Software Engineering,Web Development,Next.js,Docker,App Router,CI/CD

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma