Vercel merilis Next.js 16.3, memindahkan Turbopack dan Partial Prerendering dari tahap eksperimental ke mode siap produksi. Pembaruan ini menjanjikan proses build yang dua hingga lima kali lebih cepat untuk aplikasi ukuran menengah dan kecepatan pemuatan halaman yang memangkas 40-60% Time to Interactive—sebuah peningkatan yang akan dirasakan oleh tim mana pun yang berlomba-lomba merilis fitur.

Mengapa perubahan ini penting sekarang

Next.js telah lama mengandalkan Webpack, sebuah bundler JavaScript yang ditulis dalam JavaScript, baik untuk build pengembangan maupun produksi. Selama setahun terakhir, tim Vercel telah menyempurnakan Turbopack, pengganti berbasis Rust yang mengurangi penggunaan memori dan mempercepat build. Di saat yang sama, mereka menguji Partial Prerendering (PPR) sebagai cara untuk memadukan HTML statis dengan konten dinamis secara langsung, namun pengembang sebelumnya harus memperlakukannya sebagai "eksperimen opsional". Dengan mempromosikan keduanya ke status stabil, Vercel memberikan peningkatan performa siap pakai bagi tim produksi tanpa perlu melalui proses uji coba yang biasanya memakan waktu.

Turbopack menjadi stabil

  • Kecepatan: Build produksi pada repositori ukuran menengah kini berjalan dua hingga lima kali lebih cepat.
  • Memori: Mengurangi tekanan memori pada basis kode yang besar.
  • Aktivasi: Tambahkan turbo: true ke dalam next.config.js dan Anda siap memulai.

Konsekuensinya adalah lingkungan yang lebih ketat. Turbopack memerlukan Node 18.17 atau yang lebih baru, dan plugin Webpack kustom apa pun yang diandalkan proyek tidak akan berjalan di bawah Turbopack. Tim dengan alur kerja plugin yang ekstensif harus mengaudit atau menulis ulang ekstensi tersebut sebelum mengaktifkannya.

Server Actions menjadi lebih lancar

Server Actions—fungsi yang berjalan di server tetapi dipanggil dari klien—kini menikmati integrasi TypeScript yang lebih erat. Kompiler menyimpulkan tipe secara otomatis, sehingga pengembang dapat menghapus anotasi tipe yang ditulis secara manual. Ia juga memahami objek bersarang dan skema Zod secara menyeluruh (end-to-end), sehingga mengurangi ketidakcocokan saat runtime. Konvensi sistem file yang baru membuat resolusi action menjadi eksplisit, membantu pengembang menghindari bug halus yang disebabkan oleh impor yang ambigu.

Partial Prerendering (PPR) siap untuk produksi

PPR memungkinkan satu halaman untuk menyajikan HTML statis untuk bagian yang tidak pernah berubah, sambil menghidrasi bagian dinamis secara terpisah. Markup statis muncul seketika; kemudian pengambilan data di latar belakang akan menghidupkan bagian-bagian interaktif. Pendekatan ini meningkatkan Time to Interactive (TTI) sebesar 40–60%.

Mengimplementasikan PPR sangatlah mudah: tandai bagian statis dengan API generasi statis yang sudah ada, dan biarkan bagian dinamis beralih ke client-side rendering. Karena HTML statis dikirim sebagai dokumen lengkap, browser dapat mulai merender sebelum JavaScript apa pun berjalan, sehingga meningkatkan performa yang dirasakan pada jaringan yang lambat.

Penyesuaian penting lainnya

  • Optimasi gambar: fetchPriority kini dapat diatur pada gambar LCP (Largest Contentful Paint), memastikan browser mengambil gambar utama (hero image) terlebih dahulu.
  • Penanganan font: next/font secara otomatis melakukan subset karakter, mengurangi ukuran payload tanpa konfigurasi tambahan.
  • Middleware: Mesin pencocokan telah ditulis ulang dalam Rust, memberikan pemeriksaan rute yang lebih cepat. Middleware juga dapat mengembalikan respons HTML lengkap, membuka peluang bagi halaman yang dirender di edge.

Langkah segera untuk tim

  1. Aktifkan Turbopack saat pengembangan; ia bekerja dengan cara yang sama di produksi setelah flag turbo diatur.
  2. Perbarui Node ke versi 20 atau lebih tinggi.
  3. Tinjau Server Actions untuk memanfaatkan manfaat inferensi tipe; hapus anotasi manual yang kini sudah tidak diperlukan lagi.
  4. Uji coba Partial Prerendering pada satu rute dengan trafik tinggi untuk mengukur peningkatan TTI sebelum menerapkannya ke seluruh situs.

Peringatan dan catatan

Peningkatan performa bergantung pada pemenuhan persyaratan runtime yang baru. Proyek yang masih menggunakan versi Node lama atau sangat bergantung pada plugin Webpack kustom akan mengalami kendala.

Intinya: Next.js 16.3 memberikan bundler bertenaga Rust kelas produksi kepada pengembang dan metode teruji untuk memadukan konten statis dan dinamis. Adopsi pengaturan default yang baru sekarang, perbaiki celah kompatibilitas, dan Anda akan melihat proses build selesai lebih cepat serta halaman menjadi jauh lebih responsif bagi pengguna akhir.