Halaman Tidak Ditemukan

Rute dinamis terlalu permisif. app/menu/[slug]/page.jsx cocok dengan /menu/pizza, dan juga cocok dengan /menu/asdfgh tanpa masalah, lalu merender halaman hidangan untuk hidangan yang tidak ada.

Next.js menyediakan kedua bagian solusi untukmu.

1. Layar 404. File bernama not-found.jsx, termasuk kelompok nama file khusus yang sama dengan page.jsx dan layout.jsx:

// app/not-found.jsx
export default function NotFound() {
    return <h1>We don't have that</h1>;
}

Letakkan di app/not-found.jsx dan halaman ini mencakup seluruh aplikasi: setiap URL yang tidak cocok dengan apa pun akan diarahkan ke sini, bukan ke halaman 404 bawaan yang sederhana.

2. Pemicu. Terkadang URL cocok dengan rute, tetapi datanya tidak ada. Itulah kasus /menu/asdfgh, dan hanya kodemu yang bisa mengetahuinya. Panggil notFound():

import { notFound } from 'next/navigation';

const dishes = ['pizza', 'pasta'];

export default async function Dish({ params }) {
    const { slug } = await params;

    if (!dishes.includes(slug)) {
        notFound();
    }

    return <h1>{slug}</h1>;
}

notFound() tidak mengembalikan nilai dan kamu tidak mengembalikannya: memanggilnya langsung menghentikan halaman di situ dan menampilkan not-found.jsx terdekat. Semua hal setelah if dapat menganggap dengan aman bahwa hidangan itu benar-benar ada, itulah sebabnya pemeriksaan ditempatkan di bagian atas.