Страницы 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, может с уверенностью предполагать, что dish существует, именно поэтому защитная проверка ставится в самом начале.

Задание

Средне

/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>
    );
}