Routing & Navigation

2.1Le routing par fichiers

C'est la magie de Next.js : tu crées un dossier et un fichier page.tsx dedans, et pouf, tu as une nouvelle page accessible via l'URL.

app/
├── page.tsx              # → /
├── a-propos/
│   └── page.tsx          # → /a-propos
├── blog/
│   └── page.tsx          # → /blog
└── contact/
    └── page.tsx          # → /contact

Pas de fichier de configuration de routes. Pas de React Router à installer. Tu ranges tes fichiers, Next.js crée les URLs. C'est aussi simple que ça.

2.2Créer une page

Créons une page "À propos". Crée le dossier app/a-propos/ puis un fichier page.tsx dedans :

// app/a-propos/page.tsx

export default function AProposPage() {
  return (
    <main>
      <h1>À propos</h1>
      <p>Ce site a été créé avec Next.js et beaucoup d'amour.</p>
    </main>
  )
}

Va sur http://localhost:3000/a-propos. Ta page est là. Tu n'as rien eu à brancher, relier ou configurer.

2.3Les routes dynamiques

Parfois, tu veux une page qui change selon un paramètre. Par exemple, un article de blog avec un identifiant différent. C'est là qu'arrive le routing dynamique.

Pour ça, tu crées un dossier avec des crochets :

app/
└── blog/
    ├── page.tsx          # → /blog (liste des articles)
    └── [slug]/
        └── page.tsx      # → /blog/mon-article, /blog/un-autre...

Le nom entre crochets ([slug]) devient un paramètre que tu peux récupérer dans ton composant :

// app/blog/[slug]/page.tsx

export default async function ArticlePage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params

  return (
    <main>
      <h1>Article : {slug}</h1>
      <p>Tu lis l'article "{slug}". Bravo, le routing dynamique marche !</p>
    </main>
  )
}

Si tu vas sur /blog/mon-premier-article, le slug vaudra "mon-premier-article". C'est comme si tu avais une porte qui s'adapte au visiteur.

2.4Naviguer entre les pages

En HTML classique, on utilise <a href="...">. Mais dans Next.js, on utilise le composant Link qui est bien plus malin :

• Il pré-charge la page de destination avant même que tu cliques.
• La navigation est instantanée : pas de rechargement complet de la page.
• Il garde le state de ton app (pas de perte de données au changement de page).

import Link from 'next/link'

export default function NavBar() {
  return (
    <nav>
      <Link href="/">Accueil</Link>
      <Link href="/a-propos">À propos</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  )
}

2.5Naviguer programmatiquement

Parfois, tu veux rediriger l'utilisateur après une action (un formulaire soumis, une connexion réussie...). Pour ça, Next.js te donne le hook useRouter :

'use client'

import { useRouter } from 'next/navigation'

export default function LoginForm() {
  const router = useRouter()

  function handleLogin() {
    // ... logique de connexion
    router.push('/dashboard')  // Redirection !
  }

  return (
    <button onClick={handleLogin}>
      Se connecter
    </button>
  )
}

router.push() fonctionne comme Link mais en version code. Tu peux aussi utiliser router.back() pour revenir en arrière (comme le bouton retour du navigateur).

2.6Pages imbriquées

Tu peux imbriquer tes routes autant que tu veux, il suffit de créer des sous-dossiers :

app/
└── dashboard/
    ├── page.tsx              # → /dashboard
    ├── parametres/
    │   └── page.tsx          # → /dashboard/parametres
    └── profil/
        └── page.tsx          # → /dashboard/profil

C'est comme un immeuble avec des étages : chaque étage a ses propres portes, et tu navigues naturellement entre eux.