Query parameters incorrect when navigating from App Router to Pages Router

ledbetterljoshua commented 3 days ago

Link to the code that reproduces this issue

https://github.com/ledbetterljoshua/link-bug-reproduction

To Reproduce

Live Demo

https://link-bug-reproduction.vercel.app/

Repository

https://github.com/ledbetterljoshua/link-bug-reproduction

Steps to reproduce

Start on the home page (App Router)
Click any of the "pages route" links
Observe that regardless of which link you click, you always get the query parameter from the first link (link=1)

Current vs. Expected behavior

Current behavior

Each Link component should navigate to the Pages Router page with its specified query parameter intact:

Clicking "pages route link 1" should navigate to /pages-route?link=1
Clicking "pages route link 2" should navigate to /pages-route?link=2
Clicking "pages route link 3" should navigate to /pages-route?link=3

Actual behavior

First click works correctly (navigates to /pages-route?link=1)
All subsequent clicks also navigate to /pages-route?link=1, ignoring their specified query parameters

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Thu Jun 20 20:38:33 PDT 2024; root:xnu-11215.0.115.501.3~1/RELEASE_ARM64_T8112
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.17
  pnpm: N/A
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

Navigation, Pages Router

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

Vercel (Deployed)

Additional context

Description

When navigating from a page in the App Router to a page in the Pages Router using Next.js Link components, query parameters are not being properly maintained. The first query parameter encountered becomes "sticky" and is used for all subsequent navigations to the Pages Router page, regardless of the actual query parameters specified in the Links and in the DOM.

Additional observations

I tested the v15.0.4-canary.13 version and got the same result.
This issue does not occur in local development. It only occurs on vercel.
This only occurs when navigating from App Router to Pages Router
Links to App Router pages work correctly (query parameters are maintained)
Opening links in new tabs works correctly (query parameters are maintained)
This issue is blocking migration from Pages Router to App Router in our production application

Environment

Next.js version: 15.0.3
React version: 19.0.0-rc-66855b96-20241106
Node.js version: v20.10.0

Notes

This appears to be a client-side navigation issue, as:

Server-side navigation (new tabs) works correctly
The DOM shows the correct href attributes on the links, but the navigation results are incorrect

Would appreciate guidance on whether this is a known issue or if there's a recommended workaround while we gradually migrate from Pages Router to App Router.

laugharn commented 2 days ago

@ledbetterljoshua if you know ahead of time that a URL is in pages router and not app, you can pass prefetch={false} to the link and it will behave as expected. Tested it here: https://link-bug-reproduction-isskh3bjx-laugharns-projects.vercel.app

ledbetterljoshua commented 1 day ago

@laugharn wow awesome, that works. Interesting to note that if any of the links to the pages router do not have prefetch={false} then the ones with it set still do not work. But this is super helpful. Thanks!

laugharn commented 1 day ago

A maybe unpopular opinion but I often find myself creating a link component with prefetch={false} by default and opt into prefetching as opposed to vice versa.

vercel / next.js