Convenções de Roteamento no App Router do Next.js §

---

O App Router do Next.js introduz diversas convenções para definir rotas e gerenciar metadados de forma eficiente.

Arquivos de roteamento §

Os arquivos de roteamento são usados para definir layouts, páginas, e interfaces de usuário específicas, além de gerenciar pontos de API.

Layout (layout.[js/jsx/tsx]) §

Define o layout da página. Este arquivo é utilizado para componentes que devem estar presentes em várias páginas, como cabeçalhos ou rodapés.

// app/layout.jsx
export default function Layout({ children }) {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
}

Page (page.[js/jsx/tsx]) §

Define uma página específica. Cada arquivo page corresponde a uma rota.

// app/home/page.jsx
export default function HomePage() {
  return <h1>Home Page</h1>;
}

Loading UI (loading.[js/jsx/tsx]) §

Define uma interface de carregamento que é exibida enquanto os dados ou componentes estão sendo carregados.

// app/loading.jsx
export default function Loading() {
  return <div>Loading...</div>;
}

Not found UI (not-found.[js/jsx/tsx]) §

Define a interface para quando uma rota não é encontrada (404).

// app/not-found.jsx
export default function NotFound() {
  return <h1>Page Not Found</h1>;
}

Error UI (error.[js/jsx/tsx]) §

Define a interface de erro específica para a rota atual.

// app/error.jsx
export default function Error() {
  return <h1>An error occurred</h1>;
}

Global error UI (global-error.[js/jsx/tsx]) §

Define a interface de erro global, exibida para erros que não são específicos de uma rota.

// app/global-error.jsx
export default function GlobalError() {
  return <h1>Global Error</h1>;
}

API end-point (route.[js/jsx/tsx]) §

Define um ponto de extremidade (endpoint) de API.

// app/api/hello/route.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

Re-rendered layout (template.[js/jsx/tsx]) §

Define um layout que pode ser re-renderizado em diferentes páginas.

// app/template.jsx
export default function Template({ children }) {
  return <div className="template">{children}</div>;
}

Parallel route fallback page (default.[js/jsx/tsx]) §

Define uma página fallback para rotas paralelas.

// app/default.jsx
export default function DefaultPage() {
  return <h1>Default Page</h1>;
}

Rotas aninhadas §

As rotas aninhadas são definidas por diretórios e subdiretórios, que representam segmentos de rota.

folder: Representa um segmento de rota.

app/about/page.jsx -> /about

folder/folder: Representa um segmento de rota aninhado.

app/about/team/page.jsx -> /about/team

Rotas Dinâmicas §

Rotas dinâmicas permitem capturar valores de segmentos da URL.

[folder]: Captura um segmento de rota dinâmica.

app/[user]/page.jsx -> /user/:user

[...folder]: Captura todos os segmentos de rota restantes (rota catch-all).

app/[...all]/page.jsx -> /**/*

[[...folder]]: Captura todos os segmentos de rota restantes, incluindo uma rota opcional.

app/[[...optional]]/page.jsx -> /optional*?

Grupos de rotas e pastas privadas §

Grupos de rotas e pastas privadas permitem organizar rotas sem afetar a estrutura de roteamento.

(folder): Agrupa rotas sem afetar o roteamento.

app/(admin)/dashboard/page.jsx -> /dashboard

_folder: Exclui a pasta e todos os segmentos filhos do roteamento.

app/_internal -> não gera rotas

Rotas paralelas e interceptadas §

Rotas paralelas e interceptadas permitem a criação de slots nomeados e a interceptação de rotas.

@folder: Define um slot nomeado.

app/@auth/page.jsx -> /auth

(.)folder: Intercepta a rota no mesmo nível.

app/(.)settings/page.jsx -> /settings

(..)folder: Intercepta a rota um nível acima.

app/(..)/page.jsx -> /

(..)(..)folder: Intercepta a rota dois níveis acima.

app/(..)(..)/page.jsx -> /

(...)folder: Intercepta a rota desde a raiz.

app/(...)/page.jsx -> /

Conclusão §

As convenções de roteamento no App Router do Next.js são projetadas para oferecer flexibilidade e organização ao definir rotas e gerenciar metadados. Com essas convenções, você pode criar facilmente estruturas de navegação complexas e personalizadas para sua aplicação.

Referências §

---

Next.js