Next.js

App Router 구조 이해하기

이전 절에서는 App Router의 파일 기반 라우팅과 page.tsx가 UI를 렌더링하는 구조를 확인했습니다. 또 동적 라우트로 가변 URL을 처리하는 방법도 살펴봤습니다.

App Router에서 폴더 중첩이 URL 경로와 레이아웃 계층으로 연결되는 방식을 확인합니다.

App Router 경로 구성 흐름

1

중첩 라우트의 기본 원리

App Router에서 중첩 라우트는 폴더 구조와 layout.tsx 파일의 조합으로 구현됩니다.

2

중첩 라우트 구현 실습: 대시보드 구조 만들기

이전 장에서 만들었던 대시보드 예시를 확장하여, 중첩 라우트와 레이아웃의 관계를 명확히 이해해 봅시다.

3

레이아웃의 장점과 고려사항

장점 UI 일관성: 웹사이트의 특정 섹션에 일관된 디자인과 기능을 적용하기 용이합니다.

4

중첩 라우트

app/dashboard/settings는 /dashboard/settings 경로가 됩니다.