- 라우팅 만들기
app 경로 안에 있는 폴더들은, 라우트들을 정의하기 위해 사용된다.
각각 폴더들은 URL segment로 맵핑하는 route segment를 나타낸다. 중첩 라우트들을 만들기 위해, 각각의 폴더 안에 중첩 시킬 수 있다.
page.js 파일은 공개적으로 접근 가능한 라우트 segments를 만들기 위해 사용된다.
이 예에서, /dashboard/analytics URL 경로는 접근 불가능하다. 왜냐하면 이 경로에 해당하는 page.js 파일이 없기 때문이다. 이 폴더는 컴포넌트, 스타일시트, 이미지들, 다른 파일들을 저장하기 위해 사용되어진다.
- UI 만들기
특별한 파일 협약들은 각각 라우트 segment의 UI를 만들기 위해 사용되어진다. 가장 흔한 것들은 라우트에 대한 특별한 UI를 보여주기 위한 페이지들이나, 다양한 라우트들에게 공유되어지는 레이아웃들이다.
예를 들어서, 너의 첫번째 페이지를 만들기 위해, app 경로안에 page.js 를 만들고 React 컴포넌트를 추출한다.
- Route Groups
app 폴더의 계층은 URL 경로들과 직접적으로 맵핑된다. 그러나, 라우트 그룹을 만듦으로써 이 패턴은 깨질 수 있다. 라우트 그룹은 사용되어진다 :
- URL 구조에 영향을 끼치지 않고 라우트들을 조직화한다.
- 특별한 라우트 segment를 레이아웃으로 선택한다.
- 너의 어플리케이션을 분리함으로써 다양한 root layout을 만든다.
- 약속
라우트 그룹은 (폴더네임) 식으로 감싸져서 만들어질 수 있다.
URL 구조에 영향을 끼치지 않고 라우트들을 조직화한다.
URL 구조에 영향을 끼치지 않고 라우트들을 조직화하기 위해서, 관계있는 라우트들끼리 그룹을 만든다. 괄호안에 폴더명은 URL로부터 생략되어진다.
(marketing) 이나 (shop) 안에 있는 라우트들은 같은 URL 계층을 공유하지만, 너는 그들의 폴더 안에 layout.js 파일을 추가함으로써 각각 그룹마다 다른 레이아웃을 만들 수 있다.
특별한 라우트 segment를 레이아웃으로 선택한다.
레이아웃 안에서 특정한 라우트를 선택하기 위해, 새로운 라우트 그룹을 만들고, 같은 레이아웃을 공유하는 라우트들을 그룹으로 옮겨라. 그룹 바깥에 있는 라우트들은 그 레이아웃을 공유하지 않는다.
다양한 root layout 만들기
다양한 Root layout 을 만들기 위해서, 가장 최상단의 layout.js를 지운다. 그리고 각각 라우트 그룹마다 layout.js 를 만들어준다. 이것은 완전히 다른 UI나 경험을 가지고 있는 섹션들 안에서의 어플리케이션을 분리하기 유용하다. html과 body 태그는 각각의 root layout에서 추가되어야 한다.
위의 예에서, marketing과 shop은 각각 다른 레이아웃을 갖는다.
알아두면 좋을 점 :
- 라우트 그룹들의 네이밍은 조직화외에 특별한 의미가 없다. 그들은 URL경로에 영향을 끼치지 않는다.
- 라우트 그룹들 안에 있는 라우트들은 같은 URL 경로를 해석하면 안된다. 예를들어서 라우트 그룹들은 URL구조에 영향을 끼치지 않기 때문에, (marketing)/about/page.js 와 (shop)/about/page.js가 각각 /about 페이지를 가지고 있다면 에러를 일으킬 것이다.
- 동적인 segments
너가 만약 정확한 segement 이름을 미리 알지 못하고, 동적인 데이타로부터 새로운 라우트들을 만들고 싶다면, 빌드시에 미리 render 되거나 요청시에 채워지는 동적인 segments들을 사용할 수 있다.
약속
동적인 segment는 폴더명을 대괄호로 묶음으로써 만들어 질 수 있다. 예를 들어서 [id]나 [slug]
동적인 segments들은 레이아웃, 페이지, 헤드컴포넌트들에게 params로 전달된다.
예를 들어서, 간단한 블로그는 [slug]가 blog 게시글들을 위한 동적인 segment 이고 app/blog/[slug]/page.js의 라우트 경로를 포함할 수 있다.
알아두어야할점 : 동적인 segments들은 페이지경로 안에 있는 동적인 경로들에게 동일하다.
모든 segments
동적인 segments들은 [...폴더명] 으로 작성함으로써 후속 segements들로 확장시킬수 있다.
예를 들어 app/shop/[...slug]/page.js는 /shop/clothes에 매치되지만, shop/clothes/tops, shop/clothes/tops/t-shirts 들에도 매치된다.
선택적인 포괄 segements
포괄적인 segments들은 [[...폴더명]] 식으로 파라미터를 포함함으로써 선택적으로 만들어 질 수 있다.
예를 들어서, app/shop/[[...slug]]/page.js는 /shop 에도 매치되고, /shop/clothes, /shop/clothes/tops /shop/clothes/tops/t-shirts 에도 매치된다.
포괄적과 선택적 포괄적의 차이는 선택적 포괄은 파라미터가 없는 /shop 경로도 포함한다는 것이다.
