Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Browser back button navigation fails or behaves incorrectly when returning to a page with hash fragment after client-side navigation [1 pull requests, 1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#88345•Fetched 2026-04-08 02:04:58
View on GitHub
Comments
1
Participants
2
Timeline
4
Reactions
4
Author
hamidrezahanafihamidrezahanafi
Participants
hamidrezahanafihamidrezahanafihrishikesh2810hrishikesh2810
Timeline (top)
commented ×1cross-referenced ×1issue_type_added ×1labeled ×1

Fix Action

Fixed

PR fix notes

PR #88349: fix(app-router): handle back/forward navigation after native anchor link clicks

Description (problem / solution / changelog)

What

Fixes browser back/forward navigation failing after clicking native anchor links (<a href="#section">).

Problem

When a user clicks a native HTML anchor link (not Next.js <Link>), the browser creates a history entry with null state. The existing popstate handler checks for __NA in history state to determine if it's a Next.js-managed entry - entries without __NA are ignored or trigger a page reload. This breaks back/forward navigation after clicking anchor links.

Solution

Added a hashchange event listener that:

  1. Detects when a native anchor link is clicked (history state lacks __NA)
  2. Dispatches a RESTORE action to update the router's canonical URL
  3. This triggers HistoryUpdater to save __NA and __PRIVATE_NEXTJS_INTERNALS_TREE to the history entry
  4. Future back/forward navigation works correctly because popstate now recognizes these entries

The listener also checks if __NA is already present to avoid double-dispatching when hashchange fires after popstate (which happens during back/forward to hash URLs).

Test

Added e2e tests for:

  • Back/forward navigation between multiple hash anchors on the same page
  • Back navigation from another page to a page with hash fragment

Fixes #88345

Changed files

  • packages/next/src/client/components/app-router.tsx (modified, +30/-1)
  • test/e2e/app-dir/navigation/app/native-anchor-link-navigation/other/page.js (added, +18/-0)
  • test/e2e/app-dir/navigation/app/native-anchor-link-navigation/page.js (added, +89/-0)
  • test/e2e/app-dir/navigation/navigation.test.ts (modified, +57/-0)

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:34:05 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6041
  Available memory (MB): 49152
  Available CPU cores: 14
Binaries:
  Node: 24.12.0
  npm: 11.6.2
  Yarn: 4.12.0
  pnpm: N/A
Relevant Packages:
  next: 16.1.0
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.2
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/hamidrezahanafi/nextjs-anchor-test

To Reproduce

Steps to Reproduce

  1. Navigate to the home page (/)
  2. Click an anchor link that scrolls to a section on the same page (e.g., #target-section) - URL becomes /#target-section
  3. From that section, click a <Link> component to navigate to another page (/page2)
  4. Click the browser's back button

Current vs. Expected behavior

Expected Behavior

The browser should navigate back to /#target-section The page should scroll to the target section The hash should remain in the URL

Actual Behavior

(Document what you observe - e.g., page doesn't scroll, hash is lost, page reloads unexpectedly, scroll position is wrong, etc.)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:34:05 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6041
  Available memory (MB): 49152
  Available CPU cores: 14
Binaries:
  Node: 24.12.0
  npm: 11.6.2
  Yarn: 4.12.0
  pnpm: N/A
Relevant Packages:
  next: 16.1.0
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Linking and Navigating

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

extent analysis

TL;DR

The issue can likely be fixed by preserving the URL hash when navigating between pages using the Link component from next/link.

Guidance

  • Verify that the Link component is being used correctly and that the href attribute includes the hash.
  • Check if the scroll behavior is correctly configured in the next.config.js file or in the Link component.
  • Consider using the useScrollRestoration hook from next/navigation to manually restore the scroll position.
  • Test the navigation flow with different anchor links and pages to ensure the issue is consistently reproducible.

Example

import Link from 'next/link';

function MyLink() {
  return (
    <Link href="/page2" scroll={false}>
      Go to page 2
    </Link>
  );
}

Notes

The issue seems to be related to the way Next.js handles client-side navigation and scroll restoration. The provided code repository may need to be modified to correctly preserve the URL hash and scroll position.

Recommendation

Apply workaround: Use the useScrollRestoration hook or manually preserve the URL hash when navigating between pages. This approach allows for more control over the navigation flow and scroll restoration.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#inference speed#output truncation#response parsing#generation error#database connection

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix Browser back button navigation fails or behaves incorrectly when returning to a page with hash fragment after client-side navigation [1 pull requests, 1 comments, 2 participants]