Rewrite in middleware causes shallow routing to break.
See original GitHub issueVerify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:29 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T8101 Binaries: Node: 14.19.1 npm: 6.14.16 Yarn: 1.22.18 pnpm: 7.5.0 Relevant packages: next: 12.2.4-canary2 eslint-config-next: N/A react: 17.0.2 react-dom: 17.0.2
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
With version v12.2 of Next.js shallow routing stopped working as expected. We have a middleware that rewrites the route ‘/’ to ‘/front’ when a JWT with the desired payload is present in the request. (See routing state directly after page load in the 1st attached screenshot)
After the page has loaded we do a shallow push to ‘/suche’, which is not equal to ‘/’ and therefor the current page should be unloaded and ‘/suche’ should be loaded. However instead of the expected behaviour the asPath is set to ‘/suche’ but the page is not unloaded. (See 3rd attached screenshot to see the router state after we pushed ‘/suche’ to the router)
If however we reload the page, and no middleware rewriting occurs (since we are not on ‘/’ or ‘/front’ but on ‘/suche’ instead) the right page is shown.
Router state after page-load:
Code used to push ‘/suche’ to the router:
router.push({ pathname: '/suche', query: newParams }, undefined, {
shallow: true,
})
Router state after routing has finished:
Expected Behavior
Expect shallow routing to work like it did pre v12.2 and as stated in the docs. Meaning: if a shallow route is pushed for a path that is not the current path, the page should be normally routed as described in the caveats section of the shallow routing docs.
Link to reproduction
https://github.com/trm217/nextjs-12.2-shallow-rewrite-issue-reproduction
To Reproduce
- Press the toggle auth state button to make the page reload for the authenticated state. After the reload you will see / has been rewritten to /member.
- Enter something in the search input and submit. You will notice that the route has changed, but the shallow route push hasn’t actually loaded the ‘/search’ page
Issue Analytics
- State:
- Created a year ago
- Reactions:8
- Comments:8 (2 by maintainers)
Top GitHub Comments
Issue persists with
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.