**Next.js error page (404, 400, 500) reload infinitely in development**

[Senbonzakura1234]

Provide environment information

• System:
  OS: Windows 10 10.0.22622
  CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Memory: 5.87 GB / 15.87 GB
• Binaries:
  Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
  Yarn: 3.2.2 - C:\Program Files\nodejs\yarn.CMD
  npm: 8.16.0 - C:\Program Files\nodejs\npm.CMD

Describe the Issue

I'm not sure if this is a Next.js bug or a function, but the app keep reloading when I'm on 404 or any other error page and it's really annoying and it start laggy when the log was long enough, I want to investigate a way to stop this.

To reproduce

• Create a Next app
• Navigate to a page that doesn't exist to get a 404 error
• Open F12
• on-demand-entries-client.js script keep reloading the page

Screen Record

Create.Next.App.-.Google.Chrome.2022-08-27.13-51-24.mp4

[icyJoseph]

I tried to control this with onDemandEntries on the next configuration file, but it didn't work, so I went to the source code, and this bit:

            // don't attempt fetching the page if we're already showing
            // the dev overlay as this can cause the error to be triggered
            // repeatedly
            if (payload.event === 'pong' && payload.invalid && !self.__NEXT_DATA__.err) {
                // Payload can be invalid even if the page does exist.
                // So, we check if it can be created.
                fetch(location.href, {
                    credentials: 'same-origin'
                }).then((pageRes)=>{
                    if (pageRes.status === 200) {
                        // Page exists now, reload
                        location.reload();
                    } else {
                        // Page doesn't exist
                        if (self.__NEXT_DATA__.page === _router.default.pathname && _router.default.pathname !== '/_error') {
                            // We are still on the page,
                            // reload to show 404 error page
                            location.reload();
                        }
                    }
                });
            }

// Page exists now, reload, lead me to believe that this is done on purpose, because, during development, if you land on a page that doesn't exist in the file system, perhaps you are about to create it, or will create it, so it tries to pick up on that on intervals.

This is the nature of _error pages built like this.

However, if we for example return { notFound: true } in GetServerSideProps, then Next.js understands that this is expected, and doesn't attempt to reload over and over.

Still, would be nice to be able to at least throttle this behavior.

[studiolama]

I am also facing same error. I have created a custom page for not-found but due to this is reloading again and again . Any solution ?

[mrpitch]

Same for me, the "normal" 404 page is also infinitely reloading. I'm using next.js 13.4.4

[michaelhpet]

I'm also experiencing the same thing on 13.4.4.

I think @icyJoseph's comment explains it. I thought it was a bug at first or something wrong with my implementation but it wasn't. It only happens in dev and not in production.

I think this should be addressed in the docs @timneutkens

[bennik88]

Same error with "next": "13.4.4".

[Ian-Munashe]

Same error with "next": "13.4.5"

[abcdefghijorngarbosaxyz]

Same bug in not-found with "next": "13.4.6"

[NK3678]

please let me know, if you get answer. as for me also. not-found page is keep on loading on wrong route

[VinnyLima]

Same bug in not-found with "next": "13.4.6"

[tj-noor]

I ended up adding a catch-all route where the 404 was being generated from to return notFound() from it.

1. Create a folder: e.g. [...404]
2. Create a page.tsx or page.jsx page with the following:

import { notFound } from "next/navigation"

export default function NotFound() {
  return notFound()
}

[ThiagoPedais]

thank you

[Ian-Munashe]

I found a way which worked for me on "next": 13.4.6

• In your app directory just create a folder named [...not_found].
• Inside that new folder create a file page.tsx or page.jsx and add this code:

import { notFound } from "next/navigation";

const NotFoundCatchAll = () => notFound();

export default NotFoundCatchAll;

• In the root of your app directory create a file named not-found.tsx or not-found.jsx and add this code:

export default function NotFound({}: Props) {
  return (
    <div>NotFound</div>
  );
}

Your custom 404 error page will work fine without the infinity reload issue.

[chebread]

@Jordaneisenburger, Me too, this didn't work for me on 13.4.19.

[petrosmm]

does anyone have any idea why this route gets invoked while loading dynamic pages in app routes? i can't always tell if theres an actual error

[p00000001]

