NextJS에서 메뉴 컴포넌트

다음 강의들에서 우리는 사이트 메뉴 생성을 위한 NextJS의 특별한 기능들을 학습할 것입니다. 이를 위해서는 사이트 메뉴 컴포넌트가 필요합니다. 본 강의에서는 이 컴포넌트의 틀을 만들고, 링크들은 다음 강의들에서 삽입하도록 하겠습니다.

우리의 틀은 다음과 같이 보일 것입니다:

/src/comps/menu/menu.jsxexport default function Menu() {
  return <>
    ...
  </>;
}

이 틀을 사이트의 기본 레이아웃에 삽입해 봅시다:

app/layout.jsximport Menu from '@/comps/menu/menu.jsx';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>
            <Menu />
          </nav>
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}