Route Hilang Tiba-Tiba? Cara Mengatasi Route Next Js 404 tanpa Tebak-Tebakan

Ditulis oleh Next.js

Cek dulu nama file dan foldernya. Kebanyakan route Next.js 404 terjadi karena file page.tsx tidak berada di path yang sesuai URL, atau route dinamis tidak menemukan datanya lalu memanggil notFound(). Perbaiki struktur folder, lalu telusuri params dan logika fetch.

Penyebab Route Next Js 404 Paling Sering di App Router

App Router memakai struktur folder sebagai URL. Satu huruf salah atau file kurang membuat route tidak terdaftar.

  • Folder app/blog/page.tsx melayani /blog. File bernama Page.tsx dengan huruf besar atau tersimpan di luar app tidak dihitung sebagai route.
  • Route app/blog/[slug]/page.tsx 404 kalau slug tidak ada di database atau generateStaticParams tidak mengembalikan slug tersebut saat build statis.
  • Pemakaian notFound() di dalam kondisi fetch gagal, ditambah redirect atau rewrite yang salah di middleware.ts, bisa menutup route yang sebenarnya valid.

Tabel Diagnosis Cepat 404

Bedakan gejalanya dulu. 404 lokal dan production sering punya akar berbeda.

Masalah Penyebab Solusi
Halaman statis 404 File page.tsx salah lokasi Samakan folder dengan URL
Segmen [slug] 404 Data kosong atau params salah Validasi fetch dan generateStaticParams
404 hanya setelah deploy Build cache atau basePath beda Uji build lokal lalu cek config deploy

BACA JUGA:

Cara Memperbaiki Route 404 Langkah demi Langkah

Ikut urutan ini supaya tidak menebak.

  1. Periksa file route. Pastikan app/dashboard/page.tsx ada untuk URL /dashboard.
  2. Periksa params dan data. Log params.slug, lalu pastikan fetch mengembalikan data dan bukan langsung notFound().
  3. Periksa middleware.ts. Pastikan matcher tidak memblokir path yang valid.
  4. Jalankan verifikasi build dengan npm run build lalu npm start.
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

export default async function Page({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  if (!post) notFound();
  return <h1>{post.title}</h1>;
}
// middleware.ts
import { NextResponse } from 'next/server';
export function middleware(req: Request) {
  return NextResponse.next();
}
export const config = { matcher: ['/dashboard/:path*'] };
  • Jalankan build lokal sampai bersih tanpa error.
  • Buka route langsung, bukan hanya lewat navigasi client.
  • Bandingkan variabel ENV lokal dan production.

FAQ

Kenapa route dinamis 404 hanya setelah deploy?

Data untuk generateStaticParams biasanya beda antara lokal dan production, atau halaman belum dibuat ulang setelah data baru masuk.

Apakah notFound() sama dengan halaman 404 biasa?

Ya, notFound() merender file not-found.tsx terdekat dengan status 404.

Artikel Terkait