Next.js 9.3 hadir dengan sokongan untuk penjanaan laman web statik, pengoptimuman 404 dan banyak lagi

Seterusnya.js 9.3

Next.js adalah rangka kerja React untuk rendering sisi pelayan, yang dihasilkan oleh penciptanya sebagai rantai alat perintah tunggal konfigurasi sifar untuk aplikasi React.

Rangka ini menyediakan struktur umum yang membolehkan anda membuat aplikasi React front-end dengan mudah dan secara telus menguruskan rendering sisi pelayan. Next.js versi 9.3 dilancarkan pada hari Isnin dengan ciri-ciri baru dan beberapa penambahbaikan, di mana kita dapat menemui keupayaan untuk menghasilkan laman web statik sebagai kebaruan utama.

Apa yang baru di Next.js 9.3?

Dengan pembebasan Next.js 9.0, kerangka tersebut memperkenalkan konsep pengoptimuman automatik statik. Apabila a halaman tidak mempunyai syarat penyekat pemulihan data seperti getInitialProps, secara automatik akan dibuat dalam HTML setelah ia dibina.

Terdapat kes lain di mana anda mungkin mahu membuat halaman dalam HTML statik pada waktu penyusunan, walaupun dengan menyekat keperluan pengekstrakan data. Ini adalah kes, misalnya, halaman pemasaran dikuasakan oleh sistem pengurusan kandungan (CMS).

Next.js 9.3 memperkenalkan dua kaedah pemulihan data baru: getStaticProps dan getServerSideProps.

Kaedah baru ini mereka mempunyai banyak kelebihan berbanding model getInitialPropskerana terdapat perbezaan yang jelas antara apa yang akan menjadi SSG (Static Side Generation) dan SSR (Server Side Rendering). Mereka adalah penambahan API.

Semua ciri baru serasi ke belakang dan dapat diguna pakai secara berperingkat. Tidak ada susut nilai dan getInitialProps terus berfungsi seperti biasa. Parameter getStaticPaths telah ditambahkan untuk mendapatkan routing dinamik.

  • getStaticProps: membolehkan memperoleh data semasa pembinaan;
  • getStaticPaths - Tentukan perutean dinamik berasaskan data;
  • getServerSideProps: membolehkan anda mendapatkan data untuk setiap permintaan.

Perubahan lain yang menonjol dari versi baru ini adalah sokongan untuk mod pratonton. Memperkenalkan getStaticProps dalam Next.js membuka kemungkinan baru, seperti menggunakan kemampuan rendering Next.js berdasarkan permintaan dalam keadaan tertentu.

Contohnya semasa melihat draf Dalam CMS, anda ingin melangkau rendering statik dan membuat halaman berdasarkan permintaan dengan kandungan draf bukannya kandungan yang diterbitkan. Anda mahu Next.js melangkau binaan statik hanya dalam kes khusus ini. Menurut pasukan Next.js, mod pratonton membolehkan anda melakukan ini.

Mod pratonton membolehkan pengguna melangkau halaman yang dihasilkan secara statik untuk mengembalikan permintaan (SSR) halaman draf, misalnya dari CMS. Walau bagaimanapun, ia tidak terhad pada sistem CMS tertentu. Mod pratonton berintegrasi secara langsung dengan getStaticProps dan getServerSideProps sehingga dapat digunakan dengan semua jenis penyelesaian pemulihan data.

Next.js 9.2 menambah sokongan untuk CSS terbina dalam, tetapi Next.js 9.3 menambah sokongan untuk Sass. Lembaran gaya global dan modul CSS disokong, serta CSS tertanam. Next.js kini menyokong modul CSS dengan fail Sass menggunakan konvensyen penamaan fail [name] .module.scss. Tidak seperti sokongan yang ada sebelumnya di Next.js 5+ dengan next-sass, modul Sass dan CSS global kini dapat wujud bersama.

Modul CSS membolehkan anda menguruskan Sass secara tempatan dengan membuat nama kelas unik secara automatik.

Dengan versi 9.0 dari Next.js, ada halaman yang tidak diberikan secara automatik dalam HTML statik: halaman 404.

Sebab utama di sebalik ini adalah bahawa halaman ralat yang memberi makan 404 dikendalikan lebih daripada 404. Sebagai contoh, ia juga menangani kesilapan. Oleh kerana 404 halaman diberikan untuk jalan yang tidak ada, menjadikan halaman atas permintaan boleh menyebabkan kos yang lebih tinggi dan beban yang lebih tinggi pelayan. Versi kerangka 9.3 memperbaiki perkara dan menawarkan pengoptimuman statik automatik untuk 404 halaman.

Sekarang apabila permintaan anda tidak menyertakan halaman khusus error.js, failnya Next.js menghasilkan 404 halaman secara statik secara automatik dan ia menggunakannya ketika 404 hendak dilayan. Ini berlaku secara automatik dan tidak diperlukan perubahan.

Anda juga boleh menyesuaikan halaman ini. Untuk menggantikan halaman 404 lalai, fail 404.js dapat dibuat.

Sekiranya anda ingin mengetahui lebih lanjut mengenainya, anda boleh berjumpa pautan berikut. 


Menjadi yang pertama untuk komen

Tinggalkan komen anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda dengan *

*

*

  1. Bertanggungjawab atas data: Miguel Ángel Gatón
  2. Tujuan data: Mengendalikan SPAM, pengurusan komen.
  3. Perundangan: Persetujuan anda
  4. Komunikasi data: Data tidak akan disampaikan kepada pihak ketiga kecuali dengan kewajiban hukum.
  5. Penyimpanan data: Pangkalan data yang dihoskan oleh Occentus Networks (EU)
  6. Hak: Pada bila-bila masa anda boleh menghadkan, memulihkan dan menghapus maklumat anda.