Vercel にデプロイされた Next.js アプリは特定のコンテンツをローカルでレンダリングしますが、実稼働ビルドではレンダリングできません

Question

Next.JS と Firebase を使用して Web アプリケーションを構築し、Vercel にデプロイしました。 最近、位置を静的なbottom:0に設定して下部ナビゲーションバーを追加したときまで、すべてが正常に動作していました。

下部のナビゲーション バーで、アイコンとテキストをレンダリングしています。 localhost では正常に読み込まれましたが (npm run dev を使用)、Vercel にデプロイされた運用ビルドでは下部ナビゲーションのコンテンツがレンダリングされないことに気付きました。実稼働ビルドでは、下部のナビゲーション コンテナー (または div) のみがレンダリングされます。内部コンテンツ (アイコンとテキスト) はレンダリングされません。

Chrome DevTools を使用して確認したところ、欠落している内部コンテンツはデプロイされたバージョンの Elements の下に表示されませんでしたが、ローカルホストの Elements の下には表示されました。 React Components プラグインも試しましたが、同じ結果が得られました。

これはよくあることですか?解決する方法はありますか？

以下は、アイコンとテキスト (行 37 ～ 40) を示すスクリーンショットです。

以下は、ローカルホストの内部コンテンツを示す下部ナビゲーション バーの画像です。

以下は下部ナビゲーション バーの画像です。 未表示 Vercel の実稼働バージョンにデプロイされた内部コンテンツ

Answer 1

Vercel にプッシュする前に、ローカルで npm run build を実行してみましたか? Vercel ではビルドを実行してデータを収集し、静的ページを生成するためです... 実行してみてください。エラー

が表示されると思います。