Ожидание параметров маршрута

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

Динамический маршрут передаёт вашей странице сегмент URL через params. В Next 15 есть одна особенность, которую стоит запомнить:

params — это promise.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

Забудьте await, и ничего не упадет, что и делает эту ошибку такой коварной. Деструктуризация промиса просто вернет вам undefined:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // ничего не находит

Страница всё ещё отображается. Она просто пустая или заполнена запасными значениями, и вы ищете в своём слое данных ошибку, которой там никогда и не было.

То же правило относится и к searchParams. Оба являются промисами, для обоих требуется использование await, и оба доступны только в async серверных компонентах — ещё одна причина, почему страница, которую вы только что написали, должна была быть async.

Зачем вообще использовать промисы? Чтобы Next.js мог начать рендерить части вашей страницы, которые не зависят от URL, до того, как он закончит обработку частей, которые от него зависят.

Задание

Легко

Файл app/menu/[slug]/page.jsx почти правильный, но в нем не выполняется await для params, поэтому каждое блюдо возвращается как Unknown dish.

Выполните await для params перед деструктуризацией: const { slug } = await params;

Файл lib/data.js и главная страница заблокированы. Переход по адресу /menu/carbonara должен отображать Carbonara в #dish-name и его цену в #dish-price.

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

import './globals.css';

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

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