nextjs app router training

Formation de routeur de l'application suivante Next.js

Ce site introduit divers modèles de base pour le routeur de l'application Next.js pour comprendre comment le faire.

Ce projet vise à

• Conception pour les débutants à comprendre
• Les visiteurs peuvent voir le code et comprendre comment cela fonctionne
• Éliminer autant que possible le code inutile pour se concentrer sur le code Next.js
• couvrant de nombreux modèles pour le routeur d'applications

Exemples

Exemple	Gentil	Statut
Dispositions de nidification	mise en page	✅
Modèle	mise en page	✅
Substances à l'écrasement des métadonnées	métadonnées	✅
Génération d'images OpenGraph	métadonnées	✅
Composants du serveur	rendu	✅
Modèles de composition du serveur et du client	rendu	✅
Télélée utile RSC	rendu	✅
Composants du client et du serveur	basique	✅
Regroupement	groupes d'itinéraire	✅
Chargement immédiatement	chargement	✅
Chargement de streaming	chargement	✅
Chargement avec des données préchargées	chargement	✅
Erreur immédiatement	erreur	✅
Pas trouvé	erreur	✅
Un seul segment	routes dynamiques	✅
Segments de fourchette	routes dynamiques	✅
Segments de fourre-tout en option	routes dynamiques	✅
Routes parallèles	routes parallèles	✅
Itinéraires conditionnels	routes parallèles	✅
Intercepter les itinéraires	intercepter les itinéraires	✅
Modal avec des routes parallèles	intercepter les itinéraires	✅
Cache de mise en cache	récupérant	✅
Demande la mémorisation (@Server)	mise en cache	✅
Cache de données (@Server)	mise en cache	✅
Cache de route complète (@Server)	mise en cache	✅
Cache de routeur (@Client)	mise en cache	✅
Mancheurs d'itinéraire	mancheurs d'itinéraire	✅
Segments d'itinéraire dynamique	mancheurs d'itinéraire	✅
Actions de serveur	actions de serveur	✅
Éléments non formulaires	actions de serveur	✅
Mises à jour optimistes	actions de serveur	✅
Entacher	sécurité	✅
Le serveur finit uniquement Env	sécurité	✅
Achats	vitrines	✅

Ajout d'un nouvel échantillon

Bienvenue à la soumission d'un nouvel exemple, mais veuillez écrire le code simplifié autant que possible pour comprendre les débutants!

$ 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 

Grâce à

• Aire de jeux de routeur de l'application suivante.