[Next.js] 중첩 공통 Layout

프로젝트에서 공통으로 사용하는 Layout 안에 특정 page 에서만 다른 공통 Layout 을 사용하고싶을때
Ex: 공통 Header 를 사용중인데 특정 page 에서는 Header + SubHeader 를 사용하고싶을때 사용할수있다.

 

SubPage

SubPage.getLayout 안에 함수를 정의한다

기존 Header 안에 사용할 SubHeader 추가

 

subHeader

서브헤더안에는 내려받을 children 정의

 

_app

들어온 컴포넌트 안에 getLayout 이 있으면 geyLayout을 리턴하는 정의를 해주고

없다면 기존 Header 만 리턴하게 정의해준다