vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.74k stars 26.85k forks source link

Not found page does not get scrolled to the top on opening #70688

Open justenau opened 1 week ago

justenau commented 1 week ago

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/peaceful-pike-ktxllk?workspaceId=cc8eb0ea-4ef2-4830-9ca0-1bb04d0968ad

To Reproduce

  1. Start the application in development
  2. Open /foo page
  3. Scroll to the bottom and click the bottom link ("Click here to trigger not found redirect")
  4. Observe scroll position in opened (not-found) page

Current vs. Expected behavior

Following the steps from the previous section I expected "Not found" page to be opened scrolled to the top but it keeps the scroll position of the /foo page.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.0.0-canary.175 // Latest available version is detected (15.0.0-canary.175).
  eslint-config-next: N/A
  react: 19.0.0-rc-2d16326d-20240930
  react-dom: 19.0.0-rc-2d16326d-20240930
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Not sure, Navigation, Parallel & Intercepting Routes

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

Other (Deployed)

Additional context

No response

abhi12299 commented 1 week ago

Here's my 2 cents on this issue: nextjs preserves the scroll position on client side navigation (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#6-back-and-forward-navigation), so this seems to be expected behaviour (even when it renders the not found page). Could be wrong though.

justenau commented 1 week ago

Here's my 2 cents on this issue: nextjs preserves the scroll position on client side navigation (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#6-back-and-forward-navigation), so this seems to be expected behaviour (even when it renders the not found page). Could be wrong though.

This talks about back and forward navigation. In my example back/forward scroll position is kept as expected and it is not an issue. The issue is that if f.e. my <Link> would lead to non-existing page in the project, the not-found page would be opened with correct scroll position (at the top). But if page A has a link to page B and page B returns the not-found page with notFound() call, it keeps the scroll position of the page A.

abhi12299 commented 1 week ago

Okay, got it - I was unable to open the codesandbox example - so I guessed the issue here. Will download the repro files and test locally - even after forking the sandbox, it is not loading anything on codesandbox

justenau commented 1 week ago

@abhi12299 Make sure you're opening /foo path once you launch the project.

abhi12299 commented 1 week ago

I did, but it crashed the app on codesandbox - on local, I am able to repro

abhi12299 commented 1 week ago

This only happened on next dev - a very silly reason for this bug, but managed to fix it in the PR.