Die auf Vercel bereitgestellte Next.js-App rendert bestimmte Inhalte lokal, kann sie jedoch im Produktions-Build nicht rendern

Question

Ich habe eine Web-App, die mit Next.JS und Firebase erstellt und auf Vercel bereitgestellt wird. Alles funktionierte einwandfrei, bis ich vor kurzem eine untere Navigationsleiste hinzugefügt habe, deren Position auf statisch, unten:0, eingestellt war.

In der unteren Navigationsleiste rendere ich ein Symbol und einen Text. Während es in localhost einwandfrei geladen wurde (mit npm run dev), wurde mir klar, dass der Inhalt der unteren Navigation im für Vercel bereitgestellten Produktions-Build nicht gerendert werden konnte. In Produktionsbuilds wird nur der untere Navigationscontainer (oder Div) gerendert. Interne Inhalte (Symbole und Text) werden nicht gerendert.

Als ich mit den Chrome DevTools überprüft habe, wurde der fehlende interne Inhalt nicht unter „Elemente“ in der bereitgestellten Version angezeigt, wohl aber unter „Elemente“ auf localhost. Ich habe auch das React Components-Plugin mit den gleichen Ergebnissen ausprobiert.

Ist das häufig? Gibt es eine Lösung?

Unten ist ein Screenshot, der das Symbol und den Text zeigt (Zeilen 37 – 40)

Unten sehen Sie ein Bild der unteren Navigationsleiste, das den internen Inhalt auf localhost zeigt

Unten sehen Sie ein Bild der unteren Navigationsleiste, ohne den internen Inhalt der für Vercel bereitgestellten Produktionsversion

Answer 1

在将其推送到 Vercel 之前，您是否尝试在本地运行 npm run build ？因为在 Vercel 中它将运行构建来收集数据、生成静态页面...... 尝试运行一下，我想它会显示错误