Pengantar DX Next.js yang konsisten

Tim Next.js sering terhambat oleh perbedaan environment lokal, konfigurasi lint yang tidak konsisten, dan tidak adanya preview setiap perubahan. Untuk menjawab itu, solusi praktis adalah menyiapkan Dev Container sebagai basis lingkungan, menautkan lint/format otomatis ke pipeline lokal maupun CI, serta mengaktifkan preview otomatis untuk setiap branch. Dengan begitu, developer tidak perlu setup manual lagi dan kualitas kode tetap dijaga.

Strategi ini menyasar tiga titik: menyamakan environment lewat Dev Container, menyelaraskan aturan kualitas lewat lint/format otomatis, dan menyediakan preview otomatis yang menampilkan hasil perubahan sebelum digabungkan.

Menetapkan Dev Container sebagai fondasi DX

Konfigurasi dasar dan tooling

Pilih image base yang mendekati runtime proyek (misalnya node:18). Kemudian pasang alat yang biasa digunakan tim, seperti pnpm, pnpm-workspace, dan SSH key jika diperlukan. Berikut struktur minimum .devcontainer/devcontainer.json:

{
  "name": "nextjs-dx",
  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-18",
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "stonepay.neon"
      ]
    }
  },
  "postCreateCommand": "pnpm install",
  "forwardPorts": [3000]
}

Gunakan devcontainer.json bersama folder .devcontainer yang juga bisa menyimpan skrip instalasi khusus atau task VS Code. Dengan begitu, siapapun membuka repo akan langsung masuk environment yang sudah terpasang lint, format, dan dependensi Next.js.

Sinkronisasi berkas konfigurasi

Letakkan eslint.config.js dan turbo.json (jika menggunakan Turborepo) di root repo. Pastikan package.json memiliki skrip lint/format yang dipanggil di Dev Container, misalnya:

{
  "scripts": {
    "lint": "next lint",
    "format": "prettier --write ."
  }
}

Dengan lint/format script jelas, Dev Container bisa menjalankan perintah tersebut setiap kali container dibuat atau tiap git hook.

Lint dan format otomatis di pipeline lokal dan remote

Lint lokal via VS Code task dan pre-commit

Pasang pre-commit hook sederhana untuk menjalankan lint sebelum commit. Misalnya dengan Husky:

pnpm husky add .husky/pre-commit "pnpm lint"

Hook ini memastikan tidak ada commit yang lolos tanpa lint dijalankan. Karena Dev Container sudah menyertakan tooling, perintah ini konsisten lintas mesin.

Lint di CI untuk setiap push

Konfigurasikan pipeline GitHub Actions agar lint dan format dijalankan di runner:

name: CI
on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - run: pnpm install
      - run: pnpm lint

Jalankan lint di CI agar semua kontribusi melewati quality gate identik dengan lingkungan Dev Container.

Preview otomatis setiap branch

Deploy otomatis ke preview environment

Manfaatkan platform seperti Vercel atau Netlify yang menawarkan preview deployment per branch. Tambahkan job GitHub Actions yang memicu API deploy atau hanya publish metadata ke platform tersebut setelah lint berhasil.

Contoh integrasi ringan

Jika memilih Vercel, pastikan integrasi GitHub diaktifkan, lalu gunakan action untuk mencatat status preview:

jobs:
  preview:
    needs: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Create Preview Comment
        run: |
          echo "Preview build dijalankan oleh Vercel. Cek URL di Vercel dashboard."

Gabungan lint dan preview memastikan setiap PR mendapat feedback otomatis sebelum review manual.

Tips menjaga DX tetap optimal

Monitoring dan debugging: log Dev Container (.devcontainer/.devcontainer.devcontainer) membantu memperbaiki dependency mismatch. Jika lint gagal di CI namun berhasil lokal, periksa versi Node dan cache pnpm.

Trade-off: Dev Container menambah ukuran repo dan sedikit waktu start, tetapi imbalannya adalah eliminasi "it works on my machine" dan lint yang selaras. Preview otomatis menambah waktu job, namun memperkecil risiko bug langsung di produksi.

Pastikan juga mencatat langkah restore cache pnpm di GitHub Actions untuk menghindari instalasi ulang setiap lint dijalankan; cache membantu stabilitas dan waktu build.

Dengan pola ini—Dev Container konsisten, lint/format otomatis, preview branch—tim Next.js bisa langsung fokus pada fitur tanpa setup manual serta tetap menjaga kualitas lewat automation.