NextJS 라우팅 원리

References

Routing
Defining Routes

Roles of Folders and Files

Next.js 는 파일 시스템 기반 라우터이다.

• Folders: 라우트(경로)를 정의하기 위해 사용된다.
• Files: 파일들은 라우터 요소를 표현하는 UI를 생성하기 위해 사용된다.

Route Segements

각각의 폴더는 라우트 요소를 나타내며 이 요소들은 URL 요소에 그대로 맵핑된다.

예를 들어 아래와 같은 URL 이 있을 경우
tistory.com/dashboard/posts

각각 app이란 최상위 폴더 하위에 dashboard 폴더가 생성되고, dashboard 폴더 하위에 posts 가 생성되는 격이다.

그리고 각 폴더 내 page.js(또는 page.tsx) 파일이 라우트 요소의 UI 요소들을 표현한다.

File Conventions

1. layout: 요소와 그 하위 폴더(children이라고 표현)들에서 사용하는 공유되는 UI 이다.
2. page: 각 라우트의 유니크한 UI이다. 그리고 각 라우터에 대하여 외부에서 접근 가능하게 하는 파일이다.
3. route: Server-side API endpoint

Component Hierarchy

중첩된 경로에서 세그먼트의 구성 요소는 상위 세그먼트의 구성 요소 안에 중첩(nested)된다.

Colocation

page 파일이 있을 경우에만 공개적으로 라우터가 작동하기 때문에, 경로 이름 이외의 폴더를 놓아도 괜찮다. (ex. components, styles 등)

Templates

layout 과 비슷하지만, layout은 라우트 내에서 state를 유지하는 반면에, templates는 각 하위 자식들을 위해서 새로운 인스턴스를 생성한다.
navigation에서 사용 효과를 재동기화하거나 하위 클라이언트 컴포넌트의 상태를 재설정할 때 유용하다고 한다.