nextjs app router training

NEXT.JS App Router Training

Diese Website führt verschiedene grundlegende Muster für den nächsten.js App -Router ein, um zu verstehen, wie es funktioniert.

Dieses Projekt zielt darauf ab

• Design für Anfänger zu verstehen
• Besucher können den Code sehen und verstehen, wie er funktioniert
• Beseitigen Sie unnötigen Code so weit wie möglich, um sich auf den nächsten.js -Code zu konzentrieren
• Abdecken vieler Muster für den App -Router

Beispiele

Beispiel	Art	Status
Nistlayouts	Layout	✅
Vorlage	Layout	✅
Überschreiben von Metadaten	Metadaten	✅
Erzeugen von OpenGraph -Bild	Metadaten	✅
Serverkomponenten	Rendering	✅
Server- und Client -Kompositionsmuster	Rendering	✅
RSC -Nutzlast	Rendering	✅
Client- und Serverkomponenten	Basic	✅
Gruppierung	Routengruppen	✅
Sofort beladen	Laden	✅
Laden mit Streaming	Laden	✅
Laden mit Vorspannungsdaten	Laden	✅
Fehler sofort	Fehler	✅
Nicht gefunden	Fehler	✅
Ein einzelnes Segment	Dynamische Routen	✅
Alle Segmente fangen	Dynamische Routen	✅
Optionale Catch-All-Segmente	Dynamische Routen	✅
Parallele Routen	Parallele Routen	✅
Bedingte Routen	Parallele Routen	✅
Wege abfangen	Wege abfangen	✅
Modal mit parallelen Routen	Wege abfangen	✅
Daten zwischengeschnitten	holen	✅
Memoisierung anfordern (@Server)	Ausschnitt	✅
Datencache (@Server)	Ausschnitt	✅
Voller Routencache (@Server)	Ausschnitt	✅
Router -Cache (@client)	Ausschnitt	✅
Routenhandler	Routenhandler	✅
Dynamische Routensegmente	Routenhandler	✅
Serveraktionen	Serveraktionen	✅
Nicht-Form-Elemente	Serveraktionen	✅
Optimistische Updates	Serveraktionen	✅
Verderben	Sicherheit	✅
Server nur End Env	Sicherheit	✅
Einkaufen	Präsentationen	✅

Hinzufügen einer neuen Probe

Willkommen bei der Einreichung eines neuen Beispiels, aber bitte schreiben Sie vereinfachten Code so weit wie möglich, um Anfänger zu verstehen!

$ 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 

Dank

• Next.js App Router Spielplatz