Next.js 14버전 layout으로 Nav Bar 만들기

항상 유지되는 Nav Bar를 만들어 보는건 처음이었다. React에서 했던 것처럼 공통 컴포넌트를 통해 만들어 봤더니 역시나 엄청 깜박거렸다. 알아보니 Next.js 14에선 layout을 통해 공통적으로 사용되는 UI를 계층적으로 관리할 수 있는 굉장한 기능이 있었다.

layout이란?

layout은 여러 경로 간에 공유되는 UI이다. layout은 상태를 유지하며 다시 렌더링 되지 않는다. 또한 여러개를 중첩 할 수도 있다.
기본적으로 파일에서 React 요소들을 리턴하는 layout을 정의할 수 있다.
아래와 같은 파일 구조에서 /dashboard와 /dashboard/settings의 children에 모두 적용된다.

아래의 코드를 보면 layout.tsx에 공통으로 사용되는 UI를 위치시키고 children을 포함하고 있는 것을 확인할 수 있다.

// app/dashborad/layout.tsx
export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}

layout을 사용하면 Nav Bar가 사용되는 곳과 사용되지 않는 곳을 파일 계층으로 나눠서 일괄적으로 깜박임 없이 적용시킬 수 있다!

그리고 14버전은 아직 검색했을때 정보가 적어 공식 문서를 봐야만 한다. 초반에 개인적으로 헷갈렸던 부분인데

꼭 App Router로 체크해야 14버전 내용으로 확인할 수 있다! 화면 왼쪽 상단에 Using App Router로 체크한 것을 확인할 수 있다.

참조

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts