[NEXT-1163] App dir dynamic routes treats '%2F' in page params as '/' when deployed to Vercel
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.4.0: Mon Mar 6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64
Binaries:
Node: 19.6.0
npm: 9.4.0
Yarn: 1.22.18
pnpm: 7.27.0
Relevant packages:
next: 13.4.2-canary.5
eslint-config-next: 13.3.4
react: 18.2.0
react-dom: 18.2.0
typescript: 5.0.4
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/eBakken/next-13-page-params
To Reproduce
Clone repo and deploy to Vercel.
It can also be seen here:
https://next-13-page-params.vercel.app/app/foo/bar/foo%2Fbar
Describe the Bug
Dynamic routing in /app directory treats %2F as /.
encodeURIComponent("foo/bar") gives "foo%2Fbar"
But the page params for the URL /foo/bar/foo%2Fbar gives ["foo","bar","foo","bar"] when deployed to Vercel.
See https://next-13-page-params.vercel.app/app/foo/bar/foo%2Fbar
The problem does not appear locally when running yarn dev.
Expected Behavior
I would expect the behavior to be the same as when using /pages: ["foo","bar","foo/bar"].
See https://next-13-page-params.vercel.app/pages/foo/bar/foo%2Fbar
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
Vercel
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked next-13-page-params reproduction and compare the deployed /app and /pages routes using the encoded foo%2Fbar URL. Reproduce the difference locally and on Vercel, then trace the app-directory dynamic route parameter handling; done means the deployed app route preserves foo/bar as one parameter, matching /pages.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100