Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Next.js 13 a introduit un nouveau système de routage utilisant le répertoire de l'application. Next.js 12 fournissait déjà un moyen simple de gérer les itinéraires via des itinéraires basés sur des fichiers. L'ajout d'un composant au dossier de pages en ferait automatiquement une route. Dans cette nouvelle version, le routeur basé sur le système de fichiers est livré avec une configuration intégrée pour les mises en page, les modèles de routage imbriqué, une interface utilisateur de chargement, la gestion des erreurs et la prise en charge des composants serveur et du streaming.

Cet article explique ces nouvelles fonctionnalités et pourquoi elles sont importantes.

Premiers pas avec Next.js 13

Créez votre propre projet Next.js 13 en exécutant la commande suivante dans le terminal.

npx créer-suivant-app@latest next13 --application-expérimentale
instagram viewer

Cela devrait créer un nouveau dossier appelé next13 avec le nouveau répertoire de l'application.

Comprendre le nouveau répertoire d'applications

Next.js 12 a utilisé le pages répertoire pour le routage, mais il est remplacé par le application/ répertoire dans Next.js 13. Le page/ Le répertoire fonctionne toujours dans Next 13 pour permettre une adoption incrémentielle. Vous devez seulement vous assurer de ne pas créer de fichiers dans les deux répertoires pour le même itinéraire car vous obtiendrez une erreur.

Voici la structure actuelle du répertoire de l'application.

Dans le répertoire de l'application, vous utilisez des dossiers pour définir des itinéraires, et les fichiers à l'intérieur de ces dossiers sont utilisés pour définir l'interface utilisateur. Il existe aussi des fichiers spéciaux comme :

  • page.tsx - Le fichier utilisé pour créer l'interface utilisateur pour un itinéraire particulier.
  • mise en page.tsx - Il contient la définition de la mise en page de l'itinéraire et peut être partagé sur plusieurs pages. Ils sont parfaits pour les menus de navigation et les barres latérales. Lors de la navigation, les mises en page conservent l'état et ne sont pas restituées. Cela signifie que lorsque vous naviguez entre des pages qui partagent une mise en page, l'état reste le même. Une chose à noter est qu'il doit y avoir une mise en page supérieure (la mise en page racine) contenant toutes les balises HTML et body partagées dans l'ensemble de l'application.
  • modèle.tsx - Les modèles sont comme des mises en page, mais ils ne conservent pas l'état et sont restitués à chaque fois qu'ils sont utilisés pour créer une page. Les modèles sont parfaits pour les situations où vous avez besoin de certains codes pour s'exécuter chaque fois que le composant est monté, par exemple, des animations d'entrée et de sortie.
  • erreur.tsx - Ce fichier est utilisé pour gérer les erreurs dans l'application. Il encapsule une route avec la classe de limite d'erreur React de sorte que lorsqu'une erreur se produit dans cette route ou ses enfants, il tente de s'en remettre en affichant une page d'erreur conviviale.
  • chargement.tsx - L'interface utilisateur de chargement est instantanément chargée à partir du serveur lorsque l'interface utilisateur de l'itinéraire se charge en arrière-plan. L'interface utilisateur de chargement peut être un spinner ou un squelette d'écran. Une fois le contenu de la route chargé, il remplace l'interface utilisateur de chargement.
  • introuvable.tsx - Le fichier introuvable est rendu lorsque Next.js rencontre un Erreur 404 pour cette page. Dans Next.js 12, vous devez créer et configurer manuellement une page 404.
  • tête.tsx - Ce fichier spécifie la balise d'en-tête du segment de route dans lequel il est défini.

Comment créer une route dans Next.js 13

Comme mentionné précédemment, les routes sont créées à l'aide de dossiers dans le application/ annuaire. Dans ce dossier, vous devez créer un fichier appelé page.tsx qui définit l'interface utilisateur de cette route spécifique.

