App Router

앱 라우터 소개

지난 몇 달 동안 Next.js 팀은 Next.js와 React 서버 컴포넌트 및 React 18 기능을 통합하기 위해 노력해왔습니다. 이제 새로운 앱 디렉토리에서 이러한 새로운 기능을 사용해 볼 수 있습니다.

앱 라우터는 현재 베타 버전이며 프로덕션 환경에서 사용하지 않는 것이 좋습니다.

기능 개요

다음은 앱 라우터의 새로운 기능을 요약한 것입니다:

라우팅레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 새로운 파일 시스템 기반 라우터입니다.

렌더링클라이언트 및 서버 컴포넌트를 사용한 클라이언트 측 및 서버 측 렌더링. 서버의 정적 렌더링과 동적 렌더링은 Next.js를 통해 더욱 최적화됩니다. Edge 및 Node.js 런타임에서 스트리밍.

데이터 가져오기React 컴포넌트에서 async/await 지원을 통한 간소화된 데이터 불러오기 및 React 및 웹 플랫폼에 부합하는 fetch() API.

캐싱서버 컴포넌트 및 클라이언트 측 탐색에 최적화된 새로운 Next.js HTTP 캐시 및 클라이언트 측 캐시.

최적화기본 브라우저 지연 로딩으로 이미지 컴포넌트가 개선되었습니다. 자동 글꼴 최적화 기능을 갖춘 새로운 글꼴 모듈.

**변환(Transpilation)**로컬 패키지(ex: monorepos) 또는 외부 종속성(ex예: node_modules)에서 종속성을 자동으로 변환하고 번들링합니다.

API

Next.js 전반에 걸친 API 디자인 업데이트. 새로운 API는 API 참조 섹션을 참고하세요.

Tooling

최대 700배 빠른 Rust 기반 Webpack을 대체하는 Turbopack을 소개합니다.

더 자세한 목록은 **앱 라우터 로드맵**에서 확인하세요.

Next.js 라우팅 기본사항

Next.js 13에서는 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 새로운  App Router가 React 서버 컴포넌트 위에 구축되었습니다.

이 페이지에서는 새로운 라우팅 모델의 기본 개념을 소개합니다.

용어

문서 전체에서 이러한 용어가 사용되는 것을 볼 수 있습니다. 다음은 간단한 참조입니다:

!https://blog.kakaocdn.net/dn/NAsLn/btsaTfyIrKV/NjUTnTd2WG01ue74p9QpvK/img.webp

Tree: 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등이 있습니다.

Sub Tree: 트리의 일부로, 새 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다.

Root: 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째 노드입니다.

Leaf: 하위 트리의 노드 중 자식이 없는 노드(예: URL 경로의 마지막 세그먼트)입니다.

!https://blog.kakaocdn.net/dn/AgP0X/btsaR0ITtnM/Q0wdK32QjZzIF9P7TQXAd0/img.webp

URL Segment: 슬래시로 구분된 URL 경로의 일부입니다.

URL Path: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성됨)입니다.

앱 디렉토리

새로운 앱 라우터는 app이라는 새 디렉토리에서 작동합니다. app 디렉터리는 pages 디렉터리와 함께 작동하여 점진적인 적용을 허용합니다. 따라서 애플리케이션의 일부 경로를 새 동작으로 선택하면서 다른 경로는 이전 동작을 위해 페이지 디렉터리에 유지할 수 있습니다.

알아두면 좋습니다: 디렉터리 간 경로는 동일한 URL 경로로 확인되어서는 안 되며 충돌을 방지하기 위해 빌드 시간 오류가 발생할 수 있습니다.

!https://blog.kakaocdn.net/dn/bpGrZS/btsamXgbqkP/xPploiZCDkNZJZHpkzKmdK/img.webp

기본적으로 앱 내부의 컴포넌트는 React 서버 컴포넌트입니다. 이는 성능 최적화를 위한 것으로 쉽게 채택할 수 있습니다. 하지만 클라이언트 컴포넌트를 사용할 수도 있습니다.

권장사항: 서버 컴포넌트를 처음 사용하는 경우 **서버 및 클라이언트 컴포넌트 페이지**를 확인하세요.

앱 내 폴더 및 파일

app 디렉토리에 있습니다:

폴더는 경로를 정의하는 데 사용됩니다. 경로는 중첩된 폴더의 단일 경로로, root 폴더에서 page.js 파일이 포함된 최종 leaf 폴더까지 계층 구조를 따릅니다. 파일은 route segment에 표시되는 UI를 만드는 데 사용됩니다. **특수 파일**을 참조하세요.

Route Segments

Route의 각 폴더는 route segment를 나타냅니다. 각 route segment는 URL route의 해당 세그먼트에 매핑됩니다.

!https://blog.kakaocdn.net/dn/c82AJc/btsaRw2nq79/KGVzGkUP8ZHrnyfV2dujpk/img.webp

중첩된 Routes

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

/dashboard/settings 경로는 세 개의 세그먼트로 구성됩니다:

• / (root 세그먼트)
• dashboard (세그먼트)
• settings (leaf 세그먼트)

파일 규칙

Next.js는 중첩된 경로에서 특정 동작을 하는 UI를 생성하기 위한 특수 파일 세트를 제공합니다:

page.js: 경로의 고유한 UI를 생성하고 경로를 공개적으로 액세스할 수 있도록 합니다.

route.js: 경로에 대한 서버 측 API 엔드포인트를 생성합니다.

layout.js: 세그먼트와 그 하위 세그먼트에 대한 공유 UI를 만듭니다. 레이아웃은 페이지 또는 하위 세그먼트를 래핑합니다.

