[Next.js] 레이아웃 설정

SUN·2024년 11월 30일
0

Next.js - app router

목록 보기
4/21

1. 개요

공통된 레이아웃을 모든 페이지 또는 특정 페이지에 적용한다.

2. 사용법

  • 특정 폴더 밑에 layout이라는 이름으로 파일을 만들면 폴더 내 모든 페이지 컴포넌트에 똑같이 적용되는 레이아웃이 된다.
  • layout.tsx는 해당 폴더의 모든 페이지의 레이아웃으로 적용된다.
  • layout이 있는 폴더의 하위 폴더에 있는 페이지에도 레이아웃이 적용된다.
  • 하위 폴더에 또 layout.tsx가 있다면 중첩되어 적용된다.

원하는 폴더에만 적용하기

경로와 관계없이 특정 페이지에만 적용되는 레이아웃

route group을 사용한다.

  1. app폴더 아래 (폴더이름)으로 폴더를 만들어준다.
  2. 소괄호로 만든 폴더는 route group이라고 하는데 경로상에 아무런 영향을 미치지 않는 폴더이다.
  3. 해당 폴더에 layout 파일을 만들어준다.
  4. route group 밖의 페이지는 layout이 적용되지 않는다.
profile
안녕하세요!

0개의 댓글