Next.js app deployed on Vercel renders specific content locally but fails to render them in production build

Question

I have a web application built using Next.JS and Firebase and deployed on Vercel. Everything was working fine until recently when I added a bottom navigation bar with its position set to static, bottom:0.

In the bottom navigation bar, I'm rendering an icon and a text. While it loaded fine in localhost (using npm run dev), I realized that the content of the bottom navigation would not render in the production build deployed to Vercel. Only the bottom navigation container (or div) is rendered in production builds. Internal content (icons and text) will not be rendered.

When I checked using Chrome DevTools, the missing internal content did not show up under Elements in the deployed version, but it did show up under Elements on localhost. I also tried the React Components plugin with the same results.

Is this common? Is there a way to solve?

Below is a screenshot showing the icon and text (lines 37 - 40)

Below is an image of the bottom navigation bar showing the internal content on localhost

Below is an image of the bottom navigation bar, Not shown Internal content deployed to production version of Vercel

Answer 1

Have you tried running npm run build locally before pushing it to Vercel? Because in Vercel it will run the build to collect data, generate static pages... Try running it, I think it will show error