nextjs app router training

Pelatihan Router Aplikasi Next.js

Situs ini memperkenalkan berbagai pola dasar untuk router aplikasi selanjutnya.js untuk memahami cara mengerjakannya.

Proyek ini bertujuan

• Desain untuk pemula untuk memahami
• Pengunjung dapat melihat kode dan memahami cara kerjanya
• Menghilangkan kode yang tidak perlu sebanyak mungkin untuk fokus pada kode Next.js
• mencakup banyak pola untuk router aplikasi

Contoh

Contoh	Baik	Status
Tata letak bersarang	tata letak	✅
Templat	tata letak	✅
Metadata yang menimpa	metadata	✅
Menghasilkan gambar OpenGraph	metadata	✅
Komponen server	rendering	✅
Pola komposisi server dan klien	rendering	✅
Payload RSC	rendering	✅
Komponen klien dan server	dasar	✅
Pengelompokan	kelompok rute	✅
Memuat segera	memuat	✅
Memuat dengan streaming	memuat	✅
Memuat dengan data preloading	memuat	✅
Kesalahan segera	kesalahan	✅
Tidak ditemukan	kesalahan	✅
Satu segmen	rute dinamis	✅
Segmen Catch-All	rute dinamis	✅
Segmen tangkapan-semua opsional	rute dinamis	✅
Rute paralel	rute paralel	✅
Rute bersyarat	rute paralel	✅
Mencegat rute	mencegat rute	✅
Modal dengan rute paralel	mencegat rute	✅
Data caching	pengambilan	✅
Memoisasi permintaan (@Server)	caching	✅
Cache data (@server)	caching	✅
Cache rute lengkap (@server)	caching	✅
Router Cache (@Client)	caching	✅
Penangan rute	penangan rute	✅
Segmen rute dinamis	penangan rute	✅
Tindakan server	Tindakan server	✅
Elemen non-bentuk	Tindakan server	✅
Pembaruan optimis	Tindakan server	✅
Noda	keamanan	✅
Server hanya mengakhiri env	keamanan	✅
Belanja	menampilkan	✅

Menambahkan sampel baru

Selamat datang untuk mengirimkan contoh baru tetapi silakan tulis kode yang disederhanakan sebanyak mungkin untuk memahami pemula!

$ git clone [email protected]:hiroppy/nextjs-app-router-training.git
$ cd nextjs-app-router-training
$ npm i
$ mkdir src/app/examples/new-example
# adding code to src/app/examples/new-example
$ # editing src/app/examples/data.ts to add meta data, please refer type definitions
$ npm run generate
$ # editing a table in README.md 

Berkat

• Next.js Aplikasi Router Playground