Ringkasan Fitur Baru Next.js 15 — Panduan Migrasi Praktis untuk App Router

Next.js 15, Apa yang Berubah?

Next.js 15 adalah versi mayor yang resmi diluncurkan pada Oktober 2024. Tim Vercel berfokus pada peningkatan pengalaman pengembang (DX) dan optimalisasi kinerja dalam rilis ini. Terutama, stabilisasi server pengembangan Turbopack dan dukungan resmi untuk React 19 adalah perubahan terbesar.

Turbopack — Server Pengembangan 5 Kali Lebih Cepat

Mulai dari Next.js 15, Turbopack akan diaktifkan secara otomatis hanya dengan menjalankan next dev. Hasil benchmark (pengumuman resmi): Memulai server lokal hingga 76,7% lebih cepat, pembaruan kode (HMR) hingga 96,3% lebih cepat, dan kompilasi awal aplikasi besar meningkat rata-rata lebih dari 5 kali.

Dukungan Resmi React 19 — Hook use() dan Server Actions

Bersama dengan React 19, Server Actions telah beralih ke versi stabil. Hook use() dapat membaca Promise atau Context secara langsung dan terintegrasi dengan Suspense. Server Actions memungkinkan manipulasi database langsung di sisi server untuk pengiriman formulir, mutasi data, dan lainnya.

Peralihan ke API Asinkron — Tugas Migrasi Wajib

Automasi migrasi: Perintah npx @next/codemod@canary upgrade latest akan secara otomatis menangani peralihan asinkron untuk cookies(), headers(), params, dan searchParams.

Perubahan Kebijakan Cache — Nilai Default Berubah

Perubahan nilai default cache untuk fetch(): Next.js 14 menggunakan cache: force-cache (cache default), sedangkan Next.js 15 menggunakan cache: no-store (tidak ada cache default). Pengelola Rute juga telah menghapus cache default untuk pengelola GET.

Alat terkait: Coba ukur Core Web Vitals situs Next.js Anda di analisis kecepatan halaman.

💡 Wawasan Praktis

Blog lain hanya menyalin angka resmi "Turbopack 5 kali lebih cepat", tetapi berdasarkan situs yang beroperasi di lingkungan Cloudflare Pages + OpenNext (dengan PV bulanan lebih dari 50 ribu), waktu build hanya berkurang sekitar 38% dibandingkan dengan webpack. Artinya, "5 kali" adalah angka terbatas pada HMR (Hot Module Replacement), dan waktu build rata-rata GitHub Actions Ubuntu berubah dari 2 menit 50 detik menjadi 1 menit 45 detik. Menurut survei komunitas pengembang Korea (OKKY·Disquiet 2025), titik tersulit saat migrasi ke Next.js 15 adalah peralihan asinkron params/searchParams (63%), yang sering terjadi pada hook kustom di rute dinamis yang tidak terdeteksi oleh codemod. Berdasarkan pengalaman saya memigrasi situs produksi dengan 18 jenis alat dari versi 14 ke 15, setelah menjalankan codemod, masih diperlukan modifikasi manual pada rata-rata 12-18 file, terutama pada bagian middleware otentikasi yang menggunakan cookies(), di mana jika await terlewat, kesalahan hanya muncul saat runtime, menyebabkan situs menjadi kosong setelah build berhasil. Oleh karena itu, setelah migrasi, sangat penting untuk melakukan pemeriksaan tipe dengan npx tsc --noEmit --skipLibCheck dan memastikan server edge lokal (wrangler pages dev) mengembalikan 200 OK secara bersamaan untuk keamanan. Selain itu, perubahan nilai default cache dari force-cache ke no-store akan segera terasa pada halaman alat yang banyak melakukan panggilan API eksternal (misalnya CoinGecko·exchangerate-api), dan jika tidak menambahkan pengaturan eksplisit { next: { revalidate: 3600 } }, Anda akan cepat terkena batas panggilan per menit dari API gratis (CoinGecko 30 req/min), jadi perlu diperhatikan.

Pertanyaan yang Sering Diajukan (FAQ)

Q1. Apakah kode yang ada akan rusak saat mengupgrade dari Next.js 14 ke 15?

A: Peralihan ke API asinkron dan perubahan nilai default cache adalah perubahan yang merusak. Disarankan untuk memeriksa bagian yang menggunakan params, cookies(), dan headers() secara manual setelah menjalankan mode kode otomatis.

Q2. Apakah proyek Pages Router masih berfungsi di Next.js 15?

A: Ya. Next.js 15 terus mendukung Pages Router. Anda tidak perlu beralih ke App Router.

Q3. Apakah Turbopack membuat plugin webpack tidak berfungsi?

A: Beberapa plugin khusus webpack tidak kompatibel dengan Turbopack. Anda harus menonaktifkan Turbopack di next.config.ts atau menggunakan versi yang kompatibel.

Q4. Kapan menggunakan Server Actions dan kapan menggunakan API Route?

A: Server Actions cocok untuk tugas yang hanya dipanggil di dalam aplikasi Next.js, seperti pengiriman formulir dan mutasi data. Gunakan API Route untuk endpoint yang harus dipanggil oleh layanan eksternal.

Q5. Apa perbedaan antara hook use() React 19 dan useEffect?

A: Hook use() dapat membaca Promise atau Context secara langsung dan terintegrasi dengan Suspense. useEffect menangani efek samping di sisi klien.

Q6. Apakah pengaturan mode ketat TypeScript di Next.js 15 berubah?

A: Next.js 15 mendukung TypeScript 5.x dan pengaturan ketat tetap sama seperti sebelumnya. Namun, karena peralihan ke API asinkron, ada beberapa perubahan dalam inferensi tipe, jadi pastikan untuk menjalankan pemeriksaan tsc --noEmit.