[Next.js] 공통 레이아웃과 _app.js

1. 하나의 공통된 Layout을 쓰는경우

1-1. 공통된 레이아웃을 가진 컴포넌트를 만든다.

children 자리에 현재 페이지의 컴포넌트가 들어옵니다

 

1-2. pages/_app.js 를 만든다.

 

_app 파일에 대해서

1. _app 파일은 서버 요청시 가장 먼저 실행되며, 공통 레이아웃의 역할을 합니다. (Next.js에서 제공하며 반드시 _app의 이름을 사용)
2. _app.js 파일 내부의 App 컴포넌트는 다음과 같은 두 가지 중요한 인수를 받습니다
   • Component: 현재 페이지 컴포넌트를 나타냅니다. 즉, 이후에 라우팅된 페이지 컴포넌트가 Component로 전달됩니다.
   • pageProps: 현재 페이지 컴포넌트의 초기 속성(props)을 나타냅니다. SSR, SSG 등에서 미리 가져온 데이터 등이 포함됩니다.

 

2. 여러개의 Layouts를 사용하는 경우

추가적으로 SubLayout 생성

SubLayout.js

2-1. 함수를 만들어서 넣어줍니다.

getLayout 이라는 함수를 만들어서 넣어줍니다.

2-2. _app 수정하기

해당 페이지에 getLayout이 있다면 그 함수를 가지고와 retrun 시 Component를 값으로 넣어줍니다.

없다면 기존에 만들었던 <Layout> 컴포넌트에 page를 children 으로 받는 함수를  넣어 return 해줍니다.

기존에 만든 공통 레이아웃, 그리고 여러개의 공통 레이아웃을 사용하고자 만든 서브 레이아웃까지 적용하는 방법에 대해 알아보았습니다.