question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rewrite in middleware causes shallow routing to break.

See original GitHub issue

Verify 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: image

Code used to push ‘/suche’ to the router:

      router.push({ pathname: '/suche', query: newParams }, undefined, {
        shallow: true,
      })

Router state after routing has finished: image

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

  1. 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.
  2. 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:closed
  • Created a year ago
  • Reactions:8
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
trm217commented, Jul 27, 2022

Issue persists with

  • 12.2.3
  • 12.2.4-canary2
0reactions
github-actions[bot]commented, Aug 28, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Understanding Next.js routeChangeStart and router events
Shallow routing allows you to make changes to the path of a page without running data fetching methods again. It helps retain the...
Read more >
Next.js - Shallow routing with dynamic routes - Stack Overflow
Shallow Routing gives you the ability to update pathname or query params without losing state i.e., only the state of route is changed.....
Read more >
How to Change URLs with Shallow Routing in Next.js - Netlify
Shallow routing is when you change your website's URL without re-running data fetching methods again. In the case of Next.js, ...
Read more >
Upgrade Guide - Next.js
There were no breaking changes between version 9 and 10. To upgrade run the following command: npm install next@10. Or using yarn :...
Read more >
Changelog — Werkzeug Documentation (1.0.x)
Disable autocorrect and spellchecker in the debugger middleware's Python prompt, see pull request #994 . Don't redirect to slash route when method doesn't ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found