Only getting Data after Refreshing My Page

[jaimin-devx]

I’m experiencing issues with my e-commerce project hosted on Vercel. The project uses Next.js 14 for the frontend and AWS Lambda for the backend. I’m encountering the following problems:

1. 404 Errors on Blog Pages:

• When navigating from the home page to certain blog pages, I receive a 404 error.
• However, refreshing the page loads the content correctly.
• And the interesting part is that, this issue does not occur in local builds or even when deployed on Amazon ECS.

404 error when navigating from home page to blog page:

After refreshing the page:

Here when i see the vercel logs, it giving me this error:

2. Missing Header and Footer:

• On some product and collection pages, the header and footer (defined in the layout file) are not displayed.
• Refreshing these pages makes the header and footer appear.

Additional Information:

• The project uses dynamic routes with pre-built blog pages.
• These issues are specific to the Vercel deployment and do not occur locally or on other hosting platforms.

Could you please help investigate why these issues are occurring specifically on Vercel? Any guidance on resolving these problems would be greatly appreciated.

[jaimin-devx]

I think, I might found the solutions. The problem appears to have been resolved by removing the following configuration from my next.config.js file:

i18n: { locales: ["en"], defaultLocale: "en", },

Since implementing this change, the 404 errors on blog pages and the missing header/footer issues seem to have been resolved. The site is now functioning as expected on the Vercel deployment.

While this solution has addressed the immediate concerns, I would greatly appreciate any insights you could provide on why this configuration was causing issues specifically on Vercel. Understanding the root cause would be valuable for preventing similar problems in the future and for optimizing our deployment strategy.

[pawlean (Pauline P. Narvas)]

Thanks for coming back with your solution!