Par exemple, pour créer un itinéraire avec le chemin /products, vous devrez créer un app/produits/page.tsx déposer.

Pour les itinéraires imbriqués comme /products/sale, imbriquez les dossiers les uns dans les autres de sorte que la structure des dossiers ressemble à app/produits/vente/page.tsx.

Outre une nouvelle méthode de routage, d'autres fonctionnalités intéressantes prises en charge par le répertoire d'applications sont les composants de serveur et le streaming.

Utilisation des composants serveur dans le répertoire d'applications

Le répertoire de l'application utilise des composants serveur par défaut. Cette approche réduit la quantité de JavaScript envoyé au navigateur lorsque le composant est rendu sur le serveur. Cela améliore les performances.

Voir cet article sur différentes méthodes de rendu dans Next.js pour une explication plus approfondie.

Un composant serveur signifie que vous pouvez accéder en toute sécurité aux secrets de l'environnement sans qu'ils ne soient exposés côté client. Par exemple, vous pouvez utiliser processus.env.

Vous pouvez également interagir directement avec le backend. Il n'est pas nécessaire d'utiliser getServerSideProps ou getStaticProps car vous pouvez utiliser async/wait dans le composant serveur pour récupérer des données.

Considérez cette fonction asynchrone qui récupère les données d'une API.

asynchronefonctiongetData() {
essayer{
constante res = attendre aller chercher(' https://api.example.com/...');
retour res.json();
 } attraper(erreur) {
lancernouveauErreur('Impossible de récupérer les données')
 }
}

Vous pouvez l'appeler directement sur une page comme suit :

exporterdéfautasynchronefonctionPage() {
constante données = attendre getData();
retour<div>div>;
}

Les composants serveur sont parfaits pour le rendu de contenu non interactif. Si tu as besoin de utiliser les crochets React, des écouteurs d'événements ou des API de navigateur uniquement, utilisez un composant client en ajoutant la directive "use client" en haut du composant avant toute importation.

Composants de diffusion en continu incrémentiels dans le répertoire d'applications

Le streaming fait référence à l'envoi progressif de parties de l'interface utilisateur au client jusqu'à ce que tous les composants soient rendus. Cela permet à l'utilisateur de visualiser une partie du contenu pendant que le reste est rendu. Pour offrir aux utilisateurs une meilleure expérience, rendez un composant de chargement comme un spinner jusqu'à ce que le serveur termine le rendu du contenu. Vous faites cela en utilisant de deux manières:

  • Créer un chargement.tsx fichier qui sera rendu pour l'ensemble du segment de route. 
exporterdéfautfonctionChargement() {
retour<p>Chargement...p>
}
  • Envelopper des composants individuels avec la limite React Suspense et spécifier une interface utilisateur de secours. 
importer { Le suspense } depuis"réagir";
importer { Des produits } depuis"./Composants";
exporterdéfautfonctionVente() {
retour (
<section>
Des produits...
}>
<Des produits />
Le suspense>
section>
 );
}

Avant que le composant Produits ne soit rendu, un utilisateur verra "Produits…". C'est mieux qu'un écran vide en termes d'expérience utilisateur.

Mise à niveau vers Next.js 13

Le nouveau répertoire d'applications est définitivement une amélioration par rapport au répertoire des pages précédentes. Il inclut des fichiers spéciaux comme la mise en page, l'en-tête, le modèle, l'erreur, l'introuvable et le chargement qui gèrent différents états lors du rendu d'un itinéraire sans avoir besoin d'une configuration manuelle.

De plus, le répertoire d'applications prend également en charge la diffusion en continu et les composants de serveur, ce qui améliore les performances. Bien que ces fonctionnalités soient intéressantes pour les utilisateurs et les développeurs, la plupart d'entre elles sont actuellement en version bêta.

Cependant, vous pouvez toujours effectuer une mise à niveau vers Next.js 13 car le répertoire de pages fonctionne toujours, puis commencez à utiliser le répertoire de l'application à votre propre rythme.