NextJS 공식문서 파헤치기 (Routing Fundamentals)

라우팅 기본 사항

1️⃣ App Router

• Nextjs 13 버전에서 React Server Components 를 기반으로 새롭게 구축 하였다.
• app 이라는 이름의 디렉토리를 통해 기본 레이아웃을 정의한다.
• 기본적으로 내부 컴포넌트는 React Server Components 이다. use client 예약어를 사용하여 Client Components를 사용할 수도 있다.
  (Server Components에 대한 자세한 내용은 추후에 다루도록 하겠다.)

2️⃣ 폴더와 파일의 역할

• 폴더는 경로를 정의하는 데 사용된다.
• 파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용된다.
  • 경로의 각 폴더는 경로 세그먼트를 나타낸다. 각 경로 세그먼트는 URL 경로 의 해당 세그먼트 에 매핑된다.
• 파일 이름 규칙
  • layout: 세그먼트 및 해당 자식에 대한 공유 UI
  • page: 경로의 고유한 UI를 제공하고 경로를 공개적으로 접근 가능하게 만듬
  • loading: 세그먼트 및 해당 자식에 대한 UI 로딩
  • not-found: 세그먼트 및 해당 자식에 대한 UI를 찾을 수 없음
  • error: 세그먼트 및 해당 자식에 대한 오류 UI
  • global-error: 글로벌 오류 UI
  • route: 서버 측 API 엔드포인트
  • template: 전문화된 재렌더링 레이아웃 UI
  • default 병렬 경로에 대한 fallback UI
• 중첩 경로
  • 경로를 중첩하고 싶을때에는 폴더를 중첩하여 만들면 된다.
  • ex) /dashboard/settings 경로는 app > dashboard > settings 순서로 폴더가 중첩되어 있다.

3️⃣ 구성 요소 계층

• 경로 세그먼트의 특수 파일에 정의된 React 구성 요소는 특정 계층 구조로 렌더링 된다.
• 아래 순서대로 계층 구조를 가짐
  • layout.js
  • template.js
  • error.js (오류 경계에서 잡힘)
  • loading.js (서스펜스 경계에서 잡힘)
  • not-found.js (오류 경계에서 잡힘)
  • page.js 또는 중첩 layout.js(부모 세그먼트의 구성요소 안에 중첩됨)

4️⃣ 공동배치

• page.js 나 route.js 가 아닌 다른 폴더 내의 파일들은 공개적인 주소가 되지 않는다.

5️⃣ 고급 라우팅 패턴

• 병렬 경로(Parallel Routes): 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 가능하다.
  • ex) 대시보드 => (team) + (analytics)
• 경로 가로채기(Intercepting Routes): 현재 페이지의 맥락을 유지하면서 다른 경로의 맥락을 표시할 수 있다.
  • ex) 모달 => (url을 통해 모달 컨텐츠를 공유하능하게 함), (이전 경로로 이동 === 모달 닫기), (앞으로 이동 === 모달 열기)

📚 REFERENCE

• https://nextjs.org/docs/app/building-your-application/routing