template.js: 탐색에 새 컴포넌트 인스턴스가 마운트된다는 점을 제외하면 layout.js와 유사합니다. 이 동작이 필요하지 않으면 레이아웃을 사용하십시오.

loading.js: 세그먼트와 그 하위 세그먼트에 대한 로딩 UI를 생성합니다. loading.js는 페이지 또는 하위 세그먼트를 React 서스펜스 바운더리에서 래핑하여 로딩하는 동안 로딩 UI를 표시합니다.

error.js: error.js: 세그먼트와 그 자식에 대한 오류 UI를 생성합니다. error.js는 페이지 또는 자식 세그먼트를 React Error Boundary로 감싸고, 오류가 발생하면 오류 UI를 표시합니다.

global-error.js: error.js와 비슷하지만, 특히 루트 layout.js에서 오류를 포착하는 데 사용됩니다.

not-found.js: 경로 세그먼트 내에서 notFound 함수가 발생하거나 URL이 어떤 경로와도 일치하지 않을 때 표시하는 UI를 만듭니다.

알아두면 좋은 정보: 특수 파일에는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있습니다.

컴포넌트 계층 구조

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

• layout.js
• template.js
• error.js (React 에러 경계)
• loading.js (React 서스펜스 경계)
• not-found.js (React 에러 경계)
• page.js 또는 중첩된 layout.js

!https://blog.kakaocdn.net/dn/q8hCH/btsatVioiHJ/Km0PsZoJNcXqBkTtNSX2WK/img.webp

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

!https://blog.kakaocdn.net/dn/nJLND/btsatWn0TUk/MK9Pyg745dI72WpSA65Pqk/img.webp

Colocation

특수 파일 외에도 폴더 내에 자체 파일을 colocation 할 수 있는 옵션이 있습니다. 예를 들어 스타일시트, 테스트, 컴포넌트 등이 있습니다.

!https://blog.kakaocdn.net/dn/csm432/btsaw6jhhqm/80MMpR6aRxpjHScN0MbS7K/img.webp

클라이언트 측 탐색이 포함된 서버 중심 라우팅

클라이언트 측 라우팅을 사용하는 pages 디렉토리와 달리 app 디렉토리의 새 라우터는 서버 중심 라우팅을 사용하여 서버 컴포넌트 및 서버의 데이터 가져오기에 맞춰 조정합니다. 서버 중심 라우팅을 사용하면 클라이언트가 경로 맵을 다운로드할 필요가 없으며 서버 컴포넌트에 대한 동일한 요청을 사용하여 경로를 조회할 수 있습니다. 이 최적화는 모든 애플리케이션에 유용하지만 경로가 많은 애플리케이션에 더 큰 영향을 미칩니다.

라우팅은 서버 중심이지만 라우터는 단일 페이지 애플리케이션의 동작과 유사한 링크 컴포넌트와 함께 클라이언트 측 탐색을 사용합니다. 즉, 사용자가 새 경로로 이동할 때 브라우저는 페이지를 새로고침하지 않습니다. 대신 URL이 업데이트되고 Next.js는 변경되는 세그먼트만 렌더링합니다.

또한 사용자가 앱을 탐색할 때 라우터는 React 서버 컴포넌트 페이로드의 결과를 인메모리 클라이언트 측 캐시에 저장합니다. 캐시는 경로 세그먼트별로 분할되어 모든 수준에서 무효화를 허용하고 동시 렌더링 전반에서 일관성을 보장합니다. 즉, 특정 경우 이전에 가져온 세그먼트의 캐시를 재사용하여 성능을 더욱 향상시킬 수 있습니다.

링크 컴포넌트 사용 방법을 알아보려면 **링크 및 탐색 페이지**를 확인하세요.

부분 렌더링

형제 경로(예: 아래의 /dashboard/settings 및 /dashboard/analytics) 사이를 탐색할 때 Next.js는 변경되는 경로의 레이아웃 및 페이지만 가져와 렌더링합니다. 하위 트리의 세그먼트 위에는 아무것도 다시 가져오거나 다시 렌더링하지 않습니다. 즉, 레이아웃을 공유하는 경로에서 사용자가 형제 페이지 사이를 탐색할 때 레이아웃이 유지됩니다.

!https://blog.kakaocdn.net/dn/cVZYXz/btsar6Yek67/4phD9JEtlVUxQ44Xdlhyg0/img.webp

부분 렌더링이 없으면 탐색할 때마다 전체 페이지가 서버에서 다시 렌더링됩니다. 업데이트 중인 세그먼트만 렌더링하면 전송되는 데이터의 양과 실행 시간이 줄어들어 성능이 향상됩니다.

고급 라우팅 패턴

향후 Next.js 라우터에서는 고급 라우팅 패턴을 구현하는 데 도움이 되는 일련의 규칙을 제공할 예정입니다. 여기에는 다음이 포함됩니다:

병렬 Routes: 독립적으로 탐색할 수 있는 두 개 이상의 페이지를 동일한 보기에 동시에 표시할 수 있습니다. 자체 하위 탐색이 있는 분할 보기에 사용할 수 있습니다. 예: dashboards.

Route 가로채기: 경로를 가로채서 다른 경로의 컨텍스트에 표시할 수 있습니다. 현재 페이지의 컨텍스트를 유지하는 것이 중요한 경우에 사용할 수 있습니다. 예를 들어, 하나의 작업을 편집하는 동안 모든 작업을 보거나 피드에서 사진을 펼칠 수 있습니다.

조건부 Route: 조건에 따라 조건부로 경로를 렌더링할 수 있습니다. 예: 사용자가 로그인한 경우에만 페이지 표시.

이러한 패턴과 규칙을 사용하면 Next.js 애플리케이션에서 더 풍부하고 복잡한 UI를 구축할 수 있습니다.