next/router fails to fetch data (getServerSideProps) when dynamic route contains an @ (at) symbol

[visnup]

trafficstars

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: arm64
  Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: 7.8.0
Relevant packages:
  next: 12.2.4-canary.9
  eslint-config-next: 12.2.3
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Safari 15.6 (17613.3.9.1.5), Chrome 104.0.5112.79 (Official Build) (arm64)

How are you deploying your application? (if relevant)

next start, Vercel

Describe the Bug

When using router.replace(router.asPath) to "reload" a page, data fetching/getServerSideProps isn't called for a dynamic route containing an @ (at symbol) and in production.

In development, it works. If the dynamic route doesn't contain an @, it works. If the route isn't dynamic (and instead in a file like @foo.tsx), it works. Before 12.1.7-canary.36, it works (aka bug was introduced in 12.1.7-canary.36).

Expected Behavior

data fetching/getServerSideProps should still be called. In all other cases, it continues to be called, just not this very specific case.

Link to reproduction

https://codesandbox.io/s/router-at-0vx48i-0vx48i?file=/pages/%5Bslug%5D.tsx

To Reproduce

The above code sandbox is deployed at https://csb-0vx48i.vercel.app/@slug

1. Create a page at pages/[slug].js:

import Link from "next/link";
import { useRouter } from "next/router";

export function getServerSideProps() {
  return { props: { value: Math.random() } };
}

export default function Slug({ value }) {
  const router = useRouter();
  return (
    <div>
      <p>
        Clicking on the link or button below should call `getServerSideProps`
        and load a new random value.
      </p>
      <p>
        <Link href="/@slug">
          <a>Link {value}</a>
        </Link>
      </p>
      <p>
        <button onClick={() => router.replace(router.asPath)}>
          Replace {value}
        </button>
      </p>
    </div>
  );
}

2. next build; next start
3. Navigate to https://localhost:3000/@foo
4. Click on the link or button one or two times: a new random value will not be generated

[visnup]

This also fails if the path contains a , (comma). Both @ and , are characters that get re-encoded as %40 and %2c when passed through route.push({ query }).

[visnup]

Has anyone had a chance to look at this?

[visnup]

Duplicates #38581

[ijjk]

Closing as a duplicate per above

[github-actions[bot]]

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