not-found.tsx: Infinite Loop when a Component Calls router.refresh
Nobody has claimed this yet.
- 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/columk1/next-404-loop
To Reproduce
- Start the application in development mode
- Visit localhost:3000/foo
Current vs. Expected behavior
When a 404 is triggered within a layout, if router.refresh is called somewhere in the component tree, there is a request for the updated RSC of the current route, which doesn't exist for not-found.tsx, triggering another 404.
Console log that loops forever:
GET http://localhost:3000/foo 404 (Not Found)
Navigated to http://localhost:3000/foo
[HMR] connected
GET http://localhost:3000/foo?_rsc=ttys4 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/foo 404 (Not Found)
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.5.0: Wed May 1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
Available memory (MB): 16384
Available CPU cores: 8
Binaries:
Node: 24.9.0
npm: 11.6.0
Yarn: 1.22.22
pnpm: 10.17.1
Relevant Packages:
next: 16.0.2-canary.21 // Latest available version is detected (16.0.2-canary.21).
eslint-config-next: N/A
react: 19.2.0
react-dom: 19.2.0
typescript: 5.9.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Not Found
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
It's a problem with an app of mine in production but not in dev for some reason. I was surprised when it reproduced in dev.
I understand the solution is probably to find a way to avoid calling router.refresh on mount, but I will still share the issue in case it's preventable upstream.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction at columk1/next-404-loop and run it in both next dev and next start, then inspect the not-found handling and router.refresh request flow. Done means visiting a missing route with a layout-triggered refresh no longer produces repeated RSC and 404 requests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100