Créez un indicateur de chargement ou une barre de progression dans le répertoire de votre application dans NextJS : un guide étape par étape

Question

J'ai développé une grande application web en utilisant NextJS 13, la première version utilisant Pages Router.

Après avoir terminé presque tout le site Web, j'ai migré avec succès vers le Répertoire des applications.

Cette migration ne consiste pas essentiellement à mettre à niveau de nouvelles fonctionnalités de routage, mais je souhaite modifier les gros fichiers compilés SASS importés dans _app.tsx pour obtenir de meilleurs temps de chargement du site Web.

Comme le chargement était un gros problème pour ce projet, j'ai commencé à utiliser MUI pour styliser chaque composant, qui n'était qu'une solution CSS-in-JS.

Mais le problème que j'ai trouvé dans le nouveau répertoire de l'application concerne les événements du routeur. J'ai un indicateur de barre de progression du package next-n-progress mais maintenant cela ne fonctionne pas, l'utilisateur clique sur le lien et l'application doit prendre un peu de temps pour charger la page suivante.

Ce problème n'est pas un problème pour les pages SSR car j'ai placé le fichier loading.tsx à la racine de chaque page, mais le problème existe toujours pour les pages avec configuration client.

Tels que la page d'accueil, la connexion et l'inscription, etc.

J'ai essayé un autre package de barre de progression qui prend en charge le nouveau répertoire d'application, mais il ne s'est pas affiché du tout.

Voici le composant responsable de la mise en page : Lien permanent du composant GitHub

Existe-t-il un moyen de créer une nouvelle barre de progression en utilisant cette nouvelle mise à jour NextJS 13 ?

Answer 1

Mise à jour

J'ai trouvé qu'il s'agissait d'un problème courant dans le nouveau répertoire d'applications Next.js 13, et il existe quelques problèmes ouverts qui y sont liés, y compris plusieurs problèmes rencontrés dans les comportements du routeur d'application.

Donc, j'ai réussi à utiliser next-n-progress, mais j'ai remarqué que cela ne fonctionne qu'en en utilisant le composant lien, car il déclenche le chargement pour afficher la barre de progression, et il a une prélecture pour tous les liens présents dans la fenêtre d'affichage. les avantages de.

Donc, en attendant, pour les cas de navigation simples, continuez à utiliser Link au lieu de Router.push.