Next.js SDK changes navigation behavior

[landenai]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8

Framework Version

No response

Link to Sentry event

No response

Reproduction Example/SDK Setup

• Application is using Sentry/next.js v8 and Sentry/profiling-node v9.1.0 but is getting the same issue with Sentry/next.js v9.12.0 and Sentry/profiling-node v9.12.0
• Application uses Next.js's Pages router

Steps to Reproduce

(When routing on desktop)

1. The header content is dynamically loaded from a CMS as JSON. This JSON is used to render a Header component from the design system. The header displays top-level links.
2. When a user hovers over a link, a debounced JavaScript handler updates a React state flag to true.
   This causes a re-render and opens the sub-navigation menu.
3. On clicking a sub-navigation link:

• The browser updates the URL.
• The relevant page content loads.
• The sub-navigation menu closes automatically.

• State is never explicitly reset

(When routing on mobile)

• MUI's Menu component is used

1. Clicking a header link: Updates a React state with the currentTarget from the click event. This opens the sub-navigation menu.
2. After clicking a sub-navigation link:

• The path updates.
• The correct content loads.

• State is never explicitly reset

Expected Result

For each case, the sub-navigation closes automatically on the new page

Actual Result

For each case, the sub-navigation stays open on the new page

[andreiborza]

Hi, thanks for filing this. I had a look over the routing code and couldn't really spot anything that looked off. Could you please provide a minimal reproduction repo so we can investigate this?