Avatar

Next.js Error Page (404, 400, 500) Keeps Reloading in Development Mode

Ever run into 404, 400, or 500 errors in Next.js that keep reloading during development mode? Don’t worry — here’s how to stop that from happening again.

Rama Can

Next.js Error Page (404, 400, 500) Keeps Reloading in Development Mode

Some time ago I was developing a blog using Next.js 15.3.0 with the app / directory structure. Everything was running smoothly, until I intentionally navigated to a non-existent page for a 404 test. But strangely...

The 404 page crashes and reloads constantly, not stopping!

At first I thought it was a cache, middleware error, or config error. But after checking the console, the logs are also unclear. Anyway, it keeps looping endlessly 😩

🔍 What's the Cause?

It turns out that this is a bug that appears in Next.js development mode, especially when app/directory is used with dynamic routing, and custom error pages (not-found.tsx, etc.) are not set correctly.

✅ Solutions I've Successfully Used

Finally, I found a simple solution that actually works. If you're also using Next.js v15.3.0 and the app/ structure, here's how:

✨ Step 1: Create Folder [...not_found]

Inside the app/ folder, create a new folder called [...not_found], and inside that folder, create a page.tsx (or .jsx) file:

app/[...not_found]/page.tsx

This function will catch all unmatched routes and throw them to the not-found.tsx page.

✨ Step 2: Add not-found.tsx in Root app/

Still in app/, create the file not-found.tsx:

app/not-found.tsx

You can customize the look according to your branding.

💡 Why does it work?

With this combination:

  • The app/[...not_found] folder acts as a catch-all route handler.
  • The notFound() function forces a redirect to app/not-found.tsx.
  • This avoids the reload loop that usually occurs when not-found.tsx is not properly associated by Next.js.

🧪 Tested On

  • Next.js: 15.3.0
  • Routing Mode: App Router (app/ directory)
  • Mode: Development

If you experience infinite reloading when opening the error page in Next.js, especially in development mode, try the method above first.

Hopefully this post will help you debug faster and save time. Don't forget to bookmark it so you don't forget when you encounter this problem again 😄

Newsletter

Join for information and practical tips delivered to your inbox 🔥

No spam, Unsubscribe anytime, We respect your privacy.

Loading...

© 2025 Rama Can. All rights reserved.