Next 13 공식문서 읽기 (3)

라우팅 기본

모든 애플리케이션의 뼈대는 라우팅이다.
라우팅의 기본 개념과 Next.js에서 라우팅 처리하는 방법에 대해서 소개한다.

 

 

용어

next13 tree

• 트리 (Tree) : 계층 구조를 시각화하기 위한 규칙.
  • 부모 및 자식 구성 요소가 있는 구성 요소 트리
  • 폴더 구조
    • 하위 트리 : 트리의 일부, 새 루트(first)에서 시작하여 Leaves(last)에서 끝난다.
    • 루트 : 트리 또는 하위트리 (예: 루트 레이아웃)의 첫 번째 노드
    • Leaf : URL 경로의 마지막 세그먼트와 같이 하위 트리에 자식이 없는 노드

next 13 url

 

• URL 세그먼트 : 슬래시로 구분된 URL 경로의 일부
• URL 경로 : 도메인 다음에 오는 URL의 일부 ( 세그먼트로 구성된다.)

 

 

App Router

Next.js v13은 React Server Components 기반의 새로운 App router를 선보였다.

• 공유 레이아웃
• 중첩 라우팅
• 로딩 상태
• 오류 처리 등을 지원한다.

App Router는 App이라는 새로운 디렉터리에서 작동한다. App 디렉터리는 페이지 디렉터리와 함께 작동하여 점진적인 채택을 허용한다.

이전 동작을 위해 페이지 디렉터리에 다른 경로를 유지하면서 애플리케이션의 일부 경로를 새로운 동작으로 선택할 수 있다.

중요

App Router는 Page Router보다 우선이다. 디렉터리가 동일한 URL 경로로 사용하지 않아야 하며, 충돌을 방지하기 위해서 Build 과정에서 오류가 발생한다.

 

 

기본 내부 구성요소

기본적인 앱 내부 구성요소

권장 사항:서버 구성 요소를 처음 사용하는 경우 서버 페이지를 확인한다.

 

 

폴더 및 파일 역할

Next.js는 파일 시스템 기반 라우터를 사용한다. ( 파일을 이용하여 라우터를 설정한다.)

• page.js
• Route 세그먼트에 표시되는 UI를 만들기 위해서 파일을 사용한다.(특수파일 : loading, layout, error... )

 

 

경로 세그먼트

경로의 각 폴더는 Route Segment를 나타낸다. 각 Route Segment는 URL 경로의 해당 세그먼트에 매핑된다.

 

 

중첩 라우팅

중첩 라우팅은 폴더를 서로 중첩하여 만들 수 있다. 예를 들어 App 디렉터리에서 두 개의 새 폴더를 중첩하여 /dashboard/setting 경로를 추가할 수 있다.

/dashboard/setting 는 세 가지의 세그먼트로 구성된다.

• / : 루트 세그먼트
• dashboard : 세그먼트
• setting : Leaf 세그먼트

 

 

파일 규칙

Next.js는 중첩된 경로에서 특정 동작을 사용하여 UI를 만드는 특수한 파일을 지원한다.

• layout : 세그먼트 및 해당 자식에 대한 공유 UI
• page : 경로의 고유 UI 및 경로를 공개적으로 접근할 수 있도록 한다.
• loading : 세그먼트 및 해당 자식에 대한 Loading UI
• not-found : 세그먼트 및 해당 자식에 대한 Not-Found UI
• error : 세그먼트 및 해당 자식에 대한 Error UI
• global-error : 글로벌 Error UI
• route : Server-side API 엔드포인트
• template : layout과 비슷하지만 자식요소마다 새로운 인스턴스를 생성
• default : 병렬 Route에 대한 폴백 UI

 

 

구성요소 계층

라우터 세그먼트의 특수 파일에 정의된 반응 구성요소는 특정 계층으로 렌더링 된다.

• layout
• template
• error.js : error boundary
• loading.js : suspense boundary
• not-found.js : error boundary
• page.js or 중첩된 layout.js

 

 

중첩 라우터에서 세그먼트의 구성요소는 상위 세그먼트 구성요소 내부에 중첩된다.

 

Colocation

특수 파일 외에도 App 디렉터리의 폴더 내에 자신의 파일을 배치할 수 있는 옵션이 있다. (예: 구성요소, 스타일, 테스트 등)

폴더는 route로 정의되지만 page.js 또는 route.js에서 반환되는 내용만 주소로 지정이 가능하다.

 

 

• /component/button : 라우팅 불가
• /lib/constants : 라우팅 불가
• /dashboard : 라우팅 가능 ( /dashboard/page 아님!)
• /dashboard/nav : 라우팅 불가
• /api : 라우팅 가능 ( /api/route 아님!)
• /api/db : 라우팅 불가

 

 

고급 라우팅 패턴

앱 라우터는 고급 라우팅 패턴을 구현하는데 도움이 되는 규칙을 제공한다.

• 병렬 라우트 :독립적으로 탐색할 수 있는 두 개 이상의 페이지를 동일한 페이지에서 동시에 표시할 수 있다. 자체 하위 탐색이 있는 분할 보기 (예: 대시보드)에 사용할 수 있다.
• 라우팅 가로채기 : 경로를 가로채서 다른 경로의 컨텍스트에 표시할 수 있다. 현재 페이지의 컨텍스트를 유지할 때 사용할 수 있다. (예 : 하나의 작업을 편집하거나 피드에서 사진을 확장하는 동안 모든 작업을 볼 수 있다.)

이러한 패턴을 통해서 복잡했던 기능을 쉽게 구현할 수 있다.

 

 

 

 

사진 및 내용 출처 : NEXT 공식문서 (https://nextjs.org)

 

---