Next.Js 13 routes parallèles : un guide complet

1. Introduction

Bonjour!

Bienvenue dans ce guide complet sur les routes parallèles dans Next.js.

À mesure que le paysage numérique évolue, les subtilités du développement Web évoluent également. Les applications Web modernes nécessitent non seulement des mécanismes de routage robustes, mais également polyvalents pour améliorer l'expérience utilisateur et s'adapter aux structures de conception complexes.

Cet article est méticuleusement conçu pour comprendre la fonctionnalité puissante introduite dans Next.js 13.3 - Routes parallèles.

L'objectif est double : premièrement, fournir une compréhension claire de l'importance des routes parallèles et de leurs applications pratiques, et deuxièmement, offrir des informations pratiques sur leur mise en œuvre efficace dans vos projets Next.js.

Commençons ce voyage pour explorer le potentiel de transformation des routes parallèles et comment elles redéfinissent les limites de la conception d'applications Web.

2. Le monde avant les routes parallèles

Avant la création des routes parallèles, les développeurs Web étaient limités dans la façon dont ils pouvaient structurer et afficher le contenu de manière dynamique sur une seule vue. Les mécanismes de routage traditionnels étaient assez linéaires : une URL, une vue.

Par exemple, considérez une conception de tableau de bord typique :

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

Naviguer vers /dashboard/user afficherait le tableau de bord de l'utilisateur, tandis que /dashboard/team afficherait le tableau de bord de l'équipe. Les deux s'excluaient mutuellement. Pour afficher un segment différent, un utilisateur doit généralement quitter entièrement sa vue actuelle.

Cela posait des problèmes, en particulier lorsque les développeurs souhaitaient afficher plusieurs segments d'un site Web simultanément ou de manière conditionnelle. L'approche de routage traditionnelle manquait de flexibilité, ce qui rendait difficile la création de mises en page complexes et interactives telles que des tableaux de bord ou des modaux côte à côte sans recourir à une gestion d'état complexe ou à des solutions de contournement.

Heureusement, avec l'évolution de frameworks comme Next.js et l'introduction de routes parallèles, ce paysage a été radicalement modifié, inaugurant une nouvelle ère de conception Web dynamique et adaptative.

3. Comprendre les routes parallèles

Les routes parallèles sont des fonctionnalités révolutionnaires introduites dans Next.js 13.3, modifiant considérablement la façon dont les développeurs abordent le routage et la présentation du contenu sur le Web.

3.1 Introduction aux routes parallèles :

Next.js 13.3 apporte une nouvelle convention dynamique, permettant la mise en œuvre de cas de routage plus avancés. Comme indiqué dans la documentation,

"Les routes parallèles vous permettent d'afficher plusieurs pages dans la même vue, comme avec des tableaux de bord complexes ou des modaux. Avec les routes parallèles, vous pouvez afficher simultanément une ou plusieurs pages dans la même vue qui peuvent être parcourues indépendamment."

En termes plus simples, différents composants ou sections de votre application peuvent se charger simultanément, ce qui donne une impression de fluidité et de réactivité, en particulier si certains composants prennent plus de temps en raison de la récupération des données ou du rendu.

3.2 Cas d'utilisation : tableaux de bord, modaux, etc. :

La structure des applications Web modernes exige souvent des mises en page avancées qui combinent plusieurs vues ou nécessitent des fenêtres contextuelles sans perdre le contenu sous-jacent.

Prenons l'exemple de la documentation :

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

Cette disposition montre comment les routes parallèles peuvent être utilisées pour afficher simultanément les tableaux de bord des utilisateurs et des équipes sur la même vue à l'aide de "slots" nommés, une fonctionnalité native de cette nouvelle approche de routage.

3.3 Avantages : Affichage de plusieurs pages, rendu conditionnel, navigation indépendante :

Les avantages des routes parallèles sont multiples. Comme souligné, ils permettent :

"le rendu simultané d'une ou plusieurs pages dans la même vue qui peuvent être naviguées indépendamment".

De plus, ils peuvent être exploités pour le rendu conditionnel des pages, offrant ainsi un niveau sans précédent de flexibilité et de dynamisme aux applications Web.

Essentiellement, avec l'avènement des routes parallèles, les développeurs Web sont désormais mieux équipés pour construire des interfaces Web complexes, dynamiques et conviviales, conçues sur mesure pour les besoins en constante évolution du Web moderne.

4. Comment fonctionnent les routes parallèles

L'approfondissement des routes parallèles montre à quel point Next.js 13.3 est construit intelligemment. Passons en revue les détails étape par étape.

4.1 Présentation de "Slots" et de la convention @folder :

Le concept de "slots" est au cœur des Routes Parallèles. Considérez les emplacements comme des zones désignées qui peuvent afficher différentes pages ou parties de votre site Web.

La convention @folder est la méthode utilisée pour configurer ces emplacements, comme en témoigne la note de la documentation :

"Les routes parallèles utilisent ces 'emplacements' nommés, définis à l'aide de la méthode @folder."

