요약: 레이아웃
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 16번째.
챌린지
중급챕터 요약: Coddy Eats에 공유 nav와 실제 탭 제목을 포함한 셸을 만듭니다.
app/layout.jsx에서,<body>내부 및{children}위에id="nav"를 가진<nav>를 추가하고,id="home-link"와Home텍스트를 가진/경로의<Link>및id="menu-link"와Menu텍스트를 가진/menu경로의<Link>를 포함하세요.- 레이아웃에서
metadata제목을 정확히Coddy Eats로 변경하세요. app/menu/page.jsx에서 제목이Our Menu인metadata객체를 export하여 메뉴 탭 이름이 지정되도록 하세요.
테스트는 두 페이지의 탭 제목을 읽고 /menu로 이동한 후에도 nav가 남아 있는지 확인합니다.
직접 해보기
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}