Next.js adalah kerangka kerja React untuk rendering sisi server, yang penciptanya hadir sebagai rantai alat perintah tunggal dengan konfigurasi nol untuk aplikasi React.
Bingkai ini menyediakan struktur umum yang memungkinkan Anda membuat aplikasi front-end React dengan mudah dan mengelola rendering sisi server secara transparan. Next.js versi 9.3 dirilis pada hari Senin dengan fitur-fitur baru dan beberapa peningkatan, yang mana kami akan dapat menemukan kemampuan untuk menghasilkan situs statis sebagai kebaruan utama.
Apa yang baru di Next.js 9.3?
Dengan rilis Next.js 9.0, kerangka kerja memperkenalkan konsep pengoptimalan otomatis statis. ketika halaman tidak memiliki persyaratan pemblokiran pemulihan data seperti getInitialProps, akan otomatis dirender dalam HTML setelah itu dibangun.
Ada kasus lain saat Anda mungkin ingin membuat halaman dalam HTML statis pada waktu kompilasi, bahkan dengan memblokir persyaratan ekstraksi data. Ini adalah kasus, misalnya, halaman pemasaran didukung oleh sistem manajemen konten (CMS).
Next.js 9.3 memperkenalkan dua metode pemulihan data baru: getStaticProps dan getServerSideProps.
Metode baru ini mereka memiliki banyak keunggulan dibandingkan model getInitialPropskarena ada perbedaan yang jelas antara apa yang akan menjadi SSG (Static Side Generation) dan SSR (Server Side Rendering). Mereka adalah tambahan API.
Semua fitur baru kompatibel dengan versi sebelumnya dan dapat diadopsi secara bertahap. Tidak ada penyusutan dan getInitialProps terus bekerja secara normal. Parameter getStaticPaths telah ditambahkan untuk mendapatkan perutean dinamis.
- getStaticProps: memungkinkan memperoleh data selama konstruksi;
- getStaticPaths - Tentukan perutean dinamis berbasis data;
- getServerSideProps: memungkinkan Anda mendapatkan data untuk setiap permintaan.
Perubahan lain yang menonjol dari versi baru ini adalah dukungan mode pratinjau. Memperkenalkan getStaticProps di Next.js membuka kemungkinan baru, seperti menggunakan kemampuan rendering Next.js sesuai permintaan dalam kondisi tertentu.
Misalnya saat melihat pratinjau draf Dalam CMS, Anda mungkin ingin melewatkan rendering statis dan render halaman sesuai permintaan dengan konten draf alih-alih konten yang dipublikasikan. Anda ingin Next.js melewati build statis hanya dalam kasus khusus ini. Menurut tim Next.js, mode pratinjau memungkinkan Anda melakukan ini.
Mode preview memungkinkan pengguna untuk melewati halaman yang dibuat secara statis untuk mengembalikan halaman draf atas permintaan (SSR), misalnya dari CMS. Namun, ini tidak terbatas pada sistem CMS tertentu. Mode pratinjau terintegrasi langsung dengan getStaticProps dan getServerSideProps sehingga dapat digunakan dengan semua jenis solusi pemulihan data.
Next.js 9.2 menambahkan dukungan untuk built-in CSS, tetapi Next.js 9.3 menambahkan dukungan untuk Sass. Lembar gaya global dan modul CSS didukung, serta CSS yang disematkan. Next.js sekarang mendukung modul CSS dengan file Sass menggunakan konvensi penamaan file [name] .module.scss. Tidak seperti dukungan yang sebelumnya tersedia di Next.js 5+ dengan next-sass, modul Sass dan CSS global sekarang dapat hidup berdampingan.
Modul CSS memungkinkan Anda untuk mengelola Sass secara lokal dengan secara otomatis membuat nama kelas yang unik.
Dengan versi 9.0 dari Next.js, ada halaman yang tidak dirender secara otomatis dalam HTML statis: 404 halaman.
Alasan utama di balik ini adalah bahwa halaman kesalahan yang memberi makan 404 ditangani lebih dari 404. Misalnya, itu juga menangani kesalahan. Karena 404 halaman dirender untuk jalur yang tidak ada, merender halaman sesuai permintaan dapat menyebabkan biaya yang lebih tinggi dan pemuatan yang lebih tinggi server. Framework versi 9.3 meningkatkan berbagai hal dan menawarkan pengoptimalan statis otomatis untuk 404 halaman.
Sekarang ketika permintaan Anda tidak menyertakan halaman kustom error.js, file tersebut Next.js secara otomatis menghasilkan 404 halaman secara statis dan menggunakannya saat 404 harus disajikan. Ini terjadi secara otomatis dan tidak perlu ada perubahan.
Anda juga dapat menyesuaikan halaman ini. Untuk mengganti halaman 404 default, Anda dapat membuat file 404.js.
Jika Anda ingin tahu lebih banyak, Anda bisa berkonsultasi link berikut.