Nextjs 공통 레이아웃 만들기

Nextjs 13버전 이후 공통 레이아웃 만들기

Nextjs 13 버전 (App Router) 이후 버전 기본 구조는 이렇다.

src
 ┗ app
    ┣ favicon.ico
    ┣ globals.css
    ┣ layout.tsx
    ┗ page.tsx

 

src(source)를 쓸 건지는 옵션이지만 폴더 구조를 좀 더 명확히 하려면 쓰는 게 가독성이 더 좋다.

layout.tsx는 공통 레이아웃을 잡는데 쓰이고, page.tsx는 페이지를 만들때 쓰이는 파일이다.

 

새로운 경로를 만들때에는 app 폴더 안에 notice/page.tsx라고 적으면 notice라는 경로의 페이지가 생성이 된다.

app 폴더 바로 하위에 있는 layout.tsx에 공통으로 쓸 header나 footer를 만들면 모든 페이지가 감싸진다.

 

layout.tsx 파일은 한개만 쓸 수 있는 게 아니라 다른 폴더 안에도 사용할 수 있다.

만약 notice 페이지와 notice 하위 경로에만 공통 레이아웃을 더 추가하고 싶으면 notice 폴더 안에 layout.tsx 파일을 추가하면 된다.

src
 ┗ app
   ┣ notice
   ┃ ┣ layout.tsx
   ┃ ┗ page.tsx
   ┣ favicon.ico
   ┣ globals.css
   ┣ layout.tsx
   ┗ page.tsx

 

 

하지만 나는 404 페이지를 제외한 페이지만 header와 footer를 추가하고 싶었다.

공식문서를 보면 폴더명을 소괄호() 로 감싸주면 경로에 영향을 주지 않고 그룹을 지을 수 있다.

src
 ┗ app
   ┣ (baseLayout)
   ┃ ┣ _component
   ┃ ┃ ┣ Footer.tsx
   ┃ ┃ ┣ Header.tsx
   ┃ ┃ ┣ Main.tsx
   ┃ ┃ ┗ index.tsx
   ┃ ┣ layout.tsx
   ┃ ┗ page.tsx
   ┣ globals.css
   ┣ layout.tsx
   ┗ not-found.tsx

 

app 폴더 바로 하위에 있는 layout.tsx는 기본 설정으로 놔두고, (baseLayout) 라는 그룹으로 감싸준 뒤 layout.tsx 파일을 만들어서 header와 footer를 감싸주면 app 폴더 바로 하위에 있는 not-found.tsx는 영향이 안 가고 (baseLayout) 폴더 안에 페이지들만 영향이 간다.

그리고 app 폴더 바로 하위에 있는 page.tsx를 (baseLayout) 안에 넣어주면 '/' 홈으로 갔을 때 (baseLayout)의 page.tsx 파일이 보이게 된다.

 

공식문서 : https://nextjs.org/docs/app/building-your-application/routing/route-groups