Next Js : Le routeur app en pratique

Lorsque le nouveau routeur app est apparu dans Next JS, j'ai mis à jour mon site web pour l'utiliser. Je voulais comprendre de première main comment il fonctionne. Je voulais comprendre les changements et savoir s'ils en valaient la peine.

J'ai déjà parlé des composants serveur React en théorie. Ici, j'aimerais passer en revue quelques leçons pratiques que j'ai apprises en codant.

Pour l'instant, je vais me concentrer sur les bases : comment fonctionne le routeur app. Il y a beaucoup plus à couvrir, comme les fonctionnalités SEO, la traduction, et la gestion du contenu. Je divise cela parce que j'aimerais faire court, mais je couvrirai cela plus tard.

Voici donc en quoi le routeur app diffère du routeur de répertoires de pages. Plongeons dans le vif du sujet.

Les bases du routeur app

Tout d'abord, comme vous le savez peut-être, le routeur app utilise le système de fichiers du répertoire app pour lier une URL à des fichiers spécifiques du système de fichiers. C'était également le cas pour le routeur du dossier pages.

Commençons par les bases : Disons que j'ai un répertoire blog/ qui contient un fichier page.tsx La première chose à noter ici est que le fichier est appelé "page", et non pas "index".

Maintenant, quand je navigue vers le chemin blog/ de mon site web, le composant à l'intérieur du fichier page.tsx sera affiché. C'est la même chose que pour le routeur pages.

Cependant, dans le routeur pages, vous pouvez aussi utiliser les noms de fichiers. Par exemple, vous pourriez avoir un a-propos.tsx qui correspondrait à l'URI /a-propos. Cela ne fonctionne plus dans le routeur app.

Au lieu de penser en fichiers et en dossiers, il faut penser uniquement en dossiers.

Le routeur app permet d'avoir des fichiers spécialisés supplémentaires dans chaque répertoire, qui rajoutent des fonctionnalités. Par exemple, je peux avoir un fichier pour gérer les erreurs, un pour la mise en page ou l'interface de chargement.

Maintenant, que peut faire d'autre le routeur app ?

Les routes dynamiques

Dans mon exemple, le dossier blog a un nom fixe. Next supporte aussi les dossiers et sous-dossiers avec des noms dynamiques, qui correspondent à des routes dynamiques. Ils utilisent une notation entre crochets. Permettez-moi de vous expliquer avec un exemple.

Dans mon cas, le répertoire blog/ a un dossier appelé tag, un autre appelé category, et un troisième appelé [slug], entre crochets. Cela signifie que blog/tag/ correspondra au sous-dossier tag, et que blog/category/ correspondra au sous-dossier category. Mais tout autre chemin qui commence par blog/ renverra au dossier [slug].

Quand il y a un chemin dynamique, le routeur passe les valeurs du paramètre au composant dans le fichier page.tsx, en utilisant une propriété params.

Par exemple, regardons le fichier page.tsx dans le dossier [slug] de mon dossier blog. Ici, l'objet params contient un membre slug (et aussi un membre lang parce que mon site web est multilingue).

En utilisant la valeur des paramètres slug et lang, je peux alors déterminer quel article a été demandé et le récupérer :

(Je n'entrerai pas dans les détails de la fonction findPostBySlug car elle n'est pas spécifique au routeur app/ et dépend de la manière dont vous récupérez votre contenu).

Gestion des erreurs et des redirections

Gestion des erreurs 404

Bien sûr, s'il n'y a pas de contenu correspondant, je peux simplement renvoyer une erreur. Comme ma page est un composant serveur React, c'est simple : Je commence par importer la fonction notFound de next/navigation. Ensuite, si je n'ai pas trouvé le contenu, je renvoie un appel à la fonction notFound.

Gestion des redirections

Dans mon cas, je veux aussi pouvoir déprécier le contenu et rediriger vers de nouvelles pages. Comment faire ?

Tout d'abord, j'importe la fonction redirect de next/navigation. Ensuite, si mon contenu a une URL de redirection, je redirige vers elle.

Répertoires entre parenthèses

Un autre point qu’il faut soulever, et qui m'a causé un peu fil à retordreau début, est que vous pouvez également définir un répertoire avec un nom entre parenthèses.

Cela permet d'organiser votre code mais n'a pas d'impact sur le routage. Ainsi, par exemple, si vous voulez regrouper tous vos éléments de commerce électronique, vous pouvez créer un dossier (e-commerce). Alors (par exemple) le dossier (e-commerce)/courses renverrait à l'URL courses/ (et non à e-commerce/courses).

Le fichier routeur

Il y a encore beaucoup à découvrir. Dans certains cas, la documentation est encore en cours d'écriture ! Une chose que je voulais souligner, cependant, c'est qu'au lieu du fichier page.tsx, vous pouvez avoir un fichier route.ts. Cela vous permet de coder un comportement de bas niveau où vous spécifiez exactement ce qui se passe quand une requête atteint la route avec un verbe HTTP spécifique.

Cela vous permet d'écrire des API mais aussi du contenu autre que des pages, comme un flux RSS.

Maintenant, il y a plus à couvrir concernant le routeur app.

Tout d'abord, ses fonctionnalités SEO , comment gérer les métadonnées, créer des sitemaps, et le fichier robots. 

Et deuxièmement, comment traduire les sites web Next JS. Parce que toutes mes bibliothèques préférées utilisent des hooks côté client qui ne fonctionnent pas dans le répertoire app, j'ai dû coder tout ça moi meme.