%40 for escaping @ in route name doesn't work in the app router

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.5.0: Thu Jun  8 22:21:34 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8112
    Binaries:
      Node: 20.3.1
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: 8.6.5
    Relevant Packages:
      next: 13.4.10-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    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

N/A

To Reproduce

Couldn't find a similar issue, but I feel like this problem should've already been reported somewhere. If you find an issue of which this issue is a duplicate, do tell.

I want to add /@test to my website. But @ is already taken by parallel routing, so I need to find a way to escape it. Attempts (all are in dev mode):

1. app/@test/page.tsx → not working, for obvious reasons

2. app/%40test/page.tsx

   I tried to escape @ using URL encoding (similar to the _ case), but this doesn't work either. /%40test does work, but /@test doesn't.

3. app/[dynamic]/page.tsx with generateStaticParams to { dynamic: "@test" } and dynamicParams = false

   This works, but why do I need to do so much just to get /@test?

4. app/some/route/page.tsx then rewrite /@test to it

   This works, but again, this is too much work.

Related question in the Next.js Discord server.

Describe the Bug

Too much effort is needed for something as trivial as adding a route with @ in the path.

Expected Behavior

(2) above should work.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

In this issue, only next dev. I didn't try prod mode.

_DX-1763

Reproduce the issue with an app/%40test/page.tsx route using next dev, comparing it with the working /%40test URL and the failing /@test URL. Start by tracing the App Router's handling of percent-encoded route names. Done means the encoded route file serves requests to /@test without requiring a dynamic route or rewrite.