Middleware rewrites with shallow navigation break query object from Next router

[MaartenBruggink]

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 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.0
  npm: 8.19.1
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.3.2-canary.15
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Safari Version 16.0 (17614.1.25.9.10, 17614)

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

When using middleware for server side AB tests (rewriting the url) having a shallow navigation to the same dynamic page with a different query causes the NextJS router to no longer return the correct query parameters.

[Log] query – {test: "at-worlds-end"}

// After shallow navigating to a different page

[Log] query – {}

Expected Behavior

I expect the NextJS router to give back the query parameters from the url after making a shallow navigation while using middleware to rewrite the url server side.

Link to reproduction

https://codesandbox.io/s/youthful-antonelli-3ifojo

To Reproduce

Visit the link and use one of the anchor tags to navigate from one dynamic page to another dynamic page. All of these pages are on the same dynamic route: /[test]/page. However the middleware will give you an AB test that internally rewrites you to /[test]/new-page. The A version will give you the title in black and the B version in red. Currently the test is setup to always give you the B version.

After navigating the query object that from the NextJS router will return an empty object instead of showing the value from the URL. When changing the cookie manually to "Original" to get the A version of the test the shallow navigation will keep giving the correct value.

This issue appears both on development and production mode.

[voinik]

We're running into what I think might be the same issue, except we don't have middleware doing the rewrites, but we have a rewrites property in our next config instead. The bug occurs when a rewrite happens.

We have a multi-locale setup where the url can be in different languages (the source property of the rewrite), and is remapped internally to a url conforming to the pages directory structure (the destination property of the rewrite). This works, except for pages with a dynamic path, like in your report. When we hit a url that conforms to the internal directory structure (aka the same language as our folders and files in the pages directory), the router's query object is filled correctly. However, if we hit a translated url that is remapped internally, then the router's query object will not contain the path param.

Another interesting note: in your repo, if you open the console of the browser as well as the console of the app inside the codesandbox environment, you'll see different things. The browser console will show a filled query path param, the codesandbox console won't. We have the same thing: The nextjs server knows exactly what the query path param is, but when it sends it to the client, it's not there.

I checked the props passed the main App component in our _app.tsx and all the properties seem correct (asPath, pathname, basePath, route), except query. So it really seems to be an issue with the props being passed down, considering the server knows about what the correct query should be.

One last difference between our app and yours: A hard refresh gives us the correct query property, whereas it does not seem to help in the codesandbox app. Does a hard refresh work for you in a normal browser (outside of codesandbox)?

Summarizing: It seems that any rewrite will result in the query object lacking the path param for dynamic routes (during client side routing in our app).

Are you still having this issue, 6 months later?

Edit: btw, we're on Next 13.2.1

[tiagobnobrega]

I'm experiencing an empty query too. It happens anytime I use the Link component with the as prop. Without it, it works. But in my case is client-side navigation. I'm using the app dir BTW.

[MaartenBruggink]

I've worked around this issue using a dynamic path, it's not optimal but it fixes the issue that I was having. Now my routing structure looks like this; /[test]/[...page]. In this situation Next will have the same page route and then it is able to update the query. It does come with some drawbacks with handling invalid routes yourself.

Something to note; in the Codesandbox link in the issue above it's using next@canary and I don't see the issue happening in there anymore, it might be worth a shot testing that one