Création de mises en page et de pages

Jusqu'à présent, votre application ne possède qu'une page d'accueil. Voyons comment créer davantage de routes avec des mises en page (layouts) et des pages.

Route imbriquée (Nested routing)

Next.js utilise un système de routage basé sur le système de fichiers où les dossiers servent à créer des routes imbriquées. Chaque dossier représente un segment de route qui correspond à un segment d'URL.

Vous pouvez créer des interfaces utilisateur distinctes pour chaque route en utilisant les fichiers layout.tsx et page.tsx.

page.tsx est un fichier spécial de Next.js qui exporte un composant React, et il est nécessaire pour que la route soit accessible. Dans votre application, vous avez déjà un fichier de page : /app/page.tsx - c'est la page d'accueil associée à la route /.

Pour créer une route imbriquée, vous pouvez imbriquer des dossiers les uns dans les autres et ajouter des fichiers page.tsx à l'intérieur. Par exemple :

/app/dashboard/page.tsx est associé au chemin /dashboard. Créons cette page pour voir comment cela fonctionne !

Création de la page du tableau de bord

Créez un nouveau dossier appelé dashboard dans /app. Ensuite, créez un nouveau fichier page.tsx dans le dossier dashboard avec le contenu suivant :

export default function Page() {
  return <p>Page du tableau de bord</p>;
}

Maintenant, assurez-vous que le serveur de développement est en cours d'exécution et visitez http://localhost:3000/dashboard. Vous devriez voir le texte "Page du tableau de bord".

C'est ainsi que vous pouvez créer différentes pages dans Next.js : créez un nouveau segment de route en utilisant un dossier, et ajoutez un fichier page à l'intérieur.

En ayant un nom spécial pour les fichiers page, Next.js vous permet de colocaliser les composants d'interface utilisateur, les fichiers de test et d'autres codes associés avec vos routes. Seul le contenu à l'intérieur du fichier page sera accessible publiquement. Par exemple, les dossiers /ui et /lib sont colocalisés dans le dossier /app avec vos routes.

Exercice pratique : Création des pages du tableau de bord

Pratiquons la création de davantage de routes. Dans votre tableau de bord, créez deux pages supplémentaires :

1. Page Clients : La page devrait être accessible sur http://localhost:3000/dashboard/customers. Pour l'instant, elle devrait retourner un élément <p>Page Clients</p>.
2. Page Factures : La page des factures devrait être accessible sur http://localhost:3000/dashboard/invoices. Pour l'instant, retournez également un élément <p>Page Factures</p>.

Prenez le temps de réaliser cet exercice, et lorsque vous êtes prêt, déployez le menu ci-dessous pour voir la solution :

Création de la mise en page du tableau de bord

Les tableaux de bord ont généralement une navigation partagée entre plusieurs pages. Dans Next.js, vous pouvez utiliser un fichier spécial layout.tsx pour créer une interface utilisateur partagée entre plusieurs pages. Créons une mise en page pour les pages du tableau de bord !

Dans le dossier /dashboard, ajoutez un nouveau fichier appelé layout.tsx et collez le code suivant :

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

Plusieurs choses se passent dans ce code, alors décomposons-le :

Tout d'abord, vous importez le composant <SideNav /> dans votre mise en page. Tous les composants que vous importez dans ce fichier feront partie de la mise en page.

Le composant <Layout /> reçoit une prop children. Cet enfant peut être soit une page, soit une autre mise en page. Dans votre cas, les pages à l'intérieur de /dashboard seront automatiquement imbriquées dans un <Layout /> comme ceci :

Vérifiez que tout fonctionne correctement en sauvegardant vos modifications et en vérifiant votre localhost. Vous devriez voir ce qui suit :

Un avantage de l'utilisation des mises en page dans Next.js est que lors de la navigation, seuls les composants de page sont mis à jour tandis que la mise en page ne se recharge pas. C'est ce qu'on appelle le rendu partiel (partial rendering) qui préserve l'état client React dans la mise en page lors des transitions entre pages.

Mise en page racine (Root layout)

Dans le chapitre 3, vous avez importé la police Inter dans une autre mise en page : /app/layout.tsx. Pour rappel :

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

C'est ce qu'on appelle une mise en page racine (root layout) et elle est requise dans chaque application Next.js. Toute interface utilisateur que vous ajoutez à la mise en page racine sera partagée par toutes les pages de votre application. Vous pouvez utiliser la mise en page racine pour modifier vos balises <html> et <body>, et ajouter des métadonnées (vous en apprendrez plus sur les métadonnées dans un chapitre ultérieur).

Comme la nouvelle mise en page que vous venez de créer (/app/dashboard/layout.tsx) est spécifique aux pages du tableau de bord, vous n'avez pas besoin d'ajouter d'interface utilisateur à la mise en page racine ci-dessus.