Next.js offre un système de routage basé sur le système de fichiers d'un projet. Cela signifie que les routes sont déterminées par la structure des dossiers et des fichiers dans le répertoire pages. Dans Next.js le routage est catégorisé en deux grands types : statique et dynamique. Ces deux approches offrent des moyens flexibles pour gérer les routes dans une application, mais elles servent des objectifs différents et fonctionnent de manière distincte.
Le routage statique
Le routage statique fait référence à la création de routes qui correspondent directement à des fichiers dans le dossier pages. Chaque fichier représente une route spécifique dans votre application. Par exemple, un fichier nommé about.tsx dans le dossier pages crée automatiquement une route /about.
Le routage dynamique
Le routage dynamique, en revanche, permet de définir des routes qui incluent des paramètres variables. Cela est réalisé en nommant les fichiers ou dossiers avec des crochets, comme [id].tsx. Cette méthode est utilisée pour afficher différents contenus en fonction des paramètres passés dans l'URL.
Comparaison des deux type de routage
- Utilisation : Le routage statique est utilisé pour des pages qui ne changent pas en fonction des données de l'utilisateur ou d'autres variables dynamiques. Le routage dynamique est utilisé pour des pages qui doivent changer en fonction des données passées dans l'URL.
- Performance : Les deux peuvent être performants, mais le routage statique a l'avantage de pouvoir pré-générer des pages, donc cela réduit grandement le temps de chargement initial. Le routage dynamique, lorsqu'il est combiné avec getStaticPaths, peut également pré-générer des pages pour une performance optimisée.
- Complexité : Le routage dynamique est généralement plus complexe à gérer en raison de la nécessité de gérer les données dynamiques et les paramètres d'URL.
Exemple d'implémentation
Le code source de cet exemple est sur mon github
Cette exemple est une application Next.js avec TypeScript qui illustre à la fois le routage statique et dynamique. Cette application est construite à l'aide de trois pages:
- Une page d'accueil statique (/).
- Une page à propos statique (/about).
- Une page d'article dynamique (/posts/[id]), où [id] est un paramètre dynamique qui permet d'afficher le nom entrez par l'utilisateur dans la page d'accueil.
La structure de ce projet ressemble à ceci : les pages statiques se trouvent dans le dossier pages/ et la page dynamique se trouve dans le dossier pages/posts/. Le projet reconnaît la page dynamique en encadrant le nom de cette page avec des crochets [ ].
Ceci est le code pour la page principale de l'application web. Elle inclut une redirection de la page statique à la ligne 15 et une redirection vers une page dynamique avec son paramètre entre les lignes 25 et 27.
Ceci est le code de la page À propos, la page statique qui affiche seulement un message d'information de la page et elle contient aussi un bouton pour retourner à la page d'accueil.
Ceci est le code de la page dynamique. Elle utilise le hook useRouter de Next.js pour accéder à l'objet router, qui contient diverses propriétés de la route actuelle, y compris les paramètres de requête. Le paramètre id est extrait de l'objet router.query, représentant ainsi la partie dynamique de l'URL.
Voici le résultat de ces implémentations dans le navigateur :
Ceci est la page principale de mon site ; lorsque l'on clique sur le texte bleu, 'Direction Statique', cela nous dirige vers la page statique suivante :
Par la suite, lorsqu'on entre un nom dans la zone de saisie et que l'on clique sur le bouton de redirection, cela nous redirige vers la page dynamique en utilisant cette URL : http://localhost:3000/posts/Bob%20Marley. Cette page ressemble donc à ceci dans le navigateur :
Source
Membres de l'équipe Vercel, « Routing Fundamentals », Next.js, https://nextjs.org/docs/app/building-your-application/routing (Page consultée le 22 février 2024).
Membres de l'équipe Vercel, « Linking and Navigating », Next.js, https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating (Page consultée le 22 février 2024).
Membres de l'équipe Vercel, « Dynamic Routes », Next.js, https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes (Page consultée le 22 février 2024).
Jacobs, David, « Static vs. dynamic routing: What is the difference? », TechTarget, https://www.techtarget.com/searchnetworking/answer/Static-and-dynamic-routing#:~:text=Static%20routing%20doesn%27t%20use,-IS%2C%20to%20adjust%20routes. (Page consultée le 22 février 2024).
Commentaires