Catch-all Params Encoding on the Edge Runtime

[simonecervini]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.4.0
      npm: 8.12.1
      Yarn: 1.22.19
      pnpm: 8.6.3
    Relevant Packages:
      next: 13.4.13-canary.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/simonecervini/nextjs-issue-with-catch-all

To Reproduce

1. Clone the repo
2. Deploy on Vercel and follow the instructions below. You have to try both locally and in production because you don't get the same results

Describe the Bug

Test case

URL: http://localhost:3000/a/b/c
Expected output: {"params":{"singleParam":"a","slug":["b","c"]},"searchParams":{}}

Results:

• Local output (pnpm dev): {"params":{"singleParam":"a","slug":["b","c"]},"searchParams":{"singleParam":"a","slug":["b","c"]}} ✅

• Local output (pnpm start): {"params":{"singleParam":"a","slug":["b","c"]},"searchParams":{"singleParam":"a","slug":["b","c"]}} ✅

• Production output (Vercel): {"params":{"singleParam":"a","slug":["b%2Fc"]},"searchParams":{"singleParam":"a","slug":["b/c"]}} ❌

Expected Behavior

As written in the "Describe the bug" section, in the last case instead of slug: ["b%2Fc"] you should get slug: ["b", "c"]

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[smaeda-ks]

👋 submitting a PR #58949

[williamli]

Current workaround until the fix above is released:

export default async function Page({
  params: { locale, slug = [''] }
}: {
  params: { locale: string; slug: string[] };
}): Promise<React.JSX.Element> {
  // getting around a bug in next.js: https://github.com/vercel/next.js/issues/53682
  if (slug.length === 1) {
    slug = slug[0].split('%2F');
  }

//...

 }

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.