Sistema de roteamento do Next.js

O sistema de roteamento do Next.js é um dos seus recursos mais poderosos. Ele é baseado no sistema de arquivos, o que torna a criação de rotas intuitiva e simples.

Roteamento baseado em arquivos

Estrutura básica

No Next.js, cada arquivo dentro da pasta pages/ se torna automaticamente uma rota:

pages/
├── index.js          → /
├── about.js          → /about
├── contact.js        → /contact
└── blog/
    ├── index.js      → /blog
    └── post.js       → /blog/post

Exemplo de página simples

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>À propos de nous</h1>
      <p>Bienvenue sur notre page à propos.</p>
    </div>
  )
}

Rotas dinâmicas

Rotas com parâmetros

Use colchetes [] para criar rotas dinâmicas:

// pages/blog/[slug].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  return (
    <div>
      <h1>Article : {slug}</h1>
      <p>Contenu de l'article...</p>
    </div>
  )
}