Страницы 404 (Not Found)

Часть раздела Основы Next.js путешествия по React на Coddy. Урок 9 из 47.

Динамический маршрут слишком всеяден. app/menu/[slug]/page.jsx соответствует /menu/pizza и с такой же готовностью соответствует /menu/asdfgh, а затем отображает страницу блюда, которого не существует.

Next.js предоставляет обе части решения.

1. Экран 404. Файл с именем not-found.jsx, из того же клуба специальных имён файлов, что и page.jsx и layout.jsx:

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

Помести его в app/not-found.jsx, и он будет охватывать всё приложение: здесь оказывается каждый URL, которому ничего не соответствует, вместо стандартной простой страницы 404.

2. Триггер. Иногда URL соответствует маршруту, но данные не существуют. Это случай /menu/asdfgh, и определить это может только ваш код. Вызовите 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() не возвращает значение, и вам не нужно его возвращать: вызов этой функции немедленно останавливает страницу и показывает ближайший not-found.jsx. Всё после if может безопасно исходить из того, что блюдо существует, поэтому проверка расположена в начале.

Задание

Средне

/menu/sushi сейчас отображает страницу блюда, которого нет в меню. Устрани эту дыру.

Заверши файл app/not-found.jsx. Экспортируй компонент по умолчанию, который возвращает <h1> с id="not-found-title" и точным текстом Dish not found.
В app/menu/[slug]/page.jsx импортируй notFound из next/navigation.
Если slug отсутствует в массиве dishes, вызови notFound() до отображения чего-либо.

/menu/pizza по-прежнему должен работать.

Попробуйте сами

import './globals.css';

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

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