NextJs not found page reloads every ~3 seconds

Question

I'm following this https://nextjs.org/docs/app/api-reference/file-conventions/not-found

But everything works fine but the page not found is reloaded every second. This is my page not found code

import Link from "next/link";

export default function NotFound() {
  return (
    <div className="overflow-hidden bg-white text-black md:py-20">
      <div className="container relative mx-auto px-4">
        <div className="grid grid-cols-1 items-center px-4 py-20 xl:py-10">
          <div>
            <h2 className="relative z-10 text-center text-6xl font-bold xl:text-9xl">
              Oops! <br /> Page Not Found
            </h2>
            <span className="absolute left-0 top-0 w-full transform whitespace-nowrap text-[250px] font-extrabold text-gray-400 opacity-40 blur-[2px] md:-left-[5% ] xl:text-[300px]">
              ERROR 404
            </span>
            <p className="mx-auto text-center text-base md:p-4 xl:w-2/3 xl:text-xl">
              Don&apos;t worry, though! Our team of skilled developers is
              constantly working to enhance your browsing experience. In the
              Meanwhile, feel free to explore our other amazing content and
              discover exciting insights.
              <br />
              If you believe you&apos;ve reached this page in error, please
              double-check the URL or use the navigation links to find your way
              back to our website&apos;s main sections.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Answer 1

This is a known bug in Next.js and has been reported on GitHub. Apparently it only happens during development mode (npm run dev) but in production mode (npm run build && npm start) there is no problem.

I noticed that you are using the Link component, which may be the problem.

So removing import Link from "next/link"; should make it work for you since you're not using it.

Some people also reported that using turbopack fixed the issue as well.