1단계: 기본 셸 구성
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨. 47개 중 39번째.
챌린지
쉬움app/layout.jsx에 셸을 작성하세요.
./globals.css와next/link에서Link를 가져오세요.title객체를 포함하는metadata를 내보내세요.default는Coddy Eats로,template은%s | Coddy Eats로 설정하세요.<body>안에 세 개의 링크를 담는<nav className="nav">를 추가하세요. 첫 번째 링크는className="brand"를 사용하고/로 연결되며Coddy Eats를 표시합니다. 두 번째 링크는id="nav-menu"를 사용하고/로 연결되며Menu를 표시합니다. 세 번째 링크는id="nav-desserts"를 사용하고/?category=dessert로 연결되며Desserts를 표시합니다.- nav 아래에서
{children}을<div className="container">로 감싸세요.
직접 해보기
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Next.js 핵심 (Next.js Essentials)의 모든 레슨
8프로젝트: Coddy Eats
1단계: 기본 셸 구성
2단계: 메뉴 그리드3단계: 요리 페이지4단계: 로딩 상태5단계: 페이지 제목6단계: 장바구니에 담기7단계: 카테고리 필터8단계: 리뷰 남기기9단계: 실시간 검색