Tips Mempercepat Build Time di Next.js

Kalau kamu pernah membuat proyek menggunakan Next.js, pasti pernah merasakan waktu build yang terasa lama, terutama saat proyek sudah mulai besar dan kompleks. Hal ini cukup mengganggu, apalagi ketika kamu sedang melakukan deployment atau testing berulang kali.

Yuk, kita bahas langkah-langkahnya satu per satu dengan cara yang mudah dipahami!

1. Pahami Dulu: Apa Itu Build Time di Next.js?

Sebelum masuk ke tips, penting untuk tahu dulu apa yang dimaksud dengan build time.
Secara sederhana, build time adalah waktu yang dibutuhkan Next.js untuk memproses semua file, komponen, halaman, dan dependensi agar siap digunakan untuk produksi (production-ready).

Proses ini mencakup:

• Transpilasi kode JavaScript/TypeScript
• Optimasi gambar dan CSS
• Pembuatan halaman statis (Static Generation)
• Pre-rendering dan kompilasi SSR (Server-Side Rendering)

Semakin banyak halaman dan dependensi yang kamu miliki, semakin lama waktu build-nya. Karena itu, optimasi di tahap ini sangat penting.

2. Gunakan Mode Incremental Static Regeneration (ISR)

Salah satu fitur andalan Next.js adalah Incremental Static Regeneration (ISR).
Dengan ISR, kamu bisa mengupdate halaman statis secara otomatis di background, tanpa harus membangun ulang seluruh situs setiap kali ada perubahan.

Contoh implementasi:

export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // halaman akan diperbarui setiap 60 detik
  };
}

Keuntungan ISR:

• Tidak perlu rebuild seluruh situs.
• Waktu build jauh lebih cepat.
• Perubahan data tetap otomatis diperbarui.

3. Kurangi Jumlah Halaman Statis Jika Tidak Diperlukan

Jika kamu memiliki ribuan halaman statis yang digenerate saat build (misalnya pada getStaticPaths), build time pasti akan meningkat drastis.

Solusi:
Gunakan paginasi atau lazy generation (buat halaman saat pertama kali diakses).
Contoh:

export async function getStaticPaths() {
  return {
    paths: [], // tidak pre-render semua
    fallback: 'blocking', // buat halaman saat pertama kali diakses
  };
}

Dengan cara ini, halaman hanya dibuat saat dibutuhkan, bukan semuanya sekaligus.

4. Gunakan Dynamic Imports (Import Dinamis)

Jika kamu mengimpor banyak komponen atau library besar di satu halaman, proses build akan lebih berat.
Solusinya: gunakan dynamic import untuk memuat komponen hanya saat dibutuhkan.

Contoh:

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), { ssr: false });

Manfaatnya:

• Build lebih ringan.
• Render halaman lebih cepat.
• Bundle size lebih kecil.

5. Hapus atau Hindari Dependensi yang Tidak Diperlukan

Setiap library atau package tambahan akan menambah waktu build.
Lakukan audit dependensi secara rutin:

• Gunakan perintah npm ls atau yarn list untuk melihat dependensi aktif.
• Hapus yang tidak digunakan dengan npm uninstall atau yarn remove.

Kamu juga bisa gunakan alat seperti Bundle Analyzer:

npm install @next/bundle-analyzer

Lalu aktifkan di next.config.js:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});

Ini membantu melihat library mana yang paling berat dan butuh optimasi.

6. Gunakan Cache Build (Next.js + Vercel / CI/CD)

Jika kamu deploy di Vercel, sebenarnya build sudah otomatis di-cache.
Tapi kalau kamu pakai CI/CD seperti GitHub Actions atau Netlify, kamu bisa aktifkan build caching agar dependensi tidak diinstal ulang setiap kali build.

Contoh di GitHub Actions:

- name: Cache node modules
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

Hasilnya: build berikutnya akan jauh lebih cepat karena dependensi sudah tersimpan di cache.

7. Gunakan Gambar dan Font yang Dioptimalkan

Gambar besar atau font eksternal bisa memperlambat build.
Gunakan fitur bawaan Next.js:

import Image from 'next/image';

Next.js akan otomatis mengompres dan mengoptimalkan gambar selama build.
Selain itu, pertimbangkan untuk menggunakan font lokal daripada font online agar build tidak perlu melakukan fetch eksternal.

8. Jalankan Build di Mode Production

Pastikan kamu selalu melakukan build dengan perintah:

npm run build

atau

next build

Bukan next dev, karena mode development lebih lambat dan tidak mewakili performa sebenarnya di server produksi.

9. Monitor Waktu Build dengan Logging

Kamu bisa menambahkan log sederhana di CI/CD untuk melacak durasi build:

time npm run build

Dengan cara ini, kamu bisa tahu perubahan konfigurasi mana yang benar-benar mempercepat build.

Kesimpulan

Mempercepat build time di Next.js tidak selalu rumit.
Kuncinya adalah mengelola apa yang dibangun, kapan dibangun, dan bagaimana cara Next.js mengoptimasi halaman.

Dengan menerapkan tips-tips di atas seperti ISR, dynamic imports, dan caching, kamu bisa memangkas waktu build secara signifikan tanpa menurunkan kualitas aplikasi.