The app Router

넥스트 13버전에서는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 에러 핸들링을 포함한 그 이상의 기능을 제공하는 리액트 서버 컴포넌트를 기반의 새로운 App Router 방식을 도입하였다.

app 폴더에서 동작하며, 각 폴더는 URL Segment 를 의미한다.
Root 폴더에서 page.js를 포함한 leaf 폴더까지의 트리구조를 가지고 있다.

Nested Routes

중첩 라우트를 생성하기 위해선, 폴더들을 중첩시키면 된다. 예를 들어, /dashboard/settings 의 경로를 가지려면 app 디렉토리에 두 개의 폴더를 생성하여 중첩시키면 된다.
The /dashboard/settings route is composed of three segments:

/ (Root segment)
dashboard (Segment)
settings (Leaf segment)

파일 컨벤션

next.js 는 특정한 목적을 가진 파일셋을 제공한다.

• layout: Shared UI for a segment and its children
• page: Unique UI of a route and make routes publicly accessible
• loading: Loading UI for a segment and its children
• not-found: Not found UI for a segment and its children
• error: Error UI for a segment and its children
• global-error: Global Error UI
• route: Server-side API endpoint
• template: Specialized re-rendered Layout UI
• default: Fallback UI for Parallel Routes

컴포넌트 계층구조

특수한 파일셋으로 이루어진 리액트 컴포넌트들은 특별한 계층구조로 렌더링 된다.

• • layout.js
• template.js
• error.js (React error boundary)
• loading.js (React suspense boundary)
• not-found.js (React error boundary)
• page.js or nested layout.js

중첩된 라우트에서 세그먼트의 구성 요소는 해당 세그먼트의 부모 세그먼트의 구성 요소 안에 중첩됩니다.

Colocation

특별한 파일 외에도 앱 디렉토리 내의 폴더에 자체 파일(예: 컴포넌트, 스타일, 테스트 등)를 함께 두는 옵션이 있습니다.

이는 폴더가 경로를 정의하는 반면, page.js나 route.js에서 반환된 내용만이 공개적으로 접근 가능하기 때문입니다.