Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Next.js 13 memperkenalkan sistem perutean baru menggunakan direktori aplikasi. Next.js 12 sudah menyediakan cara mudah untuk menangani rute melalui rute berbasis file. Menambahkan komponen ke folder halaman akan secara otomatis menjadikannya rute. Dalam versi baru ini, router berbasis sistem file dilengkapi dengan pengaturan bawaan untuk tata letak, templat perutean bersarang, UI pemuatan, penanganan kesalahan, dan dukungan untuk komponen server dan streaming.

Artikel ini menjelaskan fitur-fitur baru ini dan mengapa itu penting.

Memulai Dengan Next.js 13

Buat proyek Next.js 13 Anda sendiri dengan menjalankan perintah berikut di terminal.

npx membuat-Berikutnya-app@terbaru selanjutnya13 --aplikasi-eksperimental

Ini akan membuat folder baru bernama next13 dengan direktori aplikasi baru.

Memahami Direktori Aplikasi Baru

Next.js 12 menggunakan

instagram viewer
halaman direktori untuk routing, tetapi diganti dengan aplikasi/ direktori di Next.js 13. Itu halaman/ direktori masih berfungsi di Next 13 untuk memungkinkan adopsi tambahan. Anda hanya perlu memastikan bahwa Anda tidak membuat file di dua direktori untuk rute yang sama karena Anda akan mendapatkan error.

Berikut adalah struktur direktori aplikasi saat ini.

Di direktori aplikasi, Anda menggunakan folder untuk menentukan rute, dan file di dalam folder ini digunakan untuk menentukan UI. Ada juga file khusus seperti:

  • page.tsx - File yang digunakan untuk membuat UI untuk rute tertentu.
  • layout.tsx - Ini berisi definisi tata letak rute dan dapat dibagikan di beberapa halaman. Mereka sempurna untuk menu navigasi dan sidebar. Pada navigasi, tata letak mempertahankan status dan tidak merender ulang. Ini berarti bahwa saat Anda menavigasi antar halaman yang berbagi tata letak, statusnya tetap sama. Satu hal yang perlu diperhatikan adalah bahwa harus ada tata letak paling atas (tata letak root) yang berisi semua HTML dan tag tubuh yang dibagikan di seluruh aplikasi.
  • template.tsx - Templat seperti tata letak, tetapi tidak mempertahankan status dan dirender ulang setiap kali digunakan untuk membuat halaman. Template sempurna untuk situasi di mana Anda memerlukan kode tertentu untuk dijalankan setiap kali komponen dipasang, misalnya, animasi masuk dan keluar.
  • kesalahan.tsx - File ini digunakan untuk menangani error pada aplikasi. Itu membungkus rute dengan kelas batas kesalahan React sedemikian rupa sehingga ketika kesalahan terjadi di rute itu atau anak-anaknya, ia mencoba untuk memulihkannya dengan merender halaman kesalahan yang mudah digunakan.
  • memuat.tsx - UI pemuatan langsung dimuat dari server saat UI rute dimuat di latar belakang. UI pemuatan dapat berupa layar pemintal atau kerangka. Setelah konten rute dimuat, itu menggantikan UI pemuatan.
  • tidak ditemukan.tsx - File yang tidak ditemukan dirender saat Next.js menemukan a 404 kesalahan untuk halaman itu. Di Next.js 12, Anda harus membuat dan menyiapkan halaman 404 secara manual.
  • kepala.tsx - File ini menentukan tag kepala untuk segmen rute yang ditentukan.

Cara Membuat Rute di Next.js 13

Seperti disebutkan sebelumnya rute dibuat menggunakan folder di aplikasi/ direktori. Di dalam folder ini, Anda harus membuat file bernama page.tsx yang mendefinisikan UI dari rute spesifik itu.

Misalnya, untuk membuat rute dengan jalur /products, Anda harus membuat app/produk/halaman.tsx mengajukan.

Untuk rute bersarang seperti /products/sale, folder bersarang di dalam satu sama lain sehingga struktur folder terlihat seperti app/produk/penjualan/halaman.tsx.

Selain cara baru merutekan fitur menarik lainnya yang didukung direktori aplikasi adalah komponen server dan streaming.

Menggunakan Komponen Server di Direktori Aplikasi

Direktori aplikasi menggunakan komponen server secara default. Pendekatan ini mengurangi jumlah JavaScript yang dikirim ke browser saat komponen dirender di server. Ini meningkatkan kinerja.

Lihat artikel ini di metode rendering yang berbeda di Next.js untuk penjelasan lebih mendalam.

Komponen server berarti Anda dapat mengakses rahasia lingkungan dengan aman tanpa diekspos di sisi klien. Misalnya, Anda dapat menggunakan process.env.

Anda juga dapat berinteraksi dengan backend secara langsung. Tidak perlu menggunakan getServerSideProps atau getStaticProps karena Anda dapat menggunakan async/menunggu di komponen server untuk mengambil data.

Pertimbangkan fungsi async ini yang mengambil data dari API.

asinkronfungsigetData() {
mencoba{
const res = menunggu mengambil(' https://api.example.com/...');
kembali res.json();
 } menangkap(kesalahan) {
melemparkanbaruKesalahan('Tidak dapat mengambil data')
 }
}

Anda dapat memanggilnya langsung di halaman sebagai berikut:

eksporbawaanasinkronfungsiHalaman() {
const data = menunggu getData();
kembali<div>div>;
}

Komponen server sangat bagus untuk merender konten non-interaktif. Jika perlu gunakan Bereaksi kait, event listener, atau API khusus browser, gunakan komponen klien dengan menambahkan arahan "gunakan klien" di bagian atas komponen sebelum impor apa pun.

Streaming Komponen secara bertahap di Direktori Aplikasi

Streaming mengacu pada pengiriman bagian UI ke klien secara progresif hingga semua komponen dirender. Ini memungkinkan pengguna untuk melihat sebagian konten sementara sisanya sedang dirender. Untuk memberikan pengalaman yang lebih baik kepada pengguna, render komponen pemuatan seperti spinner hingga server selesai merender konten. Anda melakukan ini menggunakan dua cara:

  • Membuat sebuah loading.tsx file yang akan diberikan untuk seluruh segmen rute. 
eksporbawaanfungsiMemuat() {
kembali<P>Memuat...P>
}
  • Membungkus komponen individu dengan batas React Suspense dan menentukan UI fallback. 
impor { Ketegangan } dari"reaksi";
impor { Produk } dari"./Komponen";
eksporbawaanfungsiPenjualan() {
kembali (
<bagian>
Produk...
}>
<Produk />
Ketegangan>
bagian>
 );
}

Sebelum komponen Produk dirender, pengguna akan melihat “Produk…”. Ini lebih baik daripada layar kosong dalam hal pengalaman pengguna.

Mengupgrade ke Next.js 13

Direktori aplikasi baru jelas merupakan peningkatan dari direktori halaman sebelumnya. Ini termasuk file khusus seperti layout, head, template, error, not-found, dan loading yang menangani status berbeda saat merender rute tanpa memerlukan pengaturan manual.

Selain itu, direktori aplikasi juga mendukung streaming, dan komponen server yang menghasilkan peningkatan kinerja. Meskipun fitur ini bagus untuk pengguna dan pengembang, sebagian besar masih dalam versi beta.

Namun, Anda masih dapat memutakhirkan ke Next.js 13 karena direktori halaman masih berfungsi kemudian mulai menggunakan direktori aplikasi sesuai keinginan Anda.