Explorer la puissance des itinéraires parallèles pour des expériences Web plus fluides / Blogs / Perficient

Comprendre les routes parallèles dans Next.js

Imaginez que vous faites un road trip et que vous disposez de plusieurs itinéraires que vous pouvez emprunter pour atteindre votre destination. De même, dans le développement Web, lorsque vous créez un site Web à l’aide de Next.js, vous créez différents itinéraires pour différentes pages.

Que sont les itinéraires ?

Les itinéraires sont comme des chemins ou des directions vers des pages spécifiques d’un site Web. Par exemple, si vous avez un blog, vous pouvez avoir des itinéraires vers la page d’accueil, des articles de blog individuels, une page à propos et une page de contact. Chacune de ces pages a son propre itinéraire ou chemin.

Quoi ‘est-ce que le routage parallèle dans Next.js ?

Dans Next.js, Parallel Routing vous permet de gérer les erreurs et les temps de chargement de manière unique pour chaque page Web lors de son chargement. Cela s’apparente à de nombreuses routes sur une carte, chacune avec sa propre façon de gérer les retards potentiels pendant votre voyage.

Comprenons cela avec un exemple :

Dans Next.js, le routage parallèle permet de définir plusieurs composants de page à servir simultanément sur différentes routes. Cette fonctionnalité améliore les performances en préchargeant ou en rendant plusieurs pages en parallèle sur plusieurs itinéraires, améliorant ainsi l’expérience utilisateur. Ce sont les structures de dossiers pour les routes parallèles.

Vous devez étiqueter le dossier avec le symbole @ pour le marquer comme un itinéraire parallèle, comme ce que j’ai fait avec les pages @sidebar et @main. Mon objectif est d’afficher le contenu de ces fichiers (barre latérale et principale) à côté du contenu principal dans la mise en page racine, le tout dans la même page d’accueil en utilisant des itinéraires parallèles.

Dans ce scénario, il existe deux composants de page distincts : un pour la barre latérale (@sidebar/page.js) et un autre pour le contenu principal (@main/page.js). Ces composants sont conçus pour afficher des sections distinctes sur la même page, selon la structure de l’application.

Il s’agit du composant de modèle que vous pouvez utiliser sur la page de la barre latérale. Il détermine ce qui est affiché sur cette page.

De même, le composant carte peut également être inclus sur la page principale et décide du contenu qui y apparaît.

Ensuite, nous avons connecté cette barre latérale et cette page principale dans la mise en page pour les présenter sur la page d’accueil.

Modification de la disposition des racines pour les itinéraires parallèles :

L’ajustement de la disposition racine pour les itinéraires parallèles permet à votre application d’organiser diverses sections ou chemins au sein d’une seule page, en présentant la barre latérale et le contenu principal ensemble dans une zone de page avec d’autres contenus.

J’explorerai des concepts plus avancés en matière de routage parallèle dans Next.js dans le prochain segment. Cela impliquera une exploration approfondie du routage parallèle, en mettant l’accent sur le chargement et la gestion des erreurs. La deuxième partie de la série sera consacrée à l’exploration du routage parallèle Next.js pour les expériences de chargement et d’erreur.

Pour accéder au blog de la partie 2, veuillez visiter : Routage parallèle Next.js pour des expériences de chargement et d’erreur uniques