L'application Next.js déployée sur Vercel restitue du contenu spécifique localement mais ne parvient pas à le restituer dans la version de production

Question

J'ai une application Web construite à l'aide de Next.JS et Firebase et déployée sur Vercel. Tout fonctionnait bien jusqu'à récemment, lorsque j'ai ajouté une barre de navigation inférieure avec sa position définie sur statique, bottom:0.

Dans la barre de navigation inférieure, j'affiche une icône et un texte. Bien qu'il se soit bien chargé dans localhost (en utilisant npm run dev), j'ai réalisé que le contenu de la navigation inférieure ne s'afficherait pas dans la version de production déployée sur Vercel. Seul le conteneur de navigation inférieur (ou div) est rendu dans les versions de production. Le contenu interne (icônes et texte) ne sera pas rendu.

Lorsque j'ai vérifié à l'aide de Chrome DevTools, le contenu interne manquant n'est pas apparu sous Elements dans la version déployée, mais il est apparu sous Elements sur localhost. J'ai également essayé le plugin React Components avec le même résultat.

Est-ce courant ? Y a-t-il un moyen de résoudre ?

Vous trouverez ci-dessous une capture d'écran montrant l'icône et le texte (lignes 37 à 40)

Vous trouverez ci-dessous une image de la barre de navigation inférieure montrant le contenu interne sur localhost

Ci-dessous, une image de la barre de navigation inférieure, non affichéecontenu interne déployé sur la version de production de Vercel

Answer 1

Avez-vous essayé de l'exécuter localement npm run build avant de le pousser vers Vercel ? Parce que dans Vercel, il exécutera le build pour collecter des données, générer des pages statiques... Essayez de l'exécuter, je pense qu'il affichera une erreur