Sistema de enrutamiento de Next.js

El sistema de enrutamiento de Next.js es una de sus funcionalidades más potentes. Se basa en el sistema de archivos, lo que hace que la creación de rutas sea intuitiva y sencilla.

Enrutamiento basado en archivos

Estructura básica

En Next.js, cada archivo de la carpeta pages/ se convierte automáticamente en una ruta:

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

Ejemplo de página sencilla

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

Rutas dinámicas

Rutas con parámetros

Utiliza los corchetes [] para crear rutas 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>
  )
}