[NEXT-1163] App dir dynamic routes treats '%2F' in page params as '/' when deployed to Vercel

[ebakken]

Verify canary release

• [X] 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

_NEXT-1163

[ebakken]

I'd say treating an escaped character as unescaped is very unexpected.

I stumbled upon this issue after putting an encoded file path in the URL. Now I have difficulty reconstructing the original file path. The params array I'm getting needs to be joined by either / or %2F, but it's unambiguous which one.

[Xexr]

No updates on this? I'd like to remove the hacky code I have in place to handle this.

[JesseKoldewijn]

@timneutkens hey man, sorry for the ping but is this something you guys are looking at by chance?

[robbert229]

Some other observations on this issue:

If I turn on trailingSlash in next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  trailingSlash: true,
};

module.exports = nextConfig;

and then try to go to a url with some url encoded characters in it, but no trailing slash the "trailing slash version" of the url is incorrectly decodes the url encoded characters.

• https://localhost/foo%2Fbar/baz -> https://localhost/foo/bar/baz/
• https://localhost/foo%28bar https://localhost/foo(bar/

It looks like there is some sort of defect deep in the routing layer.

[eggers]

I'm seeing this same problem with pages based parameter routing. Is there any update on this?

[skelouse]

Confirmed issue still on latest canary: 14.0.5-canary.8

[EvanLovely]

Such a weird bug - glad to know I'm not the only one! Anybody tried using Middleware to fix it? What's people's favored workarounds?

[nifklas]

Confirmed issue still on v14.2.2.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[elguarir]

having this issue as well.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!