Итоги: получение данных
Часть раздела Основы Next.js путешествия по React на Coddy — урок 28 из 47.
Задание
СреднеИтог главы: меню, которое загружает всё на сервере.
Файл lib/data.js предоставлен и заблокирован: getDishes() возвращает Promise для массива объектов { id, name, price }, а getDish(slug) ищет один элемент.
- В
app/page.jsxсделайтеHomeфункциейasyncи выполнитеawait getDishes()в переменнуюdishes. - Внутри
<ul id="dish-list">отрендерите по одному<li>для каждого блюда сkey={dish.id},id={dish.id}и сnameблюда в качестве его текста. app/menu/[slug]/page.jsxпоказываетUnknown dishдля каждого URL: он деструктурируетparamsбез ожидания (безawait). Используйтеawaitдляparams, чтобы поиск получил настоящийslug. Переход по адресу/menu/carbonaraдолжен показыватьCarbonaraв#dish-nameи егоpriceв#dish-price.
Попробуйте сами
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Все уроки раздела Основы Next.js
2Маршрутизация и ссылки
Папки как маршрутыВложенные маршрутыСвязывание страницДинамические маршрутыСтраницы 404 (Not Found)Итоги: Маршрутизация5Данные на сервере
Асинхронные компонентыОжидание параметров маршрутаДва запроса одновременноСостояния загрузкиОбработка ошибокИтоги: получение данных