Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Content visibility breaks navigation back [1 pull requests, 2 comments, 3 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#87504•Fetched 2026-04-08 02:06:56
View on GitHub
Comments
2
Participants
3
Timeline
9
Reactions
0
Author
avaltatavaltat
Participants
avaltatavaltathriztamhriztammysterious-cod1004mysterious-cod1004
Timeline (top)
commented ×2mentioned ×2subscribed ×2cross-referenced ×1

Fix Action

Fixed

PR fix notes

PR #88081: Implement manual scroll restoration during navigation and update focus/scroll management

Description (problem / solution / changelog)

For Contributors

Fixing a bug

  • Related issues linked using fixes #87504
  • Tests added.
  • Errors have a helpful link attached.

For Maintainers

What?

This pull request introduces significant improvements to scroll position management and restoration within the Next.js App Router. It ensures that scroll coordinates are accurately captured and restored during client-side navigation, specifically when using the browser's back and forward buttons.

Why?

Currently, client-side navigation can sometimes result in inconsistent scroll behavior or "lost" positions during history traversal. By manually managing the scroll state via the history API and timing the restoration with the rendering cycle, we provide a much smoother, native-like navigation experience for users.

How?

  • Persistence: In app-router-instance.ts, the current scroll position is now captured and stored in the browser's history state immediately before navigation.
  • Restoration Logic: In app-router.tsx, we retrieve the stored coordinates during history traversal and schedule them for restoration.
  • Stability: Implemented a double requestAnimationFrame (RAF) pattern when applying the scroll. This ensures the DOM has stabilized and the layout is painted before the scroll is triggered, preventing restoration failures.
  • Coordination: Added a pendingScrollRestore variable to synchronize the timing between navigation events and the final render.
  • Conflict Resolution: Modified restore-reducer.ts to disable default Next.js focus/scroll management during history traversal, ensuring the manually restored position takes precedence.

Closes NEXT- Fixes #87504

Changed files

  • packages/next/src/client/components/app-router-instance.ts (modified, +12/-0)
  • packages/next/src/client/components/app-router.tsx (modified, +30/-0)
  • packages/next/src/client/components/router-reducer/reducers/restore-reducer.ts (modified, +8/-1)

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:09:56 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6041
  Available memory (MB): 24576
  Available CPU cores: 12
Binaries:
  Node: 22.21.1
  npm: 11.6.4
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 16.1.0 // Latest available version is detected (16.1.0).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/avaltat/next-content-visibility

To Reproduce

  1. Clone the repo
  2. Navigate to /foo
  3. Scroll to the middle of the page
  4. Navigate to bar and then navigate back

Current vs. Expected behavior

The back navigation is not at the same scroll position

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:09:56 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6041
  Available memory (MB): 24576
  Available CPU cores: 12
Binaries:
  Node: 22.21.1
  npm: 11.6.4
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 16.1.0 // Latest available version is detected (16.1.0).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
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)

Vercel (Deployed)

Additional context

No response

extent analysis

TL;DR

The issue can likely be resolved by implementing a custom scroll restoration mechanism, as the current implementation does not preserve the scroll position during navigation.

Guidance

  • Review the Next.js documentation on scroll restoration to understand the available options for preserving scroll position.
  • Consider using the useEffect hook to manually restore the scroll position when navigating back to a page.
  • Check if there are any existing issues or pull requests in the Next.js repository related to scroll restoration, as this may be a known issue with a proposed solution.
  • Verify that the issue is not specific to the Vercel deployment by testing the application locally.

Example

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      // Restore scroll position here
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <div>My App</div>;
}

Notes

The provided example is a basic illustration of how to use the useEffect hook to restore scroll position. The actual implementation will depend on the specific requirements of the application.

Recommendation

Apply workaround: Implement a custom scroll restoration mechanism using the useEffect hook and the next/router API, as the current implementation does not preserve the scroll position during navigation.

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…
#memory management#API rate limit#retriever error#indexing error#inference speed

Still need to ship something?

×6

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

Back to top recommendations

TRENDING