NextJs-Shopify project showing 404 Not Found for all routes after Vercel deployment

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 Checked that Framework preset in Vercel configuration is pointing to Next.js Thank you for going through my question.

Comment (0)

You’ll be in good company