@petrosmm Apparently the 404 page is intentionally rendered "in anticipation". I raised a bug that our 404 page is always rendered without a 404 error, but it was closed as expected behaviour: #53252

[petrosmm]

@p00000001 does this mean i have to mark any potential errors with a guid or some other unique identifier? because i cant seem to throw or invoke notfound().... and redirect to it?

[zineanteoh]

works like magic ✨ (using next 14.0.3)

thank you!

[manuelbasanta]

I tried to "debug" this "error" for an hour, how is this not commented here in the docs ?

[manuelbasanta]

Fixed here: #51637

Working fine for me in V 13.4.12

[kdb13]

Not working for me in v13.4.7. Using the workaround by @Ian-Munashe.

[Johnjx]

The @Ian-Munashe fix works for me.

• "next": "13.4.7",

[BenjaminRiderelli]

I think its a dev bug only, I was having the same trouble, but when I pushed it (dont know how I thought about it) It worked perfectly on production

[ztanner]

Hey folks -- we've removed the dev server polling behavior on the v13.4.20 canary (specifically as of v13.4.20-canary.4). You should no longer be seeing infinite reloads, but if you do, please consider filing an issue for it with a reproduction so we can investigate.

[kdb13]

Could you please mention the stable version after which this is fixed, as I am running the version 13.4.7 and still facing the problem?

[ztanner]

13.4.20-canary corresponds with the 13.4.20 stable release.

[Jordaneisenburger]

This still happens on 13.5.6 even without a custom not-found.tsx file in /src/app, the native nextjs 404 is still infinitely reloading. Any ideas or others experiences this without the fixes supplied above ?

[timneutkens]

Please open a new issue with a reproduction 👍 Thank you!

[JurajKavka]

I tested Next 14 and seems to be OK (no repetitive requests). 3.4.12 was definitely broken.

[Jordaneisenburger]

Seems to be related with using generateStaticParams at the top of your page.

export const generateStaticParams = () => {
    return [];
};

and manually triggering notfound(), will create a reproduction repo soon.

[Gaurav-r-aj]

Update the next.js version in your project , it will fix the issue insted using next.js 13 use next.js 14

[OmarAfet]

Same error here with nextjs version 14.1

[gayancharith]

same error for 14.1. Not only for the Not found page, but for every page of the applicaton.

[OmarAfet]

it looks like deleting the .next folder solves the problem for me.

but it still can happen sometimes

[ketijakrista]

Downgrading to 14.0.4 fixed for me

[OmarAfet]

In the latest version 13, I've been experiencing this issue. I'm not sure if it's related, but the problem began when I switched to macOS.

[ragnarok22]

I confirm. I'm facing the same issue with NextJS 14.1.0

[petrosmm]

can confirm this issue was fixed in 14.1.4 and broken again in 14.2.3. Still haven't found a combo of fixes to get this madness to stop. Seeing something similar to this #62228. though not sure if related?

[akbulatesra]

Next project with page router, it has 404.js but it is refreshing infinity. I saw this issue (#51132) but cant fix.

This issue has already been triaged, we're going to work on it, there's other issues that have a higher priority though. Please don't post further comments if there is no additional information being provided. That includes not posting "version x still has this", it's not helpful, the issue is still open so you can assume it's not fixed in version x. Every comment pings everyone on the thread and takes time away from us investigating/fixing this issue. These will be hidden automatically.

Originally posted by @timneutkens in #10024 (comment)

Is it same error or different? If it is same did you fix it? @timneutkens

[timneutkens]

Looks like the same issue yes.

[Mangor1no]

This issue is still persist in latest NextJS version (15.3.0). I'm using page router, and unfortunately I cannot provide the source code atm.

[ErickTorresBrownU]

Another dev joining the mass grave here. 🙋‍♂️

[ragnarok22]

Welcome. Please grab a chair 🪑 and a coffee ☕.

[HafidzNurmawanHakim]

Another another dev joining the mass grave here. 🙋‍♂️

[GeorgeNabilPro]

That's really annoying, and I have no idea why such an issue has no clear solution until now.

[Ian-Munashe]

This issue was fixed long back. Just create a not-found tsx or jsx file in your app dir if you're using app router and create a starndard nextjs page function. Make sure you're importing asset starting with / through out the whole project. I you don't import your assets starting with /, your app will enter in a loop when it tries to load an asset that is not present