• Explication des codes :

  
  

  • Structure des dossiers pour les routes parallèles : considérez cet exemple :

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    Ici, « @user » et « @team » agissent comme des conteneurs pour différents contenus, ce qui nous permet de concevoir notre site Web de manière plus flexible.

    
    

  • Comment les mises en page utilisent les slots comme accessoires : selon la documentation, la mise en page dans le même segment de route peut utiliser ces slots comme accessoires. Voici un exemple clair :

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • Remarque : Dans le code ci-dessus, la fonction getCurrentUserType() est utilisée pour déterminer le type d'utilisateur, qui, à son tour, détermine si l'emplacement de l' user ou team est affiché.

    
    

• Emplacements de routage implicites ou explicites : l'un des points forts du routage Next.js est sa flexibilité. Alors que '@user' et '@team' dans notre exemple sont des emplacements explicites que nous définissons (liés directement à un @folder ), il existe également un emplacement implicite ou automatique.

  
  

• La documentation explique que le

  " children est ce type d'emplacement automatique, et nous n'avons pas besoin de l'associer à un @folder . Par conséquent, dashboard/page.js fonctionne de la même manière que dashboard/@children/page.js ."

En comprenant parfaitement le fonctionnement des routes parallèles, les développeurs peuvent optimiser les capacités de Next.js 13, en créant des sites Web plus intuitifs et adaptables.

5. Un guide étape par étape sur l'utilisation des routes parallèles

5.1 Configuration d'une nouvelle application Next.js

Commencez par créer une nouvelle application Next.js :

 npx create-next-app@latest parallel-routes

Accédez au répertoire de l'application nouvellement créée :

 cd parallel-routes

Démarrez le serveur de développement :

 yarn dev

5.2 Structurer l'application

Dans le répertoire du projet, créez les dossiers et fichiers suivants :

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 Création des compositions et simulation du chargement des données

Dans app/@folder1/page.js , nous allons créer le composant pour afficher et simuler un temps de chargement afin de comprendre la séquence visuelle dans laquelle les composants se chargent :

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

De même, dans app/@folder2/page.js :

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

Ces temps de chargement simulés vous permettent d'apprécier visuellement la capacité des routes parallèles.

5.4 Mettre à jour le code de mise en page

Dans app/layout.js , ajustez le code de mise en page pour accueillir les deux dossiers :

Avant:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

Après:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

N'hésitez pas à styliser la mise en page du mieux que vous pouvez pour une meilleure lisibilité

5.5 Ajouter des états de chargement

La documentation de Next.Js indique que :

Le fichier spécial loading.js vous aide à créer une interface utilisateur de chargement significative avec React Suspense . Avec cette convention, vous pouvez afficher un état de chargement instantané à partir du serveur pendant le chargement du contenu d'un segment de route. Le nouveau contenu est automatiquement échangé une fois le rendu terminé.

Pour chaque composant (dossier1 et dossier2), nous allons créer un état de chargement. La structure de votre dossier devrait ressembler à ceci :

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

app/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

app/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. Modifier la page

Ajustez le contenu de app/page.js .

Cette modification garantit que la page principale ne montre rien, laissant briller les routes parallèles :

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }

Clause de non-responsabilité

En m'entraînant avec des routes parallèles, j'ai découvert que le rechargement à chaud n'affichait pas les routes comme prévu. Je n'ai pas étudié la question, donc je ne peux pas vous dire exactement quel est le problème. Si vous rencontrez ce problème, redémarrez simplement le serveur de développement pour refléter les modifications.

Conclusion

Les routes parallèles, introduites dans Next.js 13.3, ont marqué une avancée significative dans le domaine du développement Web.

Avant leur création, les développeurs rencontraient des difficultés pour afficher simultanément plusieurs segments d'un site Web, le routage traditionnel offrant une expérience plus linéaire.

Avec des itinéraires parallèles, Next.js offre une approche innovante de la conception Web dynamique, permettant le rendu simultané de plusieurs pages dans une seule vue.

Cette fonctionnalité puissante offre non seulement une expérience utilisateur améliorée, mais facilite également les mises en page complexes et les rendus conditionnels, repoussant les limites de la conception d'applications Web contemporaines.

En suivant le guide détaillé fourni ci-dessus, les développeurs peuvent approfondir le fonctionnement des routes parallèles, de la compréhension des concepts de base tels que les "slots" et la convention "@folder" à la mise en œuvre pratique à l'aide du framework Next.js.

Bien qu'il puisse y avoir quelques bosses, comme le problème de rechargement à chaud noté, la flexibilité et le dynamisme ajoutés aux applications Web par des routes parallèles valent la peine d'apprendre.

Alors que le paysage numérique continue d'évoluer, des outils et des fonctionnalités comme ceux-ci joueront sans aucun doute un rôle central dans l'élaboration de l'avenir du développement Web.

Encore une fois, merci pour votre patience et votre dévouement.

Vous avez des commentaires ou des questions ? N'hésitez pas à partager. Chaque voix ajoute de la valeur.

Connectez-vous avec moi sur :

communauté dev.to @leandro_nnz communauté hackernoon.com @leandronnz hashnode.com leandronnz twitter.com @digpollution

Jusqu'à la prochaine fois, bon codage !

Les références

Vous pouvez trouver le code complet dans ce dépôt ici .

Documentation officielle Next.js ici .

Pour construire cet article, j'ai utilisé StackEdit .

Photo de Markus Spiske sur Unsplash