nextjs app router training

Next.js App Enrutador de capacitación

Este sitio presenta varios patrones básicos para el enrutador de aplicaciones Next.js para comprender cómo trabajarlo.

Este proyecto apunta a

• Diseño para principiantes para entender
• Los visitantes pueden ver el código y comprender cómo funciona
• Eliminar el código innecesario tanto como sea posible para concentrarse en el código Next.js
• cubriendo muchos patrones para el enrutador de aplicaciones

Ejemplos

Ejemplo	Amable	Estado
Diseños de anidación	disposición	✅
Plantilla	disposición	✅
Sobrescribir metadatos	metadatos	✅
Generación de la imagen de OpenGraph	metadatos	✅
Componentes del servidor	representación	✅
Patrones de composición del servidor y cliente	representación	✅
Carga útil de RSC	representación	✅
Componentes del cliente y del servidor	básico	✅
Agrupamiento	grupos de ruta	✅
Cargando inmediatamente	cargando	✅
Carga con transmisión	cargando	✅
Carga con datos de precarga	cargando	✅
Error inmediatamente	error	✅
Extraviado	error	✅
Un solo segmento	rutas dinámicas	✅
Segmentos de atrapar	rutas dinámicas	✅
Segmentos opcionales de atrapar	rutas dinámicas	✅
Rutas paralelas	rutas paralelas	✅
Rutas condicionales	rutas paralelas	✅
Rutas de interceptación	rutas de interceptación	✅
Modal con rutas paralelas	rutas de interceptación	✅
Datos de almacenamiento en caché	atractivo	✅
Solicitar memoización (@Server)	almacenamiento en caché	✅
Cache de datos (@Server)	almacenamiento en caché	✅
Cache de ruta completa (@Server)	almacenamiento en caché	✅
Caché del enrutador (@client)	almacenamiento en caché	✅
Manejadores de ruta	manejadores de ruta	✅
Segmentos de ruta dinámica	manejadores de ruta	✅
Acciones del servidor	Acciones del servidor	✅
Elementos no formados	Acciones del servidor	✅
Actualizaciones optimistas	Acciones del servidor	✅
Mancha	seguridad	✅
SOLO SERVER END ENV	seguridad	✅
Compras	exhibiciones	✅

Agregar una nueva muestra

¡Bienvenido a enviar un nuevo ejemplo, pero escriba el código simplificado tanto como sea posible para comprender a los principiantes!

$ 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 

Gracias a

• Next.js App Router Playground