I have recently modified an ecommerce-based Shopify app running on NextJs v14.2.4. However, I am running in a very strange problem where only after vercel deployment all of the navigation routes are by default redirecting to “404 Not Found” page – not-found.tsx (except login and signup pages located under (auth) directory below).

This app is built on an open-source template shared here, and I am struggling to correctly publish it on Vercel since yesterday. Please note that the NextJs version given in this template has been upgraded to 14.2.4 and everything runs/builds perfectly fine on the localhost without any issue.

To get started, here is the folder structure I have:

Here is the build log from Vercel (build is successful but there are 404 errors in logs below):

Here is the warning 404 in the logs:

And lastly here is the 404 page (gets triggered from not-found.tsx file):

What I tried:

I am researching and trying many various alternatives since last night. Here are few of them listed:

• added vercel.json with these options:

  {
  “rewrites”: [
  { “source”: “/(.*)”, “destination”: “/” },
  ]
  }

• toggled trailing_slash option to true (it was false by default) in next.config.js

• tried deploying the entire project on netlify to check if it works there, but it doesn’t

• reading about server side and client-side routing

Thank you for going through my question.