vercel / vercel/next.js

Calling router.refresh after a notFound error does not update the page

Open
#77,086 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dynamic Routes Output Runtime
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/zoeyfyi-sage/nextjs-notFound-refresh-issue

To Reproduce
  1. next dev
  2. Note that homepage renders
  3. Click toggle on the top right to toggle the visibility of this page, note that page returns 404
  4. Click the toggle again, note that the page does not update and the 404 is still displayed
Current vs. Expected behavior

https://github.com/user-attachments/assets/a7617a57-7482-4029-af10-5f0327a88c07

  • When the toggle moves from true to false, the page rerenders and a 404 is returned. This is the desired behaviour.
  • When the toggle moves from false to true, the page rerenders with the correct true value but the browser remains on the 404 page

Image

Provide environment information
/bin/sh: yarn: command not found
/bin/sh: pnpm: command not found

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Fri Jul  5 17:55:37 PDT 2024; root:xnu-10063.141.1~2/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 11
Binaries:
  Node: 23.6.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.0-canary.5 // Latest available version is detected (15.3.0-canary.5).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Dynamic Routes, Output, Runtime

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

next dev (local), next start (local)

Additional context

We have the same issue on Next 14, so it is likely a misunderstanding on how notFound and refresh interact.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction repository linked in the issue, run next dev, and follow the toggle steps to reproduce the 404 state. Trace the interaction between router.refresh and notFound; done means toggling back to the visible state updates the browser from the 404 page while preserving the expected 404 when the page is hidden.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.