Can't Navigate from App Router to Pages Router in Dev Mode

[Henrixounez]

Link to the code that reproduces this issue

https://github.com/Henrixounez/repro-next-navigating-app-to-pages-in-dev-mode

To Reproduce

1. Start the application in development (npm run dev)
2. Access the Home page in App Router /
3. Click on links that should redirect to the About page in Pages Router
4. It doesn't work and reloads the page (and in the terminal it tries to compile the /about page but we are redirected back to /)

Screen.Recording.2024-12-19.at.11.23.28.mov

👉 However it works when the application is built and started

Current vs. Expected behavior

I expect to be redirected to the /about page when clicking on a <Link/> or router.push with href to /about

<Link href="/about">
  To about page (Link)
</Link>

<button onClick={() => router.push("/about")}>
  To about page (Router)
</button>

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:34 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.17
  pnpm: 9.6.0
Relevant Packages:
  next: 15.1.1 // Latest available version is detected (15.1.1).
  eslint-config-next: 15.1.1
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response