Belajar Next.js - Configuration & Environment

#Pendahuluan

Sebuah aplikasi Next.js tidak hanya terdiri dari kode; ada juga konfigurasi yang menentukan cara framework berperilaku, serta variabel lingkungan yang memisahkan konfigurasi antar environment. Episode 8 membedah keduanya.

Kita akan membahas next.config.mjs sebagai pusat konfigurasi, pengelolaan environment variables dan secrets dengan file .env, optimasi gambar dan penanganan aset, serta best practices performa dan optimasi build.

#Konfigurasi next.config.mjs

#File Konfigurasi Utama

next.config.mjs adalah titik masuk konfigurasi Next.js. Scaffold create-next-app membuat file ini dengan konfigurasi minimal:

next.config.mjs minimal

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com",
      },
    ],
  },
}
 
export default nextConfig

images.remotePatterns memberi izin Next.js mengoptimasi gambar dari domain eksternal tertentu. Jika kalian memakai gambar dari domain luar dan tidak mendaftarkannya, komponen Image akan menampilkan error konfigurasi.

#Opsi Konfigurasi yang Sering Dipakai

Beberapa opsi penting lainnya:

• output: "standalone": menghasilkan build yang bisa dijalankan sendiri, dipakai di Docker (episode 20).
• reactStrictMode: true: mendeteksi bug React di development (sudah default).
• redirects dan rewrites: memetakan URL tanpa mengubah struktur file.
• experimental: opsi fitur eksperimental — gunakan dengan bijak.

#Environment Variables dan Secrets Management

#File .env dan Prefix

Next.js memuat variabel lingkungan dari file .env.local, .env.development, dan .env.production. Variabel yang diawali NEXT_PUBLIC_ ikut dikirim ke browser; variabel lain hanya tersedia di server. Perbedaan ini krusial untuk secrets:

DATABASE_URL=postgres://user:pass@host/db
NEXT_PUBLIC_API_URL=https://api.example.com

DATABASE_URL di atas adalah secret yang hanya dibaca server, sedangkan NEXT_PUBLIC_API_URL terbaca di kode klien. Ingat aturannya: jangan pernah menaruh secret dengan prefix NEXT_PUBLIC_.

#Mengakses Variabel Lingkungan

Di kode server, baca variabel dengan process.env:

export default function Home() {
  return (
    <main>
      <h1>API: {process.env.NEXT_PUBLIC_API_URL}</h1>
    </main>
  )
}

process.env.NEXT_PUBLIC_API_URL akan digantikan nilainya saat build. Untuk production, nilai secrets disuntikkan lewat platform deployment — bukan dicommit ke repositori. .env.example adalah template yang aman dicommit sebagai dokumentasi variabel yang dibutuhkan.

Catatan penting: nilai NEXT_PUBLIC_ dibekukan saat build. Perubahan pada variabel ini membutuhkan build ulang — menyuntikkan nilai baru tanpa rebuild tidak akan berpengaruh pada production.

#Image Optimization dan Asset Handling

#Optimasi Gambar Otomatis

Next.js mengoptimasi gambar otomatis lewat komponen next/image. Konfigurasi di next.config.mjs mengontrol daftar domain yang diizinkan, format output seperti WebP dan AVIF, serta quality default. Aset statis lain diletakkan di folder public dan diakses lewat path root, misalnya file public/logo.png tersedia di /logo.png. Detail lengkap optimasi media ada di episode 9.

#Performance Best Practices dan Build Optimizations

#Memahami Output Build

Jalankan build dan pelajari outputnya:

npm run build

Perintah npm run build mencetak tabel route: mana yang statis, dinamis, dan memakai ISR. Perhatikan kolom Size — payload JavaScript per route. Semakin kecil, semakin cepat halaman. Mulai episode 15 kita akan membedah bundle secara mendalam, tapi membiasakan membaca output build sejak sekarang akan membangun intuisi performa.

#Praktik Konfigurasi yang Sehat

Beberapa praktik yang menjaga project tetap sehat: pisahkan konfigurasi per environment dengan file .env, jangan commit secrets, daftarkan domain gambar eksternal secara eksplisit, dan verifikasi setiap opsi konfigurasi baru melalui dokumentasi resmi sebelum dipakai di production.

#Penutup

Inti yang harus dibawa pulang:

• next.config.mjs adalah pusat konfigurasi Next.js.
• NEXT_PUBLIC_ prefix membuat variabel terbaca di browser; tanpa prefix hanya di server.
• Secrets wajib disuntikkan dari platform deployment, bukan dicommit.
• remotePatterns mendaftarkan domain gambar eksternal yang dioptimasi.
• Output build menampilkan statis, dinamis, dan ISR per route.
• Baca output build untuk membangun intuisi performa sejak awal.

Di episode 9 selanjutnya kita akan membahas images dan media optimization — komponen next/image dan optimasi gambar, aset statis di folder public, penanganan video dan audio dengan lazy loading, serta best practices gambar responsif dan performa web. Media aplikasi kalian akan dioptimasi dengan benar.