Bonjour à tous, et bienvenue au quatrième segment de ma veille technologique sur Next.js.
À partir du projet créé dans l'article de la semaine passée, nous allons maintenant en apprendre davantage sur le fonctionnement du routage et de la mise en page dans une application Next.js, ainsi que sur la manière de bien structurer son code à partir du projet initial.
Afin de simplifier la mise en contexte des apprentissages, nous allons créer, au fil des prochains articles, une application très simple de gestion de tâches, autrement appelée "todo app".
Description de l'application
Nous aurons simplement besoin de trois routes différentes pour cette application. La première page servira à afficher la liste des tâches en cours. Il y aura également une page pour créer une nouvelle tâche, ainsi qu'une dernière permettant de voir les détails d'une tâche.
Il est particulièrement pertinent de le mentionner dans cet article, car nous allons mettre en place la navigation entre ces différentes pages avant d'implémenter la logique applicative pour créer les tâches. De cette manière, nous aurons une bonne compréhension du fonctionnement du routage dans Next.js et explorerons les différentes stratégies de mise en page pour nos sections.
Développement
Page - Vue d'ensemble des tâches
Pour commencer, nous allons créer un dossier taches à l'intérieur du dossier src/app. Ce dossier contiendra notre page de vue d'ensemble de la liste des tâches.
Une fois ce dossier créé, ajoutez un nouveau fichier nommé page.tsx. Attention, le nom du fichier est très important, car c'est ainsi que Next.js reconnaît quel élément afficher lorsque l'on navigue vers le chemin /taches.
Vous pouvez alors créer une fonction qui retournera du HTML, comme on le ferait pour un composant React. Voici un aperçu d'une page affichant cinq tâches, ainsi qu'un composant React Todo permettant d'éviter la duplication de code :
import Link from 'next/link';
import { FC } from 'react';
type Props = {
id: number;
title: string;
description?: string;
};
const Todo: FC<Props> = ({ id, title, description }) => {
return (
<Link className={styles.todo} href={`/taches/${id}`}>
<p>{title}</p>
{description && <p>{description}</p>}
</Link>
);
};
const Page = async () => {
return (
<div className={styles.page}>
<h2>Liste de tâches</h2>
<Link className={styles.button} href={`/taches/ajouter`}>
Ajouter une tâche
</Link>
<div className={styles.list}>
{[...Array(5)].map((_, i) => (
<Todo key={i} id={i + 1} title={`Tâche #${i + 1}`} />
))}
</div>
</div>
);
};
export default Page;
Voici le résultat lorsque l'on navigue vers /taches dans notre application :
Page - Ajout d'une tâche
Nous allons maintenant mettre en place notre première navigation vers une autre page en utilisant l'App Router de Next.js ainsi que le composant Link, utilisé dans l'extrait de code précédent, qui facilite la navigation dans l'application.
Pour ce faire, créez un nouveau dossier dans src/app/taches afin de définir la route permettant d'ajouter une tâche. De mon côté, je l'ai nommé ajouter.
Vous pouvez ensuite créer un fichier page.tsx et y ajouter une fonction qui retournera un formulaire HTML pour créer une nouvelle tâche. Pour l'instant, ce formulaire sera uniquement visuel, nous travaillerons sur sa fonctionnalité dans un prochain article.
Voici à quoi votre code pourrait ressembler pour cette page :
import Link from 'next/link';
const Page = async () => {
return (
<div className={styles.page}>
<h2>Ajouter une tâche</h2>
<form className={styles.form}>
<input placeholder='Titre de la tâche' required name='titre' />
<input placeholder='Description de la tâche' name='description' />
<div className={styles.buttons}>
<Link href={'/taches'}>Annuler</Link>
<button type='submit'>Ajouter</button>
</div>
</form>
</div>
);
};
export default Page;
Et voici le résultat lorsque l'on navigue vers /taches/ajouter dans notre application :
Page - Détails d'une tâche
La dernière page à créer est celle permettant de visualiser les détails d'une tâche. Pour cela, nous devons utiliser une page dynamique, car nous ne connaissons pas les chemins à l'avance. Next.js permet d'utiliser des crochets [] dans le nom du dossier pour gérer dynamiquement le routage. Il suffit de placer le nom de la variable entre crochets et de la récupérer dans le fichier page.tsx.
Ainsi, à partir du chemin /src/app/taches, créez un nouveau dossier nommé [id], indiquant que cette route est dynamique et que id représentera l'identifiant de la tâche.
Voici un extrait de code permettant de récupérer et d'utiliser cette variable dynamique dans le fichier page.tsx nouvellement créé :
import Link from 'next/link';
const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
const id = (await params).id;
return (
<div className={styles.page}>
<h2>Tâche {id}</h2>
<p>Description</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat optio
sunt aliquid deserunt tempore natus accusantium, deleniti maxime
dolorem, voluptatem consequuntur temporibus maiores necessitatibus
reprehenderit reiciendis, voluptatum at consectetur pariatur.
</p>
<Link href={'/taches'} className={styles.button}>
Retour
</Link>
</div>
);
};
export default Page;
Dans cet extrait, nous définissons et utilisons l'attribut params dans les arguments de la fonction. Il s'agit d'un objet contenant les paramètres de l'URL, permettant de récupérer dynamiquement l'ID de la tâche.
Une fois ce code ajouté et stylisé, vous devriez obtenir une page similaire à celle-ci :
Modification du layout principal de l'application
Le dernier point que je souhaite aborder dans cet article est l'utilité des fichiers layout.tsx, qui permettent d'appliquer une mise en page globale aux différentes pages de l'application. On peut définir un seul layout pour l'ensemble du projet en le plaçant à la racine du dossier /app, mais il est également possible d'en définir plusieurs afin de personnaliser la mise en page de certaines sections sans avoir à la recréer pour chaque sous-section.
Conclusion
Voilà qui conclut ce quatrième article sur Next.js ! Nous avons pu voir la simplicité de l'ajout de routes dans nos projets grâce à l'App router de Next.js ainsi que la gestion des routes dynamiques.
Dans le prochain article, j'aimerais aborder l'accès aux données et explorer les différentes façons d'utiliser le côté client et le côté serveur de Next.js.
À la semaine prochaine !
Sources
Vercel Team, Layouts and Pages - Next.js Documentation, https://nextjs.org/docs/app/getting-started/layouts-and-pages (Page consultée le 19 février 2025).
Vercel Team, Dynamic Routes - Next.js Documentation, https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes (Page consultée le 19 février 2025).
Amaya Wickramasinghe, Creating a To-Do App with Next.js, https://medium.com/@amayawickramasinghe2001/creating-a-to-do-app-with-next-js-cdb58f0b12d1 (Page consultée le 19 février 2025).
Commentaires