Tampilkan Halaman 404 Rapi dengan Cara Membuat Not Found Page App Router Next Js

Ditulis oleh Next.js

Buat file app/not-found.tsx dan ekspor komponen React default. File itu langsung menggantikan halaman 404 bawaan Next.js App Router tanpa konfigurasi tambahan. Banyak yang gagal karena menaruhnya di folder yang salah atau mencampur dengan pola Pages Router.

File not-found.tsx Bekerja untuk Halaman 404

Next.js membaca not-found.tsx berdasarkan posisi folder. File di root berlaku global, file di dalam segmen hanya berlaku untuk segmen tersebut.

  • app/not-found.tsx menangani seluruh URL yang tidak cocok route.
  • app/dashboard/not-found.tsx hanya menangani pemanggilan notFound() di dalam /dashboard.
  • URL salah yang tidak cocok route selalu memakai versi global terdekat, bukan versi segmen.
  • Fungsi notFound() dari next/navigation memicu file terdekat dari lokasi pemanggilan.
  • Secara default not-found.tsx adalah Server Component.

Langkah Membuat Halaman 404 di App Router

1. Buat app/not-found.tsx minimal:

export default function NotFound() {
  return (
    <main>
      <h1>Halaman tidak ditemukan</h1>
      <p>URL yang kamu buka tidak tersedia.</p>
    </main>
  );
}

2. Tambah tautan kembali ke halaman utama dan halaman penting lain.

import Link from "next/link";

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

3. Buat versi per segmen bila pesan 404 tiap area harus berbeda, contoh app/dashboard/not-found.tsx.

4. Uji tiga kondisi: buka URL acak, buka dynamic route dengan slug tidak valid, lalu panggil notFound() dari page atau layout.

BACA JUGA:

Variasi Desain dan Navigasi 404

Halaman 404 yang rapi cukup berisi kode status, penjelasan singkat, dan satu CTA jelas. Jangan menambahkan banyak navigasi yang membingungkan pengguna.

  • Judul besar 404 untuk konteks cepat.
  • Satu kalimat penyebab kemungkinan, misalnya URL salah ketik.
  • Tombol ke beranda dan tombol ke halaman sebelumnya bila relevan.

Gunakan Client Component hanya untuk tombol kembali memakai router.back(). Tampilan teks dan Link tetap biarkan sebagai Server Component agar lebih ringan.

"use client";
import { useRouter } from "next/navigation";

export default function BackButton() {
  const router = useRouter();
  return <button onClick={() => router.back()}>Kembali</button>;
}

Tabel Troubleshooting Halaman Not Found

Masalah Penyebab Solusi
File tidak terbaca Nama atau lokasi salah Gunakan nama persis not-found.tsx di folder route
Desain tidak muncul CSS tidak dimuat di segmen Periksa layout segmen dan import style global
notFound() tidak jalan Dipanggil dari Client Component Panggil dari Server Component, lalu teruskan status lewat props

FAQ

Apakah perlu file 404 manual seperti Pages Router?

Tidak. App Router memakai app/not-found.tsx, bukan pages/404.tsx.

Bisakah halaman 404 berbeda tiap segmen?

Bisa untuk pemanggilan notFound(), tetapi URL yang tidak cocok route tetap memakai file global.

Apakah not-found.tsx bisa memakai use client?

Bisa, tetapi pakai hanya bila butuh event, hook, atau API browser seperti tombol kembali.

Artikel Terkait