Panduan Lengkap Setup Next.js 14 dengan Docker, CI/CD GitHub Actions, dan Deploy ke Vercel

Next.js 14 menjadi standar baru untuk aplikasi React modern dengan fitur Edge Runtime, Server Actions, dan streaming SSR. Artikel ini memberikan tutorial step‑by‑step mulai dari instalasi, konfigurasi Docker, otomatisasi CI/CD menggunakan GitHub Actions, hingga deployment ke Vercel.

1. Prasyarat

Pastikan kamu telah menginstall alat‑alat berikut:

Node.js v20 LTS (https://nodejs.org/)
npm atau pnpm (disarankan pnpm v9)
Docker Desktop v4.30+
Git
Akun GitHub dan Vercel

2. Membuat Project Next.js 14 Baru

# Buat folder project
mkdir next14-docker && cd $_
# Inisialisasi dengan pnpm (bisa npm jika lebih suka)
pnpm create next-app@latest . --ts
# Pilih "app router" dan "no ESLint" untuk contoh sederhana
pnpm install

Project berhasil, jalankan pnpm dev untuk memastikan aplikasi berjalan di http://localhost:3000.

3. Menyiapkan Dockerfile

Docker memungkinkan kita menyimpan lingkungan build yang konsisten. Buat file Dockerfile di root project:

# syntax=docker/dockerfile:1.4
FROM node:20-alpine AS base
WORKDIR /app
COPY package*.json pnpm-lock.yaml ./
RUN npm i -g pnpm@9
RUN pnpm install --frozen-lockfile

FROM base AS builder
COPY . .
RUN pnpm 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/next.config.mjs ./next.config.mjs
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/pnpm-lock.yaml ./
RUN npm i -g pnpm@9 && pnpm install --prod --frozen-lockfile
EXPOSE 3000
CMD ["pnpm", "run", "start"]

Penjelasan singkat tiap layer:

base: menginstall pnpm dan dependensi development.
builder: menyalin source dan menghasilkan .next yang sudah di‑build.
runner: hanya membawa artefak produksi untuk ukuran image lebih kecil.

4. Membuat .dockerignore

node_modules
.next
Dockerfile
docker-compose.yml
.git
.gitignore
.env.local

Ini mencegah file yang tidak diperlukan masuk ke image.

5. Menjalankan di Docker (Local)

# Build image
docker build -t next14-app .
# Jalankan container
docker run -p 3000:3000 next14-app

Anda sekarang dapat mengakses aplikasi melalui http://localhost:3000 yang dijalankan di dalam container.

6. Konfigurasi GitHub Actions untuk CI/CD

Buat file .github/workflows/ci-cd.yml di repository GitHub:

name: CI / CD
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
      id-token: write
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'

      - name: Install pnpm
        run: npm i -g pnpm@9

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build Next.js
        run: pnpm run build

      - name: Lint & Test (optional)
        run: |
          pnpm run lint
          pnpm test

      - name: Build Docker image
        run: |
          docker build -t ghcr.io/${{ github.repository_owner }}/next14-app:${{ github.sha }} .

      - name: Push Docker image to GitHub Packages
        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
        continue-on-error: false
      - name: Push image
        run: |
          docker push ghcr.io/${{ github.repository_owner }}/next14-app:${{ github.sha }}

      - name: Deploy to Vercel (Preview)
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: "--prod"
          working-directory: .
          github-token: ${{ secrets.GITHUB_TOKEN }}

Catatan penting:

Tambahkan VERCEL_TOKEN ke GitHub Secrets (dapat dibuat di dashboard Vercel).
Workflow membangun image Docker, meng‑push ke GitHub Container Registry, lalu memicu deploy preview ke Vercel menggunakan official action.

7. Menghubungkan Repository ke Vercel

Masuk ke Vercel Dashboard dan klik New Project.
Pilih repository GitHub yang baru saja dibuat.
Vercel otomatis mendeteksi next.config.mjs dan mengatur build command menjadi pnpm run build serta output directory .next.
Jika ingin menggunakan Docker image khusus, aktifkan Advanced Settings → Dockerfile dan beri path ke Dockerfile di root.
Simpan dan deploy.

Setelah selesai, Vercel menyediakan URL preview (https://.vercel.app) dan produksi (https://).

8. Best Practices untuk Produksi

Environment Variables: Simpan rahasia (API keys, DB connection) di Vercel Settings > Environment Variables, bukan di file .env yang masuk repository.
Static Optimization: Gunakan export const dynamic = 'force-static' pada halaman yang tidak memerlukan server‑side rendering untuk mengurangi beban Edge.
Server Actions: Manfaatkan fitur baru di Next.js 14 untuk mengurangi jumlah round‑trip API dengan menulis fungsi aksi langsung di server component.
Image Optimization: Aktifkan next/image dengan loader default Vercel, atau gunakan next/future/image untuk format AVIF/WebP otomatis.
Security Headers: Tambahkan middleware di middleware.ts untuk mengirim CSP, X‑Frame‑Options, dan Referrer‑Policy.
Performance Monitoring: Integrasikan dengan Vercel Analytics atau gunakan @vercel/analytics untuk melacak LCP, FID, dan CLS secara realtime.

9. Troubleshooting Umum

Masalah	Penyebab	Solusi
Container crash pada start	ENV NODE_ENV belum set ke production	Pastikan `ENV NODE_ENV=production` di Dockerfile runner.
Static assets 404	Folder `public` tidak disalin ke stage runner	Tambahkan `COPY --from=builder /app/public ./public` dalam Dockerfile.
Build gagal di GitHub Actions	Cache pnpm korup	Hapus cache dengan `pnpm store prune` atau gunakan `actions/cache@v4` dengan key yang berubah.

10. Deploy Selanjutnya

Setiap push ke main akan memicu workflow di atas, menghasilkan image baru, dan memperbarui preview di Vercel. Untuk produksi, gunakan branch release atau tag vX.Y.Z dan tambahkan kondisi pada workflow sehingga hanya deploy dengan --prod ketika tag terdeteksi.

Ringkasan

Dengan kombinasi Next.js 14, Docker, GitHub Actions, dan Vercel, kamu mendapatkan pipeline modern yang mudah dipelihara, scalable, dan siap untuk fitur‑fitur edge terbaru. Ikuti langkah‑langkah di atas, sesuaikan dengan kebutuhan tim, dan nikmati development experience yang cepat serta deployment yang hampir instant.

Tutorial ini menunjukkan cara membangun, containerize, dan otomatisasi deployment Next.js 14 secara end‑to‑end. Memanfaatkan Docker menjaga konsistensi lingkungan, GitHub Actions memberikan CI/CD yang dapat di‑scale, dan Vercel menambahkan edge‑optimasi serta monitoring. Dengan menerapkan best practice keamanan dan performance, aplikasi siap berproduksi dengan keandalan tinggi.

Panduan lengkap setup Next.js 14 dengan Docker, CI/CD GitHub Actions, dan deployment otomatis ke Vercel. Langkah demi langkah, contoh kode, dan best practice untuk project modern.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma