Vercel telah melancarkan Next.js 16.3, membawa Turbopack dan Partial Prerendering keluar daripada fasa eksperimen ke mod sedia-produksi. Naik taraf ini menjanjikan proses binaan (builds) yang dua hingga lima kali lebih pantas untuk aplikasi bersaiz sederhana dan kelajuan pemuatan halaman yang mengurangkan 40-60% Time to Interactive—satu lonjakan yang akan disedari oleh mana-mana pasukan yang sedang berlumba untuk melancarkan ciri-ciri baharu.

Mengapa perubahan ini penting sekarang

Next.js telah lama bergantung kepada Webpack, sebuah pembundel (bundler) JavaScript yang ditulis dalam JavaScript, untuk kedua-dua binaan pembangunan dan produksi. Sepanjang tahun lalu, pasukan Vercel telah memperhalusi Turbopack, pengganti berasaskan Rust yang mengurangkan penggunaan memori dan mempercepatkan proses binaan. Pada masa yang sama, mereka menguji Partial Prerendering (PPR) sebagai cara untuk menggabungkan HTML statik dengan kandungan dinamik secara langsung (on-the-fly), tetapi pembangun perlu menganggapnya sebagai "eksperimen pilihan" (opt-in-experiment). Dengan menaik taraf kedua-duanya kepada versi stabil, Vercel memberikan pasukan produksi naik taraf prestasi yang sedia ada tanpa perlu melalui proses cuba jaya yang biasa.

Turbopack kini stabil

  • Kelajuan: Binaan produksi pada repositori bersaiz sederhana kini berjalan dua hingga lima kali lebih pantas.
  • Memori: Ia mengurangkan tekanan memori pada pangkalan kod (codebase) yang besar.
  • Pengaktifan: Tambah turbo: true ke dalam next.config.js dan anda sudah bersedia.

Imbalannya adalah persekitaran yang lebih ketat. Turbopack memerlukan Node 18.17 atau yang lebih baharu, dan sebarang plugin Webpack tersuai yang bergantung pada projek tidak akan berjalan di bawah Turbopack. Pasukan dengan saluran plugin (plugin pipelines) yang luas mesti menyemak atau menulis semula sambungan tersebut sebelum beralih ke Turbopack.

Server Actions kini lebih lancar

Server Actions—fungsi yang berjalan di pelayan tetapi dipanggil dari klien—kini menikmati integrasi TypeScript yang lebih erat. Kompilator membuat inferens jenis (type inference) secara automatik, jadi pembangun boleh membuang anotasi jenis yang ditulis secara manual. Ia juga memahami objek bersarang (nested objects) dan skema Zod secara menyeluruh, mengurangkan ketidakpadanan semasa masa larian (runtime). Konvensyen sistem fail baharu menjadikan resolusi tindakan lebih eksplisit, membantu pembangun mengelakkan pepijat halus yang disebabkan oleh import yang kabur.

Partial Prerendering (PPR) sedia untuk produksi

PPR membolehkan satu halaman menyediakan HTML statik untuk bahagian yang tidak pernah berubah sambil melakukan hidrasi (hydrating) pada bahagian dinamik secara berasingan. Penandaan (markup) statik dipaparkan serta-merta; kemudian pengambilan data latar belakang (background fetch) akan menghidupkan bahagian interaktif. Pendekatan ini meningkatkan Time to Interactive (TTI) sebanyak 40–60%.

Melaksanakan PPR adalah mudah: tandakan bahagian statik dengan API penjanaan statik sedia ada, dan biarkan bahagian dinamik beralih kepada rendering di sebelah klien (client-side rendering). Oleh kerana HTML statik dihantar sebagai dokumen penuh, pelayar boleh mula melakukan rendering sebelum sebarang JavaScript dijalankan, sekali gus meningkatkan prestasi yang dirasai pada rangkaian yang perlahan.

Penambahbaikan ketara yang lain

  • Pengoptimuman imej: fetchPriority kini boleh ditetapkan pada imej LCP (Largest Contentful Paint), memastikan pelayar mengambil imej utama (hero image) terlebih dahulu.
  • Pengendalian fon: next/font secara automatik melakukan subset pada aksara, mengurangkan saiz muatan (payload) tanpa konfigurasi tambahan.
  • Middleware: Enjin pemadanan telah ditulis semula dalam Rust, memberikan semakan laluan yang lebih pantas. Middleware juga boleh mengembalikan respons HTML penuh, membuka peluang untuk halaman yang dirender di edge (edge-rendered pages).

Langkah segera untuk pasukan

  1. Aktifkan Turbopack dalam pembangunan; ia berfungsi dengan cara yang sama dalam produksi sebaik sahaja bendera turbo ditetapkan.
  2. Naik taraf Node ke versi 20 atau lebih tinggi.
  3. Semak Server Actions untuk manfaat inferens jenis; buang sebarang anotasi manual yang kini tidak lagi diperlukan.
  4. Uji rintis Partial Prerendering pada satu laluan trafik tinggi untuk mengukur peningkatan TTI sebelum melaksanakannya ke seluruh laman web.

Amaran dan perkara yang perlu dipertimbangkan

Peningkatan prestasi bergantung kepada pematuhan keperluan masa larian (runtime) yang baharu. Projek yang terperangkap pada versi Node yang lama atau bergantung berat pada plugin Webpack tersuai akan menghadapi kesukaran.

Kesimpulannya: Next.js 16.3 memberikan pembundel gred-produksi berkuasa Rust kepada pembangun serta kaedah terbukti untuk menggabungkan kandungan statik dan dinamik. Gunakan tetapan lalai yang baharu sekarang, selesaikan jurang keserasian, dan anda akan melihat proses binaan selesai lebih cepat serta halaman menjadi jauh lebih responsif untuk pengguna akhir.