Avatar

Halaman Error 404 Next.js Terus Melakukan Reload Di Mode Development

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

Halaman Error 404 Next.js Terus Melakukan Reload Di Mode Development

Beberapa waktu lalu saya lagi ngembangin blog pakai Next.js 15.3.0 dengan struktur app/ directory. Awalnya sih lancar jaya, sampai saya coba buka halaman yang gak ada (sekalian tes 404).

Eh, anehnya... malah ke-loop reload terus-terusan 😩

Awalnya saya kira gara-gara cache, error middleware, atau salah config. Tapi setelah dicek di console, log juga gak jelas. Pokoknya bolak-balik reload aja.


🔍 Apa Penyebabnya?

Ternyata ini bug di Next.js development mode, khususnya kalau pakai app/directory dengan dynamic routing, tapi halaman error custom (not-found.tsx, dll) belum diset dengan benar.


✅ Solusi yang Saya Pakai

Akhirnya ketemu cara simpel yang works! Kalau kamu juga pakai Next.js v15.3.0 dengan app/ structure, coba langkah ini:

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

Di dalam folder app/, buat folder baru bernama [...not_found].
Lalu di dalamnya, buat file page.tsx (atau .jsx):

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

Fungsi ini akan nangkep semua route yang gak cocok, lalu dilempar ke not-found.tsx.

✨ Step 2: Tambahkan not-found.tsx di Root app/

Masih di dalam folder app/, buat file not-found.tsx:

app/not-found.tsx

Kamu bisa bebas custom tampilannya sesuai branding aplikasi.


💡 Kenapa Cara Ini Berhasil?

Karena kombinasi ini:

  • Folder app/[...not_found] → jadi catch-all handler buat semua route yang gak cocok.
  • Fungsi notFound() → paksa redirect ke app/not-found.tsx.

Hasilnya: loop reload yang biasanya muncul karena Next.js gak bisa asosiasikan not-found.tsx jadi hilang.


🧪 Tested On

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

Jadi kalau kamu ngalamin infinite reload pas buka halaman error di Next.js (terutama mode dev), coba trik ini dulu deh.

Semoga bisa bantu debug lebih cepat dan hemat waktu. Jangan lupa bookmark artikel ini, biar gak bingung kalau ketemu lagi nanti 😄

Newsletter

Join untuk mendapatkan informasi dan kiat-kiat praktis yang dikirimkan ke kotak masuk anda 🔥

Tidak ada spam, berhenti Subscribe kapan saja, kami menghormati privasi Anda.

Bergabung dengan 8+ lainnya

© 2025 Rama Can. All rights reserved.