Skip to main content

Rotas

info
    • () (Parênteses) são usadas no App Router para grupos de rotas sem afetar a URL, por exemplo:
    • [] (Colchetes) indicam rotas dinâmicas, por exemplo:
    • pages/post/[id].tsx cria rotas dinâmicas como /post/1 e /post/2.
    • app/post/[id]/page.tsx faz o mesmo no App Router.

Rotas Paralelas​

Roteamento no Next.js​

O Next.js é um framework React que fornece todas as funcionalidades necessárias para aplicações em produção. Ele habilita o roteamento na aplicação utilizando um sistema baseado na estrutura de arquivos.

Este guia explica como funciona o roteamento no Next.js.

Como funciona o roteamento no Next.js​

O Next.js utiliza a estrutura de arquivos para definir as rotas da aplicação. Cada arquivo com extensão .js, .jsx, .ts ou .tsx dentro do diretório pages é automaticamente tratado como uma rota.

Exemplo de estrutura de pastas:

├── pages
|  ├── index.js
|  ├── contato.js
|  └── minha-pasta
|     ├── sobre.js
|     └── index.js

Aqui, temos quatro páginas:

O Next.js renderiza previamente cada página para melhorar a performance. Para navegação, utiliza-se o componente Link do pacote next/link.

import Link from "next/link";

export default function IndexPage() {
  return (
    <div>
      <Link href="/contato">
        <a>Ir para Contato</a>
      </Link>
      <Link href="/minha-pasta/sobre">
        <a>Ir para Sobre</a>
      </Link>
    </div>
  );
}

Passagem de parâmetros via rota​

O Next.js permite passar parâmetros pela rota e recuperá-los usando o hook useRouter.

  • Exemplo de envio de parâmetro:
import Link from "next/link";

export default function IndexPage() {
  return (
    <Link href={{ pathname: "/sobre", query: { id: "123" } }}>
      <a>Ir para Sobre</a>
    </Link>
  );
}
  • Recuperação do parâmetro na página de destino:
import { useRouter } from "next/router";

export default function SobrePage() {
  const router = useRouter();
  const { id } = router.query;
  return <div>Sobre nós: {id}</div>;
}

Rotas dinâmicas​

Para definir rotas dinâmicas, utilizamos colchetes ([param]) no nome dos arquivos.

├── pages
|  ├── index.js
|  ├── [slug].js
|  └── minha-pasta
|     ├── [id].js
|     └── index.js
  • Exemplo de uso de rota dinâmica:
import { useRouter } from "next/router";

export default function PaginaDinamica() {
  const router = useRouter();
  const { slug } = router.query;
  return <div>Rota dinâmica: {slug}</div>;
}

Rotas aninhadas dinâmicas​

O Next.js permite a criação de rotas dinâmicas aninhadas:

├── pages
|  ├── index.js
|  └── [categoria]
|     └── [produto].js
  • Exemplo de recuperação de parâmetros de rotas aninhadas:
import { useRouter } from "next/router";

export default function PaginaDinamicaAninhada() {
  const router = useRouter();
  const { categoria, produto } = router.query;
  return (
    <div>
      Categoria: {categoria} <br />
      Produto: {produto}
    </div>
  );
}

Com isso, ao acessar /eletronicos/celular, os valores categoria=eletronicos e produto=celular serão recuperados.

Public e Private | Padrão de Pasta​

alt text