app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑되지만, 의도적으로 해당 폴더가 URL 경로에 포함되지 않도록 할 수 있다.
Convention(컨벤션)
경로 그룹은 폴더 이름을 괄호로 묶어 생성할 수 있다.(ex: (folderName))
URL 경로에 영향을 주지 않고 경로 구성하기
아래 구조에서 (marketing)과 (shop)은 URL 경로에서 제외된다.
URL 경로에서 제외되더라도, 아래 구조처럼 내부에 layout.js 파일을 추가해 서로 다른 레이아웃을 적용할 수 있다.
Opting specific segments into a layout(특정 세그먼트를 레이아웃으로 선택하기)
특정 경로를 레이아웃으로 선택하려면 새 경로 그룹(ex: (shop))을 생성하고 동일한 레이아웃을 공유하는 account, cart을 생성된 경로 그룹으로 이동한다. 이제 그룹 외부의 checkout과 레이아웃을 공유하지 않는다.
설명이 헷갈릴 수 있지만, 결론적으로 일반적인 레이아웃 중첩과 같이 폴더별로 다른 레이아웃을 적용할 수 있다는 말이다.
Creating multiple root layouts(여러 루트 레이아웃 만들기)
루트 레이아웃을 여러개 만들려면 최상위 layout.js 파일을 제거하고 각 경로 그룹 내에 layout.js 파일을 추가한다. 이 방법은 애플리케이션을 완전히 다른 UI 또는 경험을 가진 섹션으로 분할하는 데 유용하다. 루트 레이아웃을 여러개 만든다면, 각 루트 레이아웃에 <html> 및 <body> 태그를 추가해야 한다.
아래의 구조에서, (marketing)과 (shop)은 모두 각각의 루트 레이아웃을 가지고 있다.
마지막으로 여러 루트 레이아웃을 사용할 때의 주의사항이다.
- 최상위
layout.js파일 없이 여러 루트 레이아웃을 사용하는 경우,page.js파일은 경로 그룹 중 하나에 정의되어야 한다.(ex:app/(marketing)/page.js) - 여러 루트 레이아웃을 탐색하면 클라이언트 측 탐색과 달리 전체 페이지가 로드된다. 예를 들어,
app/(shop)/layout.js를 사용하는/cart에서app/(marketing)/layout.js를 사용하는/blog로 이동하면 전체 페이지가 로드된다.(이는 여러 루트 레이아웃에만 적용된다.)
'스터디' 카테고리의 다른 글
| [Next.js] Dynamic Routes(동적 경로) (0) | 2023.09.26 |
|---|---|
| [Next.js] Linking and Navigating(라우트 탐색) (0) | 2023.08.17 |
| [Next.js] Pages and Layouts(페이지와 레이아웃) (0) | 2023.08.12 |
| [Next.js] Defining Routes(라우트 정의) (0) | 2023.08.11 |
| [Next.js] Routing (0) | 2023.08.05 |
