Cara Generate Static Params Next Js untuk Pre-Render Rute Dinamis

Ditulis oleh Next.js

Cara generate static params Next.js adalah menulis fungsi generateStaticParams di file page.tsx dalam folder rute dinamis, lalu mengembalikan array object berisi nilai params. Fungsi ini berjalan saat build agar Next.js bisa pre-render halaman seperti /blog/hello-world tanpa menunggu request masuk.

Bentuk Fungsi generateStaticParams di App Router

Fungsi ini khusus Server Component dan diekspor dari file page. Return valuenya selalu array object, bukan array string.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then((r) => r.json());

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPage({ params }) {
  const { slug } = await params;
  return <p>Slug: {slug}</p>;
}
  • Key object harus sama persis dengan nama folder, contoh slug untuk [slug].
  • Fungsi boleh async karena biasanya membaca database atau API.
  • Search params seperti ?page=2 tidak bisa di pre-render lewat fungsi ini.

Langkah Membuat Pre-render Rute Dinamis

  1. Buat folder dynamic route, misalnya app/blog/[slug].
  2. Tulis generateStaticParams dengan fetch data sumber slug yang valid.
  3. Cocokkan key return dengan nama segmen, jangan sampai tertulis id padahal foldernya [slug].
  4. Jalankan npm run build dan periksa daftar rute statis yang dihasilkan.

BACA JUGA:

Pola Params dan dynamicParams

Secara default, rute di luar daftar tetap bisa diakses secara dinamis. Ubah perilaku ini dengan dynamicParams.

Pola Rute Return generateStaticParams Perilaku dynamicParams
/blog/[slug] [{ slug: ‘a’ }] true: slug lain dirender on demand
/blog/[slug] [{ slug: ‘a’ }] false: slug lain jadi 404
/docs/[…slug] [{ slug: [‘a’,’b’] }] false: path lain jadi 404
  • Pakai export const dynamicParams = false untuk katalog tertutup seperti dokumentasi versi lama.
  • Pakai nilai default true untuk blog atau produk yang terus bertambah.
  • Untuk catch-all […slug], nilai params berupa array string.

Kesalahan Umum dan Cara Cek Hasil

  • Nama key salah membuat build gagal atau params bernilai undefined.
  • Fetch gagal saat build membuat return kosong sehingga tidak ada halaman yang di pre-render.
  • Data kosong dari API perlu ditangani dengan validasi sebelum mapping.

Cek log npm run build. Rute dengan simbol lingkaran kosong berarti statis, sedangkan simbol f berarti dinamis on demand.

FAQ

Apakah generateStaticParams jalan di Client Component?

Tidak, fungsi ini hanya berjalan di Server Component dalam file page.

Apa bedanya generateStaticParams dan dynamicParams?

Satu membuat daftar pre-render, satu mengatur akses URL di luar daftar.

Bisakah digabung dengan ISR?

Bisa, tambah export const revalidate = 60 untuk refresh data berkala.

Artikel Terkait