まとめ：データ取得
CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 28/47。
チャレンジ
中級章のまとめ: すべてをサーバー上で読み込むメニュー。
lib/data.js が提供されており、ロックされています: getDishes() は { id, name, price } オブジェクトの配列を返す Promise を返し、getDish(slug) は単一のオブジェクトを検索します。
app/page.jsx内で、Homeをasync関数にし、await getDishes()の結果をdishes変数に代入します。<ul id="dish-list">内に、料理ごとに<li>を 1 つずつレンダリングし、key={dish.id}、id={dish.id}、およびテキストとして料理のnameを指定します。app/menu/[slug]/page.jsxはすべての URL に対してUnknown dishを表示します:paramsをawaitせずに非構造化割り当てを行っています。検索で実際の slug が取得できるようにparamsをawaitしてください。/menu/carbonaraにアクセスしたときに、#dish-nameにCarbonaraが表示され、#dish-priceにその価格が表示される必要があります。
自分で試してみよう
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}