Vercel Not Navigating Correctly Between Pages After Deployment (Works Locally)

Question

Issue Description:

I’m experiencing issues with navigation between pages after deploying my project on Vercel. The project works perfectly locally, and I can navigate between pages without any problems. However, after deploying to Vercel, some pages do not load or result in 404 errors when navigating.

Project Links:

GitHub Repository

https://github.com/FadyFathey/digitalize-v.2.git

Vercel Deployment:

https://digitalize-v-2.vercel.app/

Project Structure:

DIGITALIZE-V.2
├── AboutUs
│   └── html
│       └── digitalize
│           ├── assets
│           └── about.html
├── blogs
│   └── html
│       └── digitalize
│           ├── assets
│           └── blogs.html
├── blogs-details
│   └── html
│       └── digitalize
│           ├── assets
│           └── blog-details.html
├── contact us
│   └── html
│       └── digitalize
│           ├── assets
│           └── contact.html
├── ourServices
│   └── html
│       └── digitalize
│           ├── assets
│           └── service.html
└── vercel.json

Current vercel.json Configuration:

{
  "version": 2,
  "rewrites": [
    {
      "source": "/about",
      "destination": "/AboutUs/html/digitalize/about.html"
    },
    {
      "source": "/contact",
      "destination": "/contact us/html/digitalize/contact.html"
    },
    {
      "source": "/ourServices",
      "destination": "/ourServices/html/digitalize/service.html"
    },
    {
      "source": "/blogs",
      "destination": "/blogs/html/digitalize/blogs.html"
    },
    {
      "source": "/blog-details",
      "destination": "/blogs-details/html/digitalize/blog-details.html"
    },
    {
      "source": "/(.*)",
      "destination": "/html/digitalize/index.html"
    }
  ],
  "cleanUrls": true,
  "trailingSlash": false
}

What I’ve Tried So Far:

Modified vercel.json: I tried different configurations for the rewrites, but navigation between pages still doesn’t work as expected. Verified Folder Structure: I confirmed that the folder structure on Vercel matches the local structure exactly. Tested Links: Links work locally, but after deployment, Vercel does not recognize some pages.

I tried removing all rewrites except for "source": "/(.*)" as you recommended, but I’m still facing the same issue where the pages don’t navigate correctly and some routes return 404 errors

Question:

How can I configure vercel.json to ensure that navigation between pages works correctly after deployment? Are there specific rewrite configurations I’m missing to fix this navigation issue?

Have you tried removing all rewrites apart from "source": "/(.*)",? — kieranlul
– kieranlul, Commented Oct 30, 2024 at 11:23
@kieranlul I tried removing all rewrites except for "source": "/(.*)" as you recommended, but I’m still facing the same issue where the pages don’t navigate correctly and some routes return 404 errors. If possible, could we discuss this privately? I can provide temporary access to my Vercel account if needed. — fady fathey
– fady fathey, Commented Oct 30, 2024 at 12:56

kieranlul · Accepted Answer · 2024-10-30 13:29:43Z

0

Please try this as your vercel.json and let me know how it goes.

{
    "rewrites": [
      {
        "source": "/(.*)",
        "destination": "html/digitalize/index"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false
  }

edited Oct 30, 2024 at 13:29

answered Oct 30, 2024 at 11:20

kieranlul

916 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

kieranlul Over a year ago

You can add "version": 2, at the top if you would like as well. The main change is the removal of .html at the end the the destination path.

fady fathey Over a year ago

kieranlul same error 404 404: NOT_FOUND Code: NOT_FOUND ID: fra1:fra1::sd9lk-1730297702194-1ba8354418c1 @kieranlul

fady fathey Over a year ago

I'm still experiencing the same error after updating the vercel.json as recommended. If you're open to it, would you be available for a quick meeting to help troubleshoot this live? I'm available at 9 PM if that works for you. @kieranlul

kieranlul Over a year ago

Try removing ../.. in your hrefs so it is just <a href="/AboutUs/html/digitalize/about.html". I have tested on my sandbox with your setup and all working.

fady fathey Over a year ago

same error : 404: NOT_FOUND Code: NOT_FOUND ID: fra1:fra1::zqfnx-1730298645962-475e977962db @kieranlul

|

Collectives™ on Stack Overflow

Vercel Not Navigating Correctly Between Pages After Deployment (Works Locally)

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related