This Next.js Feature is a Game Changer (Parallel Routes)

Summary

Cette vidéo explique les routes parallèles dans Next.js, une fonctionnalité révolutionnaire permettant de rendre plusieurs pages simultanément dans le même layout sans changer l'URL. Idéale pour les applications dynamiques comme les tableaux de bord, elle permet de gérer facilement les états de chargement et d'erreur. Grâce à l'utilisation de slots (routes parallèles), de fichiers `loading.tsx` et `error.tsx`, et de fichiers `default.tsx` pour la gestion des erreurs, Next.js simplifie la gestion des interfaces complexes. De plus, la possibilité de rendre conditionnellement certains contenus en fonction des rôles utilisateurs ouvre des possibilités infinies pour les développeurs.

Takeaways

• 😀 Les routes parallèles dans Next.js permettent de rendre plusieurs pages dans la même mise en page sans modifier l'URL, ce qui est utile pour des interfaces dynamiques comme les tableaux de bord.
• 😀 Les slots (routes parallèles) permettent d'intégrer plusieurs composants ou pages dans un même layout sans perturber l'interface utilisateur.
• 😀 Les fichiers de chargement et d'erreur doivent être définis pour chaque slot afin de gérer les états de chargement et d'erreur pendant la récupération des données.
• 😀 Le fichier `default.tsx` est essentiel pour maintenir l'état des routes après un rafraîchissement complet de la page, car cela empêche la perte de l'état précédent.
• 😀 Les fichiers de `loading.tsx` permettent d'afficher une interface utilisateur pendant que les données sont en cours de chargement, ce qui améliore l'expérience utilisateur.
• 😀 Les fichiers `error.tsx` sont utilisés pour afficher un message d'erreur personnalisé si une route parallèle échoue à se charger, offrant une gestion des erreurs propre et prévisible.
• 😀 Les routes parallèles sont particulièrement utiles dans les tableaux de bord ou les applications où plusieurs éléments doivent être affichés simultanément dans la même interface sans recharger la page.
• 😀 La gestion conditionnelle des routes permet d'afficher des composants différents en fonction des rôles utilisateurs, par exemple en montrant plus de données pour les administrateurs.
• 😀 Il est important de comprendre que les fichiers par défaut aident Next.js à savoir quoi afficher après un rafraîchissement complet lorsque l'état est perdu.
• 😀 Le framework Next.js utilise des routes parallèles pour améliorer la performance et la fluidité des applications en permettant le rendu simultané de plusieurs sections sans affecter l'URL.

Q & A

Qu'est-ce que les routes parallèles dans Next.js et comment fonctionnent-elles ?

Les routes parallèles dans Next.js permettent de rendre plusieurs pages simultanément dans la même mise en page, sans modifier l'URL. Cela est particulièrement utile pour des applications dynamiques comme les tableaux de bord, où différents contenus doivent être affichés en même temps.

Quels sont les avantages de l'utilisation des fichiers 'loading.tsx' et 'error.tsx' dans Next.js ?

Les fichiers 'loading.tsx' et 'error.tsx' offrent une gestion simplifiée des états de chargement et des erreurs. Le fichier 'loading.tsx' permet d'afficher un indicateur de chargement, comme un squelette, tandis que le fichier 'error.tsx' permet de gérer les erreurs d'une manière plus propre, sans avoir à créer manuellement des frontières de suspense ou des gestionnaires d'erreurs.

Pourquoi les routes parallèles ne mappent-elles pas à l'URL ?

Les routes parallèles ne sont pas mappées à l'URL pour permettre le rendu simultané de plusieurs pages sans perturber l'URL de l'application. Cela permet de garder une structure d'URL propre et stable tout en rendant différentes sections ou pages à l'intérieur d'une même mise en page.

Comment les 'slots' sont-ils utilisés dans les routes parallèles ?

Les 'slots' sont des routes parallèles définies avec un préfixe 'at' (par exemple, '@team' ou '@users'). Ils permettent de rendre des pages spécifiques dans un layout sans changer l'URL. Chaque slot représente une page qui peut inclure des données dynamiques comme les membres d'une équipe ou les utilisateurs.

Quel est le rôle du fichier 'default.tsx' dans Next.js ?

Le fichier 'default.tsx' est utilisé pour rendre une page par défaut lorsque Next.js perd l'état après un rafraîchissement complet de la page. Cela permet de gérer des cas où l'application ne sait pas quel contenu afficher, en particulier lors du rendu de routes parallèles où l'état peut être perdu.

Que se passe-t-il si je fais un rafraîchissement complet (hard refresh) avec des routes parallèles sans fichier 'default.tsx' ?

Si un rafraîchissement complet est effectué sans fichier 'default.tsx', Next.js risque de ne pas savoir quelle page rendre, ce qui peut entraîner une erreur 404, car il perd l'état des routes parallèles et ne sait pas quel contenu afficher.

Quelles sont les étapes pour mettre en œuvre les routes parallèles dans Next.js ?

Pour mettre en œuvre les routes parallèles, vous devez créer un dossier avec un préfixe '@' (par exemple, '@team') et y ajouter des fichiers de page comme 'page.tsx'. Ensuite, vous configurez le layout pour inclure ces slots et les rendre simultanément dans la même mise en page.

Pourquoi faut-il spécifier l'attribut 'use client' dans le fichier 'error.tsx' ?

L'attribut 'use client' doit être spécifié dans le fichier 'error.tsx' car ce fichier gère des erreurs liées à des opérations côté client, comme des erreurs de réseau ou des erreurs d'exécution JavaScript, et nécessite donc l'exécution du code côté client pour fonctionner correctement.

Comment peut-on implémenter un rendu conditionnel avec des routes parallèles dans Next.js ?

Le rendu conditionnel dans les routes parallèles peut être réalisé en utilisant des variables ou des constantes pour vérifier des conditions, comme un rôle utilisateur (par exemple, 'admin'). En fonction de ces conditions, vous pouvez afficher différents slots, comme afficher le slot des membres d'équipe pour les administrateurs et celui des utilisateurs pour les autres.

Quel est l'impact de l'utilisation des routes parallèles sur les performances et la gestion des états dans une application Next.js ?

Les routes parallèles permettent d'améliorer les performances en évitant de recharger complètement la page. Elles permettent un rendu partiel, où les composants ou sections non affectées par le changement d'état ne sont pas re-rendus. Cela réduit le nombre de re-rendus inutiles et améliore l'expérience utilisateur en rendant l'interface plus fluide et rapide.