nextjs app router training

Treinamento do roteador de aplicativos Next.JS

Este site apresenta vários padrões básicos para o roteador App Next.JS para entender como funcioná -lo.

Este projeto pretende

• design para iniciantes entenderem
• Os visitantes podem ver o código e entender como ele funciona
• eliminando o código desnecessário o máximo possível para se concentrar no código do próximo.js
• cobrindo muitos padrões para roteador de aplicativos

Exemplos

Exemplo	Tipo	Status
Layouts de nidificação	layout	✅
Modelo	layout	✅
Substituindo metadados	Metadados	✅
Gerando a imagem do OpenGraph	Metadados	✅
Componentes do servidor	renderização	✅
Padrões de composição de servidor e cliente	renderização	✅
Carga de pagamento RSC	renderização	✅
Componentes de clientes e servidores	básico	✅
Agrupamento	grupos de rotas	✅
Carregando imediatamente	carregando	✅
Carregando com streaming	carregando	✅
Carregando com dados de pré -carregamento	carregando	✅
Erro imediatamente	erro	✅
Não encontrado	erro	✅
Um único segmento	rotas dinâmicas	✅
Segmentos de Catch-All	rotas dinâmicas	✅
Segmentos opcionais de captura	rotas dinâmicas	✅
Rotas paralelas	rotas paralelas	✅
Rotas condicionais	rotas paralelas	✅
Rotas interceptando	rotas interceptando	✅
Modal com rotas paralelas	rotas interceptando	✅
Dados de cache	buscar	✅
Solicitar memórias (@Server)	cache	✅
Cache de dados (@Server)	cache	✅
Cache de rota completa (@Server)	cache	✅
Cache do roteador (@client)	cache	✅
Manipuladores de rota	manipuladores de rota	✅
Segmentos de rotas dinâmicas	manipuladores de rota	✅
Ações do servidor	Ações do servidor	✅
Elementos não formulados	Ações do servidor	✅
Atualizações otimistas	Ações do servidor	✅
Taint	segurança	✅
Servidor só final Env	segurança	✅
Compras	mostrações	✅

Adicionando uma nova amostra

Bem -vindo ao envio de um novo exemplo, mas escreva o código simplificado o máximo possível para entender iniciantes!

$ 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 

Obrigado a

• Playground do roteador de aplicativos next.js