Ngerti App Router Next.js 15

Next.js 15 mengubah beberapa hal fundamental di App Router. Kalau kamu baru mulai atau sedang migrasi, ini yang perlu dipahami.

Params sekarang Promise

Di Next.js 15, params di page dan layout sekarang bertipe Promise, bukan object langsung. Jadi kamu harus await dulu:

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  // ...
}

Ini terjadi karena App Router mendukung rendering streaming dan partial prerendering. Dengan Promise, Next.js bisa menunda resolusi params sampai benar-benar dibutuhkan.

Server Components secara default

Semua komponen di App Router adalah Server Components kecuali kamu beri "use client". Ini berarti:

• Tidak bisa pakai useState, useEffect, atau hooks React lain tanpa "use client".
• Bisa langsung akses filesystem, database, atau API di server.
• Data fetching pakai async/await langsung, bukan getServerSideProps.

Dynamic routes

Dynamic route pakai bracket notation: app/[lang]/blog/[slug]/page.tsx. Setiap segment bisa diakses via params:

const { lang, slug } = await params;

Untuk static generation, gunakan generateStaticParams yang return array of params. Tapi hati-hati — di beberapa kasus, generateStaticParams bisa menyebabkan memory issue kalau konten terlalu banyak. Saya sendiri sempat kena OOM waktu build, jadi saya skip generateStaticParams dan biarkan page di-render on demand.

generateStaticParams tips

Kalau kamu punya banyak konten, pertimbangkan untuk skip generateStaticParams dan biarkan page di-render on demand. Vercel akan handle caching dengan baik. Saya pakai approach ini di website yang sedang kamu baca ini.

Kesimpulan

App Router Next.js 15 memang ada learning curve, tapi setelah paham pola Server Components + Promise params, justru lebih simpel daripada Pages Router. Tidak perlu getStaticProps atau getServerSideProps — semuanya inline di komponen.