Next.js - NestedLayout 사용 방법 (Pages Router)

NestedLayout?🤔

거의 모든 웹 어플리케이션에서 SideBar나 NavBar를 구현해 Layout은 그대로 두되 안에있는 페이지만 바꾸는 SPA 방식을 많이 채택한다.

 

React.js에서는 SPA 방식의 구현이 당연하지만 Next.js는 SSR의 렌더링 방식이라 조금 다른데 이걸 Next.js도 알고 있는지 여러가지 방법을 제시해주고 공식문서에도 아주 잘 설명이 되어있다.

 

하지만 그것보다 더 간단하게 기존 13버전 위/아래 버전의 두가지 방법을 소개해볼까 한다.

 

Next.js 13 ↓😳

"getLayout"을 사용하는 방법이 가장 편하고 깔끔했다.

 

1, _app.jsx(tsx)에 getLayout을 적용하자.

 

2. 실제 사용할 Layout Component를 구성.

대부분 NavBar를 사용하고 children안에서 페이지만 바꾸길 원할듯...

 

3. NestedLayout Component를 구성.

간단하게 감쌀 수 있는 Layout 하나만 만들어 주면 된다.

 

4. 적용할 페이지에 getLayout을 적용

Page에 getLayout을 적용하고 만들어뒀던 Layout Component안에 NestedLayout Component로 한번 더 감싸주면 된다.

 

 

이렇게 하면 간단하게 NestedLayout을 적용할 수 있다.