Strony nie znaleziono

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 9 z 47.

Trasa dynamiczna jest aż nazbyt wyrozumiała. app/menu/[slug]/page.jsx pasuje do /menu/pizza i równie chętnie do /menu/asdfgh, a następnie renderuje stronę dania, które nie istnieje.

Next.js zapewnia obie części rozwiązania.

1. Ekran 404. Plik o nazwie not-found.jsx, należący do tego samego klubu specjalnych nazw plików co page.jsx i layout.jsx:

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

Umieść go w app/not-found.jsx, a obejmie całą aplikację: każdy adres URL, który do niczego nie pasuje, trafi tutaj zamiast na zwykłą wbudowaną stronę 404.

2. Wyzwalacz. Czasami adres URL pasuje do trasy, ale dane nie istnieją. To przypadek /menu/asdfgh i tylko Twój kod może to stwierdzić. Wywołaj 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() nie zwraca wartości i nie zwracasz jej: wywołanie tej funkcji zatrzymuje stronę w tym miejscu i wyświetla najbliższy plik not-found.jsx. Wszystko po instrukcji if może bezpiecznie zakładać, że danie istnieje, dlatego ten warunek ochronny umieszcza się na początku.

Wyzwanie

Średni

/menu/sushi obecnie wyświetla stronę dania, którego nie ma w menu. Załataj tę lukę.

Uzupełnij plik app/not-found.jsx. Domyślnie eksportuj komponent, który zwraca element <h1> z id="not-found-title" i dokładnym tekstem Dish not found.
W pliku app/menu/[slug]/page.jsx zaimportuj notFound z next/navigation.
Jeśli slug nie znajduje się w tablicy dishes, wywołaj notFound() przed renderowaniem czegokolwiek.

/menu/pizza nadal musi działać.

Spróbuj swoich sił

import './globals.css';

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

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