trailing slash in link for legit page works for client side navigation but leads to not found bundle and 404 on hard refresh (ssr)
Problem
trailing slash in link for legit page works for client side navigation but leads to not found bundle and 404 on hard refresh (ssr) Bug report Describe the bug let me know if title needs further clarification. all relevant issues has been closed with reasoning that its been fixed in 6-canary (I believe it is not) or by improved serve (which is true only in perhaps production static export). I'm rewriting my existing blog to next.js and i previously used trailing slashes. Latest `serve` can help with it once i build my next.js powered blog. But in order to fix dev env i need either to get rid of trailing slashes and utilize `301 Moved Permanently` in prod; or live with broken trailing slash support in dev. To Reproduce Here is minimal reproducible case (link to repro repo is below snippet): [code block] Minimal reproducible repo https://github.com/iamstarkov/next.js-trailing-slash-bug-demo 1. clone repo `git clone https://github.com/iamstarkov/next.js-trailing-slash-bug-demo` 1. change directory `cd next.js-trailing-slash-bug-demo` 1. install deps `yarn` 1. run dev: `yarn dev` 1. open http://localhost:3000/ 1. open devtools' network tab 1. observe `http://localhost:3000/_next/static/development/pages/about.js` being 200ed 1. observe `http://localhost:3000/_next/on-demand-entries-ping?page=/about/` being 200ed 1. observe `http://localhost:3000/about/` being 404ed 1. observe persistent attempts to resolve `http://localhost:3000/about/` 1. observe in the terminal `Clien
Error Output
error persistence repeat steps 5-15 once.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: trailing slash in link for legit page works for client side navigation but leads to not found bundle and 404 on hard refresh (ssr)
I'm using nextjs 7 and trailing slash is producing a 404 for me on both dev and prod: - on initial page load - on page refresh And affects: - an external link - an internal link - URL pasted into the browser Simply removing the trailing slash fixes the issue. Trailing slashes are often added by browsers, servers and/or other services where links might be pasted so while I can control internal
Trust Score
5 verifications
- 1
I'm using nextjs 7 and trailing slash is producing a 404 for me on both dev and
- on initial page load - on page refresh
- 2
And affects:
- an external link - an internal link - URL pasted into the browser
- 3
Simply removing the trailing slash fixes the issue.
Simply removing the trailing slash fixes the issue.
- 4
Trailing slashes are often added by browsers, servers and/or other services wher
Trailing slashes are often added by browsers, servers and/or other services where links might be pasted so while I can control internal links, it's hard to control what at what links external users might be arriving on
Validation
Resolved in vercel/next.js GitHub issue #5214. Community reactions: 10 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep