요약: 내비게이션
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 38번째.
챌린지
중급챕터 요약: 하나 작은 앱, URL의 양방향: 현재 위치를 읽는 내비게이션과 쿼리 스트링으로 필터링되는 메뉴 페이지입니다.
components/Nav.jsx에서usePathname()을 호출하고, 각link의href가 현재 경로와 일치할 때className을"nav-link active"로, 그렇지 않으면"nav-link"로 지정하세요.Home은/,Menu는/menu입니다.app/menu/page.jsx에서searchParams로부터category를 읽어오고(promise임을 기억하세요) 일치하는dishes만 표시하거나,category가 주어지지 않은 경우 모든 항목을 표시하세요.
/menu?category=pizza는 4개의 dishes 중 2개를 표시해야 하며, Menu link가 하이라이트되어야 합니다.
직접 해보기
import './globals.css';
import Nav from '../components/Nav.jsx';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Nav />
{children}
</body>
</html>
);
}