Bonjour à tous, et bienvenue au cinquième segment de ma veille technologique sur Next.js.
À partir du projet créé dans l'article de la semaine passée, nous allons maintenant voir comment fonctionne le traitement de données dans une application Next.js. Nous allons mieux comprendre le lien entre le côté client et le côté serveur de Next.js, et comment ils communiquent ensemble. Pour ce faire, nous allons mettre en place la récupération de la liste de nos tâches et la création de nouvelles tâches au sein de la même application utilisée dans l'article précédent.
Prérequis
Avant de pouvoir mettre en place la gestion des données à l'intérieur de notre application, nous avons besoin d'une source de données qui nous permettra d'emmagasiner nos tâches et de les récupérer dynamiquement.
Pour ce faire, j'utilise la plateforme mockapi.io, qui permet de générer une API facilement avec des données fictives, mais également d'ajouter, de modifier et de supprimer les données.
Il suffit d'aller sur le site de mockapi.io, de créer un compte, de créer un premier projet et d'ajouter une nouvelle ressource qui sera une tâche avec un identifiant, un nom et une description.
Vous pourrez alors utiliser le lien du point d'entrée de l'API (API endpoint) afin de récupérer, ajouter, modifier et supprimer les tâches.
Récupération de la liste des tâches
Maintenant que nous avons une API qui nous donne accès à une liste de tâches, nous pouvons commencer à mettre en place le code permettant de les récupérer dans notre application Next.js.
Tout d'abord, pour refléter le schéma des tâches de l'API, nous allons créer un type pour les tâches :
type Tache = {
id: string;
nom: string;
description?: string;
};
Ensuite, on peut mettre en place le code pour récupérer la liste de toutes les tâches de notre API.
const reponse = await fetch('https://98alsdvdt4d02j9f2234638c.mockapi.io/api/v1/tache');
const taches: Tache[] = await reponse.json();
console.log(taches);
En ajoutant ces lignes au début de votre composant page.tsx, vous pourrez voir dans la console de votre navigateur que les tâches de l'API sont bien retournées côté serveur.
On peut alors utiliser la liste de tâches dans le retour HTML de notre composant comme n'importe quelle autre variable.
{taches.map((tache) => (
<Todo key={tache.id} {...tache} />
))}
Et voici le résultat côté client :
C'est là que réside une grande partie de la magie de Next.js : il est possible d'utiliser des composants React en fonction asynchrone et de laisser le côté serveur de Next.js traiter automatiquement la requête et renvoyer le contenu au client une fois récupéré. Tout cela, sans même avoir besoin de useEffect ou d'autres traitements complexes pour la récupération des données, comme c'est souvent le cas avec React. C'est un véritable "game-changer" !
Récupérer les informations d'une tâche
Nous pouvons également modifier le composant /taches/[id]/page.tsx pour qu'il récupère les informations d'une tâche à l'aide de l'identifiant passé en paramètre dans l'URL. Pour ce faire, il suffit d'ajouter ces deux lignes après avoir récupéré l'identifiant :
const reponse = await fetch(`https://67bfdc3db9d02a9f2247708c.mockapi.io/api/v1/tache/${id}`);
const tache: Tache = await reponse.json();
Ici, on récupère les informations de la même façon que pour la liste des tâches, mais pour une tâche en particulier en passant l'identifiant à notre requête. On peut alors utiliser les informations récupérées côté serveur pour les afficher dans notre HTML côté client. Rien de plus compliqué que ça :
const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
const id = (await params).id;
const reponse = await fetch(`https://67bfdc3db9d02a9f2247708c.mockapi.io/api/v1/tache/${id}`);
const tache: Tache = await reponse.json();
return (
<div className={styles.page}>
<h2>{tache.nom}</h2>
<p>Description</p>
<p>
{tache.description}
</p>
<Link href={'/taches'} className={styles.button}>
Retour
</Link>
</div>
);
};
Conclusion
Comme vous pouvez le voir, la récupération de données avec Next.js simplifie grandement le code de l'application cliente. En réduisant cette complexité, il devient facile de séparer le code client du code serveur en déléguant les requêtes à des fonctions spécifiques. L'utilisation de fonctions asynchrones et du mot-clé await permet de réduire la complexité de compréhension du code, puisqu'il élimine les redirections de code et permet de lire le code de façon linéaire.
Nous pourrons également voir les avantages au niveau du traitement des données et des actions serveur dans la deuxième partie à ce sujet dans l'article de la semaine prochaine, où nous aborderons l'ajout et la suppression de tâches dans notre application démo.
À la semaine prochaine !
Sources
Vercel Team, Server Actions and Mutations - Next.js Documentation, https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations (Page consultée le 26 février 2025).
Web Dev Simplified, Learn Next.js 13 With This One Project, https://www.youtube.com/watch?v=NgayZAuTgwM (Vidéo consultée le 26 février 2025).
MockAPI Team, MockAPI - Mock RESTful APIs for Testing and Prototyping, https://mockapi.io/ (Page consultée le 26 février 2025).
Commentaires