Next.js 15 membawa sejumlah perubahan penting bagi developer yang menggunakan framework React untuk membangun aplikasi web modern. Salah satu perubahan yang paling banyak diperhatikan adalah cara kerja caching yang kini memiliki beberapa default berbeda dari versi sebelumnya. Perubahan ini membuat developer perlu memahami kembali bagaimana data, halaman, dan navigasi disimpan atau diambil ulang oleh Next.js.
Selain perubahan pada caching, Next.js 15 juga hadir dengan dukungan terhadap React 19 serta berbagai peningkatan pada App Router. Kombinasi tersebut membuat versi ini menjadi salah satu pembaruan penting dalam ekosistem Next.js. Bagi developer yang masih menggunakan versi sebelumnya, memahami perubahan Next.js 15 dapat membantu mempersiapkan proses migrasi sekaligus menghindari masalah performa atau perilaku aplikasi yang tidak sesuai harapan.
Apa Itu Next.js 15?
Next.js 15 adalah versi utama framework Next.js yang dikembangkan oleh Vercel untuk membangun aplikasi berbasis React. Versi ini resmi dirilis pada Oktober 2024 dengan membawa perubahan pada caching, dukungan React 19, peningkatan App Router, serta sejumlah fitur eksperimental.
Salah satu fokus utama Next.js 15 adalah memberikan kontrol caching yang lebih jelas kepada developer. Pada versi sebelumnya, beberapa mekanisme Next.js menggunakan caching secara default. Di Next.js 15, beberapa perilaku tersebut diubah sehingga data tertentu tidak lagi otomatis menggunakan cache.
Perubahan ini penting karena aplikasi modern sering membutuhkan data yang selalu diperbarui, misalnya dashboard, sistem inventori, halaman transaksi, atau aplikasi yang mengambil informasi dari API secara berkala.
Perubahan Caching di Next.js 15
Caching merupakan salah satu bagian penting dalam arsitektur Next.js karena dapat membantu mengurangi proses rendering dan permintaan data yang tidak diperlukan. Namun, caching otomatis terkadang membuat developer mendapatkan data yang tidak diperbarui sesuai ekspektasi.
Next.js 15 mengubah beberapa default caching untuk memberikan perilaku yang lebih mudah diprediksi. Developer sekarang memiliki kontrol yang lebih jelas untuk menentukan bagian aplikasi mana yang perlu menggunakan cache dan mana yang harus mengambil data terbaru.
Secara umum, perubahan caching pada Next.js 15 mencakup beberapa bagian seperti:
fetchtidak lagi menggunakan cache secara default.- GET Route Handlers tidak lagi otomatis menggunakan Full Route Cache.
- Client Router Cache mengalami perubahan perilaku.
- Developer tetap dapat mengaktifkan caching secara eksplisit ketika memang dibutuhkan.
Dengan pendekatan tersebut, developer dapat menentukan strategi caching berdasarkan kebutuhan aplikasi, bukan hanya mengandalkan perilaku default framework.
fetch Tidak Lagi Cached Secara Default
Salah satu perubahan yang paling penting pada Next.js 15 berkaitan dengan penggunaan fetch. Pada versi sebelumnya, request tertentu dapat menggunakan Data Cache secara default. Di Next.js 15, request fetch tidak lagi otomatis menggunakan cache.
Contohnya, developer dapat membuat request seperti berikut:
const response = await fetch('https://api.example.com/products');
const products = await response.json();
Pada Next.js 15, request tersebut tidak otomatis diperlakukan sebagai data yang harus di-cache. Hal ini membuat aplikasi lebih mudah mendapatkan data terbaru dari sumber API.
Jika developer memang ingin menggunakan cache, caching dapat diaktifkan secara eksplisit:
const response = await fetch('https://api.example.com/products', {
cache: 'force-cache'
});
const products = await response.json();
Dengan cara tersebut, developer memiliki kontrol lebih jelas terhadap request yang membutuhkan caching.
Perubahan ini juga dapat berpengaruh terhadap aplikasi lama yang sebelumnya mengandalkan caching default. Setelah melakukan upgrade ke Next.js 15, developer perlu memeriksa request fetch yang digunakan di dalam aplikasi untuk memastikan perilakunya masih sesuai kebutuhan.
Perubahan Caching pada GET Route Handlers
Next.js 15 juga mengubah perilaku caching untuk GET Route Handlers. Sebelumnya, GET Route Handlers dapat menggunakan caching secara default dalam kondisi tertentu.
Pada Next.js 15, GET Route Handlers tidak lagi otomatis menggunakan caching. Ini memberikan perilaku yang lebih dinamis untuk endpoint yang datanya dapat berubah.
Misalnya, sebuah aplikasi memiliki endpoint:
export async function GET() {
const data = await getProducts();
return Response.json(data);
}
Jika endpoint tersebut membutuhkan caching, developer dapat mengaturnya secara eksplisit sesuai kebutuhan aplikasi.
Pendekatan ini cukup berguna untuk aplikasi yang memiliki API dengan data yang sering berubah. Developer tidak perlu khawatir endpoint secara tidak sengaja mengembalikan data lama akibat caching yang sebelumnya aktif secara default.
Perubahan Client Router Cache
Selain Data Cache dan Route Handlers, Next.js 15 juga membawa perubahan pada Client Router Cache.
Router Cache digunakan oleh Next.js pada sisi client untuk menyimpan hasil dari navigasi tertentu sehingga perpindahan halaman dapat berlangsung lebih cepat. Pada Next.js 15, page segments tidak lagi secara otomatis digunakan kembali dalam kondisi tertentu saat navigasi biasa.
Namun, cache masih memiliki peran pada beberapa jenis navigasi, termasuk navigasi kembali atau maju menggunakan browser serta shared layouts.
Perubahan ini penting bagi developer karena perilaku navigasi aplikasi setelah upgrade dapat terasa berbeda, terutama pada aplikasi yang sebelumnya sangat bergantung pada Router Cache.
Bagaimana Cara Menggunakan Cache Secara Eksplisit?
Walaupun default caching berubah, Next.js 15 tidak menghilangkan kemampuan caching. Developer masih dapat menentukan bagian aplikasi yang ingin menggunakan cache.
Salah satu cara yang umum adalah menggunakan opsi force-cache pada fetch:
const data = await fetch('https://api.example.com/data', {
cache: 'force-cache'
});
Cara tersebut dapat digunakan ketika data tidak perlu selalu diperbarui pada setiap request.
Untuk kebutuhan tertentu, konfigurasi caching juga dapat dilakukan melalui pengaturan Route Segment. Dengan demikian, strategi caching dapat disesuaikan dengan karakteristik data dan kebutuhan aplikasi.
Misalnya, data katalog produk yang jarang berubah dapat menggunakan cache, sementara data saldo pengguna atau status transaksi sebaiknya menggunakan strategi yang memungkinkan data terbaru diperoleh ketika dibutuhkan.
Dukungan React 19 di Next.js 15
Selain perubahan caching, salah satu perhatian utama pada Next.js 15 adalah dukungan terhadap React 19.
Next.js 15 hadir bersamaan dengan perkembangan React 19 dan membawa dukungan terhadap berbagai kemampuan baru yang diperkenalkan dalam versi React tersebut. Dukungan ini semakin matang melalui pembaruan berikutnya, termasuk Next.js 15.1 yang memberikan dukungan React 19 yang stabil.
Bagi developer, integrasi React 19 menjadi langkah penting karena Next.js merupakan salah satu framework utama dalam ekosistem React.
Penggunaan React 19 juga membuka peluang untuk memanfaatkan berbagai peningkatan pada model pengembangan React, termasuk API dan kemampuan baru yang dirancang untuk membuat pengembangan aplikasi menjadi lebih sederhana.
React Compiler di Next.js 15
Next.js 15 juga memperkenalkan dukungan eksperimental untuk React Compiler. Compiler ini dirancang untuk membantu melakukan optimasi terhadap kode React secara otomatis.
Salah satu tujuan React Compiler adalah mengurangi kebutuhan developer melakukan optimasi manual pada komponen menggunakan useMemo dan useCallback dalam situasi tertentu.
Sebelumnya, developer sering menggunakan:
const filteredData = useMemo(() => {
return filterProducts(products);
}, [products]);
atau:
const handleClick = useCallback(() => {
doSomething();
}, []);
Dengan adanya React Compiler, beberapa optimasi tersebut berpotensi ditangani secara otomatis oleh compiler. Namun, fitur ini perlu dipahami dengan baik karena dukungannya pada Next.js 15 bersifat eksperimental dan tidak berarti semua penggunaan useMemo atau useCallback harus langsung dihapus.
Dampak Next.js 15 bagi Developer
Perubahan pada Next.js 15 membuat developer perlu lebih memperhatikan bagaimana data diambil dan disimpan dalam aplikasi.
Aplikasi yang sebelumnya mengandalkan caching default perlu diperiksa setelah melakukan upgrade. Request API yang membutuhkan cache dapat diberikan konfigurasi secara eksplisit, sementara data yang harus selalu terbaru dapat dibiarkan menggunakan perilaku tanpa cache.
Dukungan React 19 juga menjadi pertimbangan penting ketika melakukan migrasi. Developer perlu memastikan library, dependency, dan komponen yang digunakan dalam project kompatibel dengan versi React yang digunakan.
Dengan memahami perubahan tersebut sejak awal, proses migrasi ke Next.js 15 dapat dilakukan dengan lebih terkontrol, terutama pada aplikasi yang memiliki banyak API request, dynamic rendering, dan mekanisme navigasi berbasis App Router.
