router.query does not contain path parameters if a middleware is used

[ferenckv]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.16
      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)

Middleware / Edge (API routes, runtime), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/ferenckv/next-router-bug

To Reproduce

1. Clone the repo
   git clone https://github.com/ferenckv/next-router-bug

2. Go to 13.4.16
   cd 13.4.16

3. Install dependencies
   npm install

4. Run the app in dev mode
   npm run dev

5. Go to http://localhost:3002

6. Click on Click Here!!

7. You should see a text that says Test: user1

8. Click on Action

9. You should see the url change to http://localhost:3002/users/user1/test?step=1

10. Stop the app

11. Run the app in production mode
    npm run start

12. Repeat steps 5 & 6

13. Instead of Test: user1 you only see Test:

14. Refresh the page

15. Now the text is correct: Test: user1

16. Repeat steps 5 & 6

17. Click on Action

18. The url changes to http://localhost:3002/users/[userId]/test?step=1 instead of http://localhost:3002/users/user1/test?step=1

Describe the Bug

Given that these conditions are met:

1. You are using the Page Router
2. You are using a middleware
3. You are rewriting the route

When you do something like this

    const router = useRouter();

    router.push({
      pathname: router.pathname,
      query: {
        ...router.query,
        ...newQuery
      },
    });

Then router.query does not contain the values of the path parameters.

Expected Behavior

router.query must contain the values of the path parameters.

Which browser are you using? (if relevant)

Chrome 115.0.5790.171

How are you deploying your application? (if relevant)

No response

[VrajKD]

+1, facing the same issue even in v13.5.2, have replicated this in a CodeSandbox here : Example .

Replicable when trailingSlash is set to true

The router.query object doesn't have path parameters on client side navigation. It works well when you land on the same page directly. If the middleware file is removed, the same example starts working well. Even an empty middleware causes the same issue.

Similar open issues :

• Rewrites don't work if a middleware.ts file is present #51923
• Next.js issue with middleware/catch-all/rewrites/getInitialProps when client side navigation occurs #50212
• router.query is empty in catch all routes when middleware, basePath and trailingSlashes are used. #45340

[mesaquen]

I could fix the problem after reading this doc:
https://nextjs.org/docs/messages/deleting-query-params-in-middlewares

I wish that this page was easier to find.

[nhim175]

@mesaquen Can you explain more about what you did? I don't think the above article can solve the issue. Thanks!

[mesaquen]

Hi @nhim175
If I'm not mistaken, back in the day I just followed the "possible solution" step, which is adding manually the params to the URL. But I was still having other problems with the middleware and was not actually needing it.

So, in the end of the day, after a few tests, I got rid of the middleware file, migrated the whole project to App Router and replaced router.query with query = useParams()

[nhim175]

@mesaquen Thank you so much for clarifying what you did. I'm running into the same issue so I thought it's possible to use middleware. I also got rid of the middleware but still want to understand why it happened.
For me, it only happens when running local build version. Works fine on local dev and Vercel. I digged a bit further into the router source code and found that it may happen due to the route matching logic. There were some asset URLs containing the page path.

curRouteMatch was false on local build, but was an object (with path params inside it) on Vercel.
https://github.com/vercel/next.js/blob/v14.2.1/packages/next/src/shared/lib/router/router.ts#L1584