요약: 데이터 패칭
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 28번째.
챌린지
중급단원 요약: 모든 것을 서버에서 로드하는 메뉴입니다.
lib/data.js가 제공되며 잠겨 있습니다: getDishes()는 { id, name, price } 객체 배열에 대한 promise를 반환하고, getDish(slug)는 단일 항목을 조회합니다.
app/page.jsx에서Home을async함수로 만들고,getDishes()를await하여dishes변수에 저장하세요.<ul id="dish-list">내부에서 각 dish당 하나의<li>를 렌더링하고,key={dish.id},id={dish.id}및 dish의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>
);
}