[next 14 공식문서 부시기] 2. Next.js 라우팅 맛보기

App 라우터

 

13 버전부터 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components 를 기반으로 구축된 새로운 App Router를 도입했습니다.

 

App Router 는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 pages 디렉토리와 함께 작동하여 점진적인 채택을 허용합니다. Pages Router 문서 참조

 

기본적으로 앱 내부의 구성 요소는 React Server Components입니다. 이는 성능 최적화에 유리하고 Client Components도 사용할 수 있습니다.

App 라우팅 관련 파일

 

• layout : 공통적으로 감싸지는 ui 파일
• page : 페이지 관련 ui 파일
• loading : 로딩시 보여질 대체 ui 파일
• not-found : 경로내 잘못된 접근시 보여질 대체 ui 파일, 또한 404 코드 반환
• error : 에러발생시 보여질 대체 ui 파일
• global-error : 루트 레이아웃 또는 템플릿 내의 오류를 처리할때 error.js 처럼 global-error.js 작성해서 사용
• route : 지정된 경로에 대한 사용자 지정 요청 처리할 수 있다
• template : layout 처럼 페이지를 래핑하며, 경로 간에 유지되고 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시 각 자식에 대해 새 인스턴스를 만듭니다.
• default : 현재 URL 을 기준으로 활성 상태를 복구할 수 없을 때 렌더링할 default.js 파일을 정의할 수 있습니다.

라우터와 폴더 및 파일의 관계

 

Next.js 는 다음과 같은 파일 시스템 기반 라우터를 사용합니다.

 

• 폴더는 경로를 정의하는 데 사용됩니다. 경로는 루트 폴더부터 page.js 파일이 포함된 최종 리프 폴더까지 파일 시스템 계층 구조를 따라가는 중첩된 폴더의 단일 경로입니다.
• UI를 만드는 데 사용되는 특수 파일을 통해 경로 세그먼트를 구성합니다.

경로 설정

 

중첩 경로 (Nested Routes)

중첩된 경로를 만들려면 폴더를 서로 중첩하면 됩니다. 예를 들어 앱 디렉터리에 두 개의 새 폴더를 중첩하여 경로를 추가할 수 있습니다.

 

app/blog

동적 경로 (Dynamic Routes)

 

• 기본 형태

Route	URL	params
app/blog/[slug]/page.js	/blog/a	{ slug: 'a' }

• 모든 세그먼트 캡처 형태 (Catch-all Segments)

Route	URL	params
app/shop/[...slug]/page.js	/shop/a	{ slug: ['a'] }
app/shop/[...slug]/page.js	/shop/a/b	{ slug: ['a', 'b'] }

• 선택적인 모든 세그먼트 캡처 형태 (Optional Catch-all Segments)

Catch-all Segments 와 차이점은 파라미터가 없어도 접근이 접근이 가능함

 

Route	URL	params
app/shop/[[...slug]]/page.js	/shop	{}
app/shop/[[...slug]]/page.js	/shop/a	{ slug: ['a'] }
app/shop/[[...slug]]/page.js	/shop/a/b	{ slug: ['a', 'b'] }

경로 그룹 (Route Groups)

• 기본 모양 : (folderName)
• 라우팅에 영향을 주지 않아 URL 경로에 포함되지 않음

라우팅 제외 폴더 (Private Folders)

• 기본 모양 : _folderName
• 라우팅 폴더내에서 폴더 및 모든 하위 폴더가 라우팅에서 제외됨

병렬 경로 (Parallel Routes)

• 기본 모양 : @analytics (slot이라고 표현)
• URL 구조에 영향을 주지 않고 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다.
• 소셜 사이트의 대시보드 및 피드와 같이 매우 동적인 앱 섹션의 경우 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다.

경로 가로채기 (InterceptingRoutes)

• 기본 모양 : (..)analytics
• 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있습니다.
• (.)동일한 수준 의 세그먼트 일치
• (..)한 수준 위 의 세그먼트와 일치
• (..)(..)두 수준 위의 세그먼트를 일치시키기 위해
• (...)루트 app 디렉토리 의 세그먼트를 일치시키기 위해

주요 특징

 

Colocation

 

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

 

폴더가 경로를 정의하는 동안 page.js 또는 route.js에서 반환된 콘텐츠만 공개적으로 주소를 지정할 수 있기 때문입니다.

Component Hierarchy

 

경로 세그먼트의 특수 파일에 정의된 React 컴포넌트들은 특정 계층 구조로 렌더링됩니다

 

또한 중첩 경로에서는 세그먼트의 구성 요소가 상위 세그먼트의 구성 요소 내에 중첩됩니다.

 

---

참고

https://nextjs.org/docs