Mulai Next.js 16: App Router Tanpa Drama

Pindah ke App Router terasa membingungkan di hari pertama. Setelah beberapa proyek, saya sadar perubahannya bisa disederhanakan jadi lima hal.

1. Folder adalah rute

Tidak ada lagi getServerSideProps. Setiap page.tsx adalah satu rute, dan layout.tsx membungkus semua halaman di bawahnya.

2. Komponen secara bawaan berjalan di server

Ini yang paling membingungkan di awal: console.log muncul di terminal, bukan di browser.

export default async function Page() {
  const res = await fetch("https://api.example.com/items");
  const items = await res.json();

  return <ul>{items.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
}

Butuh state atau onClick? Tambahkan "use client" di atas file.

3. Server Action menggantikan sebagian API route

Form yang dulu butuh fetch + endpoint POST sekarang cukup memanggil fungsi di server.

4. useSearchParams harus dibungkus Suspense

Halaman yang membacanya wajib berada di dalam <Suspense>, kalau tidak build-nya gagal.

5. Mulailah dari yang kecil

Jangan refactor seluruh aplikasi dalam semalam. Ambil satu halaman, pindahkan, lalu rasakan bedanya.

Selamat mencoba — kalau buntu, bawa pertanyaannya ke kopdar.