Halaman Not Found Kustom

File not-found.tsx

Buat app/not-found.tsx untuk mengganti halaman 404 bawaan yang kaku:

// app/not-found.tsx
import Link from "next/link";

export default function NotFound() {
  return (
    <main>
      <h1>404</h1>
      <p>Halaman yang kamu cari tidak ada atau sudah dipindah.</p>
      <Link href="/">Kembali ke beranda</Link>
    </main>
  );
}

File ini otomatis dipakai untuk URL yang tidak cocok route mana pun. Bisa juga dibuat per segmen, misal app/blog/not-found.tsx khusus untuk artikel yang tidak ada.

Memicu 404 manual

Di halaman dinamis, panggil notFound() kalau data tidak ditemukan:

// app/blog/[slug]/page.tsx
import { notFound } from "next/navigation";

export default async function Artikel({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const artikel = await getArtikel(slug);

  if (!artikel) notFound();

  return <h1>{artikel.judul}</h1>;
}

notFound() melempar error khusus yang ditangkap Next.js dan me-render not-found.tsx terdekat.

Desain yang baik

Halaman 404 yang baik: menjelaskan apa yang terjadi dengan bahasa manusia, memberi jalan keluar (link beranda, pencarian, atau halaman populer), dan tetap memakai branding situs. Jangan menampilkan stack trace atau pesan teknis.

Tips praktis

Tambahkan kolom pencarian di halaman 404: user yang nyasar sering sebenarnya mencari sesuatu yang spesifik. Catat juga URL 404 yang sering diakses lewat analytics; kalau banyak yang mengakses URL lama yang sudah tidak ada, buatkan redirect permanen ke halaman penggantinya.

Kesalahan umum pemula

• Tertukar notFound() dengan redirect(). notFound() menghasilkan 404, redirect() menghasilkan 307. Untuk data tidak ada, pakai notFound().
• Memanggil notFound() di Client Component. Fungsi ini hanya untuk server. Di client, tampilkan UI "tidak ditemukan" manual atau redirect.
• Halaman 404 tanpa jalan keluar. User yang nyasar butuh link beranda atau pencarian. Jangan biarkan mereka menutup tab.

Latihan singkat

1. Buat not-found.tsx global dengan desain yang sesuai branding situsmu plus link ke 3 halaman populer.
2. Buat app/produk/not-found.tsx khusus segmen produk, lalu panggil notFound() saat produk tidak ditemukan.

Rangkuman

• app/not-found.tsx mengganti halaman 404 bawaan; bisa dibuat per segmen.
• Panggil notFound() di Server Component saat data tidak ditemukan.
• Jangan tertukar dengan redirect() yang menghasilkan 307, bukan 404.
• Halaman 404 yang baik memberi jalan keluar: link beranda dan pencarian.

Catatan teknis: notFound() hanya bisa dipanggil di Server Component atau Route Handler. Di Client Component, pakai useRouter untuk redirect manual atau tampilkan UI "tidak ditemukan" sendiri. Jangan tertukar dengan redirect() yang menghasilkan status 307, bukan 404.