Belajar Next.js - Tooling Modern & Build Automation

#Pendahuluan

Developer yang efisien membiarkan mesin mengerjakan tugas berulang. Build, linting, type checking, dan deployment seharusnya berjalan otomatis — konsisten setiap kali, tanpa bergantung pada ingatan manusia.

Episode 19 membahas build tooling dengan Turbopack, konfigurasi TypeScript yang ketat, pipeline CI/CD untuk project Next.js dengan GitHub Actions, serta linting, formatting, dan pre-commit hooks.

#Build Tooling dengan Turbopack dan Default Next.js

#Turbopack sebagai Bundler

Next.js 15 memakai Turbopack sebagai default untuk development server, dengan dukungan untuk production build pada versi stabil terbaru. Turbopack ditulis dalam Rust dan menawarkan pembaruan inkremental yang jauh lebih cepat dibanding pendekatan lama. Verifikasi bundler aktif:

npx next build --turbopack

Perintah npx next build --turbopack menjalankan production build memakai Turbopack. Kecepatan kompilasi inkrementalnya terasa jelas di project besar — perubahan kecil hanya dikompilasi ulang seperlunya.

#Alternatif Bundler

Sebagai perbandingan, Vite adalah bundler populer untuk frontend non-Next.js yang juga dibangun di atas esbuild dan Rollup. Untuk React dengan framework sendiri, Vite adalah pilihan kuat. Di ekosistem Next.js, Turbopack adalah arah resmi ke depan — pelajari konsep bundler umumnya, karena skill ini transferable.

#TypeScript Setup dan Strict Typing

#Mode Ketat

TypeScript dengan mode ketat menangkap bug yang tidak mungkin ditemukan lint. Scaffold create-next-app sudah mengaktifkan strict: true di tsconfig.json — yang meliputi noUncheckedIndexedAccess, noImplicitAny, dan strictNullChecks. Praktik yang dianjurkan:

• Tipe semua props komponen dengan type atau interface.
• Hindari any; gunakan unknown lalu narrow dengan validasi.
• Manfaatkan z.infer dari Zod untuk tipe form dan API.
• Gunakan satisfies untuk memastikan objek memenuhi kontrak.

#Mengetik Model Data

Model data yang ditulis dengan benar membuat seluruh aplikasi lebih aman:

type Article = {
  slug: string
  title: string
  published: boolean
}

Tipe Article di atas menjamin bahwa setiap fungsi yang memakainya harus menyediakan ketiga field tersebut. TypeScript adalah dokumentasi yang dieksekusi — selamanya terupdate mengikuti kode.

#CI/CD Pipeline untuk Next.js

#Pipeline dengan GitHub Actions

CI/CD menjalankan pemeriksaan dan deployment secara otomatis saat kode berubah. Pipeline dasar untuk setiap push:

name: CI
 
on:
  push:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npx tsc --noEmit
      - run: npm run build

Pipeline di atas dijalankan untuk setiap push ke main: install dependency, lint, type check, lalu build. Jika salah satu langkah gagal, PR diblokir — mencegah kode rusak masuk ke branch utama.

#Secret di CI

Jangan pernah menaruh kredensial langsung di workflow. Simpan nilai di GitHub Secrets dan baca dengan sintaks dari vars dan secrets. Build production yang membutuhkan variabel seperti DATABASE_URL membaca dari secrets, bukan dari file yang dicommit.

#Linting, Formatting, dan Pre-commit Hooks

#Prettier dan ESLint yang Konsisten

Prettier menghilangkan perdebatan format dengan satu konfigurasi, sedangkan ESLint menegakkan aturan kualitas. Kombinasikan keduanya agar format otomatis dan error tertangkap:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

Konfigurasi di atas membuat kode tanpa titik koma, memakai single quote, dan trailing comma. Jalankan npx prettier --write . sebelum commit untuk memformat seluruh codebase.

#Husky, lint-staged, dan Commitlint

Dari episode 3, kalian sudah mengenal husky dan lint-staged. Tambahkan commitlint untuk menegakkan conventional commits:

npx lint-staged

Menjalankan npx lint-staged memformat dan me-lint hanya file yang di-staging. Dengan commitlint, commit seperti feat: tambah halaman blog lolos, sedangkan pesan tidak jelas ditolak. Alur ini membuat riwayat Git tetap rapi dan machine-readable — persiapan sempurna untuk deployment di episode 20.

#Penutup

Inti yang harus dibawa pulang:

• Turbopack mempercepat development dan build secara signifikan.
• TypeScript strict menangkap bug di waktu kompilasi.
• Model data yang ditulis dengan benar menjamin keamanan seluruh aplikasi.
• CI/CD dengan GitHub Actions mengotomatisasi lint, type check, dan build.
• Secrets di CI dibaca dari GitHub Secrets, bukan dicommit.
• Prettier, husky, dan commitlint menjaga kualitas di setiap commit.

Di episode 20 selanjutnya kita akan membahas deployment dan hosting — deployment di Vercel, Netlify, AWS, dan Cloudflare, perbandingan serverless dan edge deployment, preview environments dan custom domains, serta build output dan production readiness. Aplikasi kalian akan online.