Search code examples
reactjsnext.jsvercel

Next.js app deployed on Vercel rendering certain contents locally but not rendering them in production build

I have a web application built with Next.JS and Firebase and deployed on Vercel. Everything works fine until lately when I added a bottom navbar with a position set to static, and bottom: 0.

Inside the bottom navbar, I am rendering an Icon and a Text. While it gets loaded normally in localhost (using npm run dev), I realized that the content of the bottom nav does not get rendered in the production build deployed to Vercel. Only the bottom nav container (or div) gets rendered in the production build. The inner content (an Icon and Text) does not render.

When I inspected using Chrome DevTools, the missing inner content did not show under Elements for the deployed version, but it shows under Elements for localhost. I also tried the React Components plugin, with the same results.

Is this a common occurrence and is there a way to fix this?

Below is an image of the screenshot showing the Icon and Text (lines 37 - 40)

Icon and Text to be rendered inside the Bottom Nav

Below is an image of the Bottom Navbar showing the inner content on localhost Icon and Text renders properly in Bottom Nav when running on localhost

Below is an image of the Bottom Navbar not showing the inner content on the production build deployed to Vercel Icon and Text does not render at all in Bottom Nav when running on Vercel

Solution

  • Do you try to run npm run build in the local before push it up to Vercel? Because in Vercel it will run build for collect the data, generate static pages,.... Try to run it and I think it will show the error