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, hata verecek kadar cömerttir. app/menu/[slug]/page.jsx, /menu/pizza ile eşleşir ve /menu/asdfgh ile de aynı mutlulukla eşleşerek var olmayan bir yemek için yemek sayfası oluşturur.

Next.js size düzeltmenin her iki kısmını da sunar.

1. 404 ekranı. page.jsx ve layout.jsx ile aynı özel dosya adı grubunda yer alan not-found.jsx adlı bir dosya:

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

Bunu app/not-found.jsx konumuna yerleştir; tüm uygulamayı kapsar: hiçbir şeyle eşleşmeyen her URL, yerleşik sade 404 sayfası yerine buraya yönlendirilir.

2. Tetikleyici. Bazen URL bir rotayla eşleşir ancak veriler mevcut değildir. Bu, /menu/asdfgh durumudur ve bunu yalnızca kodunuz belirleyebilir. notFound() ç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 döndürmezsiniz: onu çağırmak sayfayı tam orada durdurur ve en yakın not-found.jsx dosyasını gösterir. if sonrasındaki her şey yemeğin gerçekten var olduğunu güvenle varsayabilir; bu nedenle koruma en üstte yer alır.

Görev

Orta

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

app/not-found.jsx dosyasını tamamla. id="not-found-title" değerine sahip bir <h1> döndüren bir bileşeni varsayılan olarak dışa aktar; metin tam olarak Dish not found olmalı.
app/menu/[slug]/page.jsx içinde notFound ögesini next/navigation içinden içe aktar.
slug dishes dizisinde değilse herhangi bir şey oluşturmadan önce notFound() çağrısını yap.

/menu/pizza yine çalışmalı.

Kendin dene

import './globals.css';

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

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