Next.js Routing System

The Next.js routing system is one of its most powerful features. It is based on the file system, which makes creating routes intuitive and simple.

File-Based Routing

Basic Structure

In Next.js, every file in the pages/ folder automatically becomes a route:

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

Simple Page Example

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

Dynamic Routes

Routes with Parameters

Use square brackets [] to create dynamic routes:

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

Routes with Multiple Parameters

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

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

  return (
    <div>
      <h1>Article de {month}/{year}</h1>
      <h2>{slug}</h2>
    </div>
  )
}