Next.js est un framework React livré avec toutes les fonctionnalités dont vous avez besoin pour la production. Next.js active le routage dans votre application à l'aide du routage basé sur le système de fichiers. Dans ce guide, je vais vous montrer comment fonctionne le routage dans Next.js.

• Comment fonctionne le routage dans Next.js?
• Liens entre les pages
• Passage des paramètres de route
• Routes dynamiques
• Routes imbriquées dynamiques

Comment fonctionne le routage dans Next.js?

Next.js utilise le système de fichiers pour activer le routage dans l'application. Next traite automatiquement tous les fichiers du répertoire pages avec les extensions .js, .jsx, .ts ou .tsx comme une route. Une page dans Next.js est un composant React qui a une route basée sur son nom de fichier.

Prenons cette structure de dossiers à titre d'exemple:

├── pages
|  ├── index.js
|  ├── contact.js
|  └── my-folder
|     ├── about.js
|     └── index.js

Ici, nous avons quatre pages:

• index.js est la page d'accueil accessible sur http://localhost:3000
• contact.js est la page de contact accessible sur http://localhost:3000/contact
• my-folder/index.js est la page située dans le sous-dossier my-folder accessible sur http://localhost:3000/my-folder
• my-folder/about.js est la page about située dans le sous-dossier my-folder accessible sur http://localhost:3000/my-folder/about

Liens entre les pages

Par défaut, Next.js effectue un pré-rendu de chaque page pour rendre votre application rapide et conviviale. Il utilise le composant Link fourni par next/link pour permettre les transitions entre les routes.

import Link from "next/link"

export default function IndexPage() {
  return (
    <div>
      <Link href="/contact">
        <a>My second page</a>
      </Link>
      <Link href="/my-folder/about">
        <a>My third page</a>
      </Link>
    </div>
  )
}

Ici, nous avons deux routes:

• Le premier lien mène à la page http://localhost:3000/contact
• Le deuxième lien mène à la page http://localhost:3000/my-folder/about

Le composant Link peut recevoir plusieurs propriétés, mais seul l'attribut href est requis. Ici, nous utilisons une balise a comme composant enfant pour lier les pages. Mais, vous pouvez utiliser Link sur n'importe quel élément qui prend en charge l'événement onClick.

Passage des paramètres de route

Next.js vous permet de passer des paramètres de route, puis de les récupérer en utilisant le hook useRouter. Il vous donne accès à l'objet routeur qui contient les paramètres.

• index.js

import Link from "next/link"

export default function IndexPage() {
  return (
    <Link
      href={{
        pathname: "/about",
        query: { id: "test" },
      }}
    >
      <a>About page</a>
    </Link>
  )
}

Comme vous pouvez le voir, ici, au lieu de fournir une chaîne à l'attribut href, nous passons un objet qui contient une propriété pathname qui est la route, et un élément de requête qui contient les données.

• about.js

import { useRouter } from "next/router"

export default function AboutPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>About us: {id}</div>
}

Ici, nous importons le hook useRouter pour obtenir les données transmises. Ensuite, nous le tirons de l'objet query en utilisant la déstructuration.

Si vous faites le rendu côté serveur, vous devez utiliser getInitialProps comme ceci pour obtenir les données:

export default function AboutPage({ id }) {
  return <div>About us: {id}</div>
}

AboutPage.getInitialProps = ({ query: { id } }) => {
  return { id }
}

Routes dynamiques

Next.js vous permet de définir des routes dynamiques dans votre application en utilisant les crochets ([param]). Au lieu de définir un nom statique sur vos pages, vous pouvez en utiliser un dynamique.

Utilisons cette structure de dossiers comme exemple:

├── pages
|  ├── index.js
|  ├── [slug].js
|  └── my-folder
|     ├── [id].js
|     └── index.js

Next.js obtiendra les paramètres de la route passés et l'utilisera comme nom pour la route.

• index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[slug]" as="/my-slug">
          <a>First Route</a>
        </Link>
      </li>
      <li>
        <Link href="/my-folder/[id]" as="/my-folder/my-id">
          <a>Second Route</a>
        </Link>
      </li>
    </ul>
  )
}

Ici, nous devons définir la valeur de l'attribut as car le chemin est dynamique. Le nom de la route sera celui que vous définissez sur l'accessoire as.

• [slug].js

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { id },
  } = router
  return <div>The dynamic route is {id}</div>
}

Vous pouvez également obtenir les paramètres de la route avec le hook useRouter sur le client ou getInitialProps sur le serveur.

• my-folder/[id].js

export default function MyDynamicPage({ example }) {
  return <div>My example is {example}</div>
}

MyDynamicPage.getInitialProps = ({ query: { example } }) => {
  return { example }
}

Ici, nous utilisons getInitialProps pour obtenir la route dynamique transmise.

Routes imbriquées dynamiques

Avec Next.js, vous pouvez également imbriquer des routes dynamiques avec les crochets ([param]).

Considérons cette structure de fichier:

├── pages
|  ├── index.js
|  └── [dynamic]
|     └── [id].js

• index.js

export default function IndexPage() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/[dynamic]/[id]" as="/my-folder/my-id">
          <a>Dynamic nested Route</a>
        </Link>
      </li>
    </ul>
  )
}

Comme vous pouvez le voir ici, nous définissons les valeurs dynamiques sur l'attribut as comme nous l'avons fait dans l'exemple précédent. Mais cette fois, il faut définir le nom du dossier et son fichier.

import { useRouter } from "next/router"

export default function DynamicPage() {
  const router = useRouter()
  const {
    query: { dynamic, id },
  } = router
  return (
    <div>
      Data: {dynamic} - {id}
    </div>
  )
}

Ici, nous extrayons les paramètres de route de l'objet de requête avec le hook useRouter.

C'est tout! Merci d'avoir lu

Photo de Javier Allegue Barros sur Unsplash