Todas as convenções de arquivos e pastas do App Router em uma tabela pesquisável, um testador que transforma um caminho em app/ na sua URL e código conferido para layout, loading e error.
No App Router, as pastas dentro de app/ viram segmentos da URL e arquivos especiais dão a interface de cada segmento: page o torna público, layout o envolve, loading adiciona um fallback de Suspense, error adiciona um error boundary e route serve uma API. Colchetes tornam segmentos dinâmicos, parênteses agrupam rotas sem mudar a URL e um sublinhado esconde a pasta.
Os arquivos que você mais vai escrever
As discussões em fóruns sobre o App Router quase sempre perguntam onde um arquivo deve ficar e por que ele não é reconhecido. Este guia responde isso diretamente: pesquise as convenções, digite um caminho de arquivo para ver a URL que ele gera e copie versões mínimas dos arquivos, tudo conferido com a documentação atual do nextjs.org.
Um layout continua montado quando você navega entre as páginas filhas, então estado e efeitos persistem. Um arquivo template fica logo dentro do layout e é renderizado de novo a cada navegação, o que serve para efeitos que devem rodar a cada troca de página.
Ou falta a linha 'use client', já que error boundaries precisam ser Client Components, ou o erro acontece no layout do mesmo segmento, que o error.tsx não envolve. Erros no root layout precisam de global-error.
error, um objeto Error com um digest opcional, e retry, que busca os dados de novo e renderiza o segmento outra vez. A documentação diz que retry ficou estável na versão 16.3. reset ainda existe para limpar o erro sem buscar os dados de novo, mas retry é a escolha mais comum.
Uma pasta com sublinhado é privada e ignorada pelo roteamento. Para ter um segmento de URL real que começa com sublinhado, nomeie a pasta com %5F, a forma codificada, por exemplo %5Fdrafts.
Na versão 16, a convenção de arquivo middleware foi descontinuada e renomeada para proxy, então projetos novos usam proxy.ts na raiz do projeto (ou dentro de src) exportando uma função proxy. O Next.js oferece um codemod, middleware-to-proxy, que renomeia o arquivo e a função.
Arquivos, pastas e arquivos de metadados
Obrigatório, e o único lugar onde html e body são escritos. Toda página é renderizada onde fica children.
params é uma Promise, então a página é assíncrona e usa await nele antes de usar o slug.
Aparece imediatamente na navegação enquanto a página é transmitida. Não recebe props.
Precisa ser um Client Component. retry busca os dados de novo e renderiza o segmento outra vez.
Substitui o root layout enquanto está ativo, então traz html e body próprios e não pode exportar metadata.
Arquivo
Interface compartilhada de um segmento e seus filhos; continua montada
Arquivo
Interface de uma rota; torna o segmento público
Arquivo
Fallback de Suspense do segmento
Arquivo
Interface exibida para notFound() e URLs sem correspondência
Arquivo
Error boundary; Client Component
Arquivo
Interface de erro do root layout; html e body próprios
Arquivo
Endpoint de API; somente .js ou .ts
Arquivo
Como um layout, mas renderizado de novo na navegação
Arquivo
Fallback de um slot de parallel route
Arquivo
Interface para forbidden()
Arquivo
Interface para unauthorized()
Arquivo raiz
Proxy de requisições na raiz do projeto
Arquivo raiz
Configuração de OpenTelemetry e instrumentação
Pasta
Um segmento da URL
Pasta
Segmento dinâmico
Pasta
Segmento catch-all, uma ou mais partes
Pasta
Catch-all opcional, também corresponde ao pai
Pasta
Route group, fica fora da URL
Pasta
Pasta privada, ignorada pelo roteamento
Pasta
Slot nomeado para parallel routes
Pasta
Intercepta uma rota no mesmo nível
Pasta
Intercepta uma rota um nível acima
Pasta
Intercepta uma rota dois níveis acima
Pasta
Intercepta uma rota a partir da raiz do app
Metadados
Ícones do app, como imagens ou gerados com código
Metadados
Imagens de compartilhamento, como arquivos ou geradas
Metadados
sitemap.xml e robots.txt, estáticos ou gerados
Digite um caminho de arquivo dentro de app/. O testador remove os route groups, lê os segmentos dinâmicos e mostra o padrão de URL, ou por que o arquivo não é uma rota.
Caminho do arquivo
Pesquise as convenções
Pesquisar
error, slot, group
Filtrar por tipo
Todos
{n} exibidos
Digite um caminho como app/blog/[slug]/page.tsx
Não é uma rota: uma pasta que começa com _ é privada.
Não é uma rota pública. {file} é um arquivo especial que envolve a rota desta pasta.
Não é uma rota pública. {file} é um arquivo colocado junto e nunca é servido.
arquivos route precisam ser .js ou .ts.
{d} é um route group, fica fora da URL
{d} é um slot de parallel route, não um segmento de URL
{d} também corresponde ao caminho pai
{d} é uma rota de interceptação
Endpoint de API em {url}
Página em {url}
Comece grátis · Sem cartão de crédito