Bulunamadı Sayfaları

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 9 / 47.

Dinamik bir rota oldukça hoşgörülüdür. app/menu/[slug]/page.jsx dosyası /menu/pizza ile eşleştiği gibi /menu/asdfgh ile de aynı rahatlıkla eşleşir ve var olmayan bir dish için bir dish sayfası işler.

Next.js size çözümün her iki yarısını da sunar.

1. 404 ekranı. not-found.jsx adlı dosya, page.jsx ve layout.jsx ile aynı özel dosya adı grubundadır:

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

Bunu app/not-found.jsx konumuna yerleştirin, böylece tüm uygulamayı kapsar: Hiçbir şeyle eşleşmeyen her URL, düz yerleşik 404 yerine buraya yönlendirilir.

2. Tetikleyici. Bazen URL bir rota ile eşleşir ancak veri mevcut değildir. Bu durum /menu/asdfgh örneğidir ve bunu yalnızca kodunuz anlayabilir. notFound() fonksiyonunu çağırın:

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() bir değer döndürmez ve onu return etmezsiniz: onu çağırmak sayfayı tam orada durdurur ve en yakındaki not-found.jsx dosyasını gösterir. if ifadesinden sonraki her şey yemeğin gerçek olduğunu güvenle varsayabilir, bu yüzden koruma (guard) en üste konur.

Görev

Orta

/menu/sushi şu anda menüde olmayan bir yemek için bir yemek sayfası oluşturuyor. Bu açığı kapatın.

app/not-found.jsx dosyasını oluşturun. id="not-found-title" özniteliğine ve tam olarak Dish not found metnine sahip bir <h1> döndüren bir bileşeni varsayılan olarak aktarın (export default).
app/menu/[slug]/page.jsx içinde, next/navigation modülünden notFound işlevini import edin.
Eğer slug, dishes dizisinde değilse, herhangi bir şey işlemeden (render etmeden) önce notFound() çağırın.

/menu/pizza yine de çalışmaya devam etmelidir.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}