Système de routage Next.js

Le système de routage de Next.js est l'une de ses fonctionnalités les plus puissantes. Il est basé sur le système de fichiers, ce qui rend la création de routes intuitive et simple.

Routage basé sur les fichiers

Structure de base

Dans Next.js, chaque fichier dans le dossier pages/ devient automatiquement une route :

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

Exemple de page simple

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

Routes dynamiques

Routes avec paramètres

Utilisez les crochets [] pour créer des routes dynamiques :

// 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>
  )
}