Browser back doesn't work with shallow replace + middleware

[omermizr]

Verify canary release

• [X] 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.15.0 npm: 8.2.0 Yarn: N/A pnpm: N/A Relevant packages: next: 12.3.2-canary.15 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 105.0.5195.125

How are you deploying your application? (if relevant)

next start

Describe the Bug

When a middleware is defined and matches a route, a combination of navigation events can cause the browser's back behavior to break for that route.

Expected Behavior

When clicking on the browser's back button, the previous page should be restored.

Actual behavior: the URL is restored, but the page content isn't.

Link to reproduction

https://github.com/omermizr/nextjs-history-bug

To Reproduce

Define a middleware that matches all routes. Then:

1. Navigate to page1 (router.push).
2. Shallow navigate to the same page (page1) - changing query params for instance (router.push + shallow).
3. Navigate to page2 (router.push).
4. Shallow navigate replace to the same page (page2). (router.replace + shallow)
5. Click on the browser's back button.

URL and page content should be set to the first page (page1), but only the URL is correct - the page content is still page2.

P.S I dug in a bit and I suspect this piece of code: https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/router/router.ts#L1417-L1419

[XavierJDN]

Hi, Is this issue still open?

[omermizr]

Still happens with latest canary (12.3.2-canary.29), so yeah...

[nhatncb]

Still happens in next 13

[nhatncb]

This still happens but there is no solution :((

[kleintorres]

This still happens in the latest public Next version available (13.0.6 at this time).

While it may sounds like a weird bug to reproduce it's actually very common using query params to navigate thought paginated content.

Logging the router object in our particular case shows that while asPath shows the correct value (/events), pathname and route are showing the rendered and incorrect page (/bookings).

Object { pathname: "/bookings", route: "/bookings", query: {}, asPath: "/events" }

[kleintorres]

After further investigation it seems that this line is causing the problem, as it maintains the old pathname on route changing when there's a middleware match.

https://github.com/vercel/next.js/blob/8ded79728e228b39e30cab12cb1f46be8fbaf9bb/packages/next/shared/lib/router/router.ts#L1450

Commenting the line causes the browser navigation buttons to work as intented when using shallow routing.

[omermizr]

Yup. Not sure why the Next team still hasn't addressed this...

On Sat, Dec 10, 2022 at 1:57 PM Klein Torres @.***> wrote:

After further investigation it seems that this line is causing the problem, as it maintains the old pathname on route changing when there's a middleware match.

https://github.com/vercel/next.js/blob/8ded79728e228b39e30cab12cb1f46be8fbaf9bb/packages/next/shared/lib/router/router.ts#L1450

Commenting the line causes the browser navigation buttons to work as intented when using shallow routing.

— Reply to this email directly, view it on GitHub https://github.com/vercel/next.js/issues/41064#issuecomment-1345248498, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIXNI4Y3RUCKLLLLTLWPFUTWMRVZ3ANCNFSM6AAAAAAQZ2ZAGI . You are receiving this because you authored the thread.Message ID: @.***>

[github-actions[bot]]

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.