Routing Fundamentals
Next.js 13 introduced the new App Router built on top of React Server Components with support for layouts, nested routing, loading states, error handling, and more.

This page will introduce you to the fundamental concepts of the new routing model.

Terminology
You will see these terms being used throughout the documentation. Here's a quick reference:

A tree of folders with a subtree, root, and leaves
Tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.
Subtree: Part of a tree, starting at a new root (first) and ending at the leaves (last).
Root: The first node in a tree or subtree, such as a root layout.
Leaf: Nodes in a subtree that have no children, such as the last segment in a URL path.
Anatomy of a URL
URL Segment: Part of the URL path delimited by slashes.
URL Path: Part of the URL that comes after the domain (composed of segments).
The app Directory
The new App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior.

Good to know: Routes across directories should not resolve to the same URL path and will cause a build-time error to prevent a conflict.

The new app directory with folders as routes
By default, components inside app are React Server Components. This is a performance optimization and allows you to easily adopt them. However, you can also use Client Components.

Recommendation: Check out the Server and Client Components page if you're new to Server Components.

Folders and Files inside app
In the app directory:

Folders are used to define routes. A route is a single path of nested folders, following the hierarchy from the root folder down to a final leaf folder that includes a page.js file.
Files are used to create UI that is shown for the route segment. See special files.
Route Segments
Each folder in a route represents a route segment. Each route segment is mapped to a corresponding segment in a URL path.

Route segments mapping to URL segments
Nested Routes
To create a nested route, you can nest folders inside each other. For example, you can add a new /dashboard/settings route by nesting two new folders in the app directory.

The /dashboard/settings route is composed of three segments:

/ (Root segment)
dashboard (Segment)
settings (Leaf segment)
File Conventions
Next.js provides a set of special files to create UI with specific behavior in nested routes:

page.js: Create the unique UI of a route and make the path publicly accessible.
route.js: Create server-side API endpoints for a route (available in next@canary).
layout.js: Create shared UI for a segment and its children. A layout wraps a page or child segment.
template.js: Similar to layout.js, except a new component instance is mounted on navigation. Use layouts unless you need this behavior.
loading.js: Create loading UI for a segment and its children. loading.js wraps a page or child segment in a React Suspense Boundary, showing the loading UI while they load.
error.js: Create error UI for a segment and its children. error.js wraps a page or child segment in a React Error Boundary, showing the error UI if an error is caught.
global-error.js: Similar to error.js, but specifically for catching errors in the root layout.js.
not-found.js: Create UI to show when the notFound function is thrown within a route segment.
Good to know: .js, .jsx, or .tsx file extensions can be used for special files.

Component Hierarchy
The React components defined in special files of a route segment are rendered in a specific hierarchy:

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
Rendered component hierarchy
In a nested route, the components of a segment will be nested inside the components of its parent segment.

Nested rendered component hierarchy
Colocation
In addition to special files, you have the option to colocate your own files inside folders. For example, stylesheets, tests, components, and more.

An example folder of colocated files
Server-Centric Routing with Client-side Navigation
Unlike the pages directory which uses client-side routing, the new router in the app directory uses server-centric routing to align with Server Components and data fetching on the server. With server-centric routing, the client does not have to download a route map and the same request for Server Components can be used to look up routes. This optimization is useful for all applications, but has a larger impact on applications with many routes.

Although routing is server-centric, the router uses client-side navigation with the Link Component - resembling the behavior of a Single-Page Application. This means when a user navigates to a new route, the browser will not reload the page. Instead, the URL will be updated and Next.js will only render the segments that change.

Additionally, as users navigate around the app, the router will store the result of the React Server Component payload in an in-memory client-side cache. The cache is split by route segments which allows invalidation at any level and ensures consistency across concurrent renders. This means that for certain cases, the cache of a previously fetched segment can be re-used, further improving performance.

Checkout the Linking and Navigating page to learn how to use the Link component.

Partial Rendering
When navigating between sibling routes (e.g. /dashboard/settings and /dashboard/analytics below), Next.js will only fetch and render the layouts and pages in routes that change. It will not re-fetch or re-render anything above the segments in the subtree. This means that in routes that share a layout, the layout will be preserved when a user navigates between sibling pages.

Partial Rendering
Without partial rendering, each navigation would cause the full page to re-render on the server. Rendering only the segment that’s updating reduces the amount of data transferred and execution time, leading to improved performance.

Advanced Routing Patterns
In the future, the Next.js Router will provide a set of conventions to help you implement more advanced routing patterns. These include:

Parallel Routes: Allow you to simultaneously show two or more pages in the same view that can be navigated independently. You can use them for split views that have their own sub-navigation. E.g. Dashboards.
Intercepting Routes: Allow you to intercept a route and show it in the context of another route. You can use these when keeping the context for the current page is important. E.g. Seeing all tasks while editing one task or expanding a photo in a feed.
Conditional Routes: Allow you to conditionally render a route based on a condition. E.g. Showing a page only if the user is logged in.
These patterns and conventions will allow you to build richer, more complex UIs in your Next.js applications.

Next Steps
Defining Routes
Learn how to create routes in your Next.js application.
Pages and Layouts
Learn how to create pages and shared layouts.
외출 기초Next.js 13에서는 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 새로운 앱 라우터가 React 서버 컴포넌트 위에 구축되었습니다.이 페이지에서는 새로운 라우팅 모델의 기본 개념을 소개합니다.용어문서 전체에서 이러한 용어가 사용되는 것을 볼 수 있습니다. 다음은 간단한 참조입니다:하위 트리, 루트 및 잎이 있는 폴더의 트리트리: 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등이 있습니다.하위 트리: 새 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다.루트: 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째 노드입니다.Leaf: 하위 트리의 노드 중 자식이 없는 노드(예: URL 경로의 마지막 세그먼트)입니다.URL의 해부학URL 세그먼트: 슬래시로 구분된 URL 경로의 일부입니다.URL 경로: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성됨)입니다.앱 디렉토리새 앱 라우터는 앱이라는 새 디렉토리에서 작동합니다. 앱 디렉터리는 페이지 디렉터리와 함께 작동하여 점진적인 적용이 가능합니다. 따라서 애플리케이션의 일부 경로를 새 동작으로 선택하면서 다른 경로는 이전 동작을 위해 페이지 디렉터리에 유지할 수 있습니다.알아두면 좋습니다: 디렉터리 간 경로는 동일한 URL 경로로 확인되지 않아야 하며 충돌을 방지하기 위해 빌드 시간 오류가 발생합니다.폴더를 경로로 사용하는 새 앱 디렉토리기본적으로 앱 내부의 컴포넌트는 React 서버 컴포넌트입니다. 이는 성능 최적화를 위한 것으로 쉽게 채택할 수 있습니다. 하지만 클라이언트 컴포넌트를 사용할 수도 있습니다.권장사항: 서버 컴포넌트를 처음 사용하는 경우 서버 및 클라이언트 컴포넌트 페이지를 확인하세요.앱 내 폴더 및 파일앱 디렉토리에 있습니다:폴더는 경로를 정의하는 데 사용됩니다. 경로는 중첩된 폴더의 단일 경로로, 루트 폴더에서 페이지.js 파일이 포함된 최종 리프 폴더까지 계층 구조를 따릅니다.파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용됩니다. 특수 파일을 참조하세요.경로 세그먼트경로의 각 폴더는 경로 세그먼트를 나타냅니다. 각 경로 세그먼트는 URL 경로의 해당 세그먼트에 매핑됩니다.URL 세그먼트에 매핑되는 경로 세그먼트중첩된 경로중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다. 예를 들어, 앱 디렉터리에 두 개의 새 폴더를 중첩하여 새 /dashboard/settings 경로를 추가할 수 있습니다.대시보드/설정 경로는 세 개의 세그먼트로 구성됩니다:/ (루트 세그먼트)대시보드(세그먼트)설정(리프 세그먼트)파일 규칙Next.js는 중첩된 경로에서 특정 동작을 하는 UI를 만들기 위한 특수 파일 집합을 제공합니다:page.js: 경로의 고유한 UI를 생성하고 경로를 공개적으로 액세스할 수 있도록 합니다.route.js: 경로에 대한 서버 측 API 엔드포인트를 생성합니다(next@canary에서 사용 가능).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 함수가 발생했을 때 표시되는 UI를 생성합니다.알아두면 좋은 정보: 특수 파일에는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있습니다.컴포넌트 계층 구조경로 세그먼트의 특수 파일에 정의된 React 컴포넌트는 특정 계층 구조에서 렌더링됩니다:layout.jstemplate.jserror.js (React 에러 경계)loading.js (React 서스펜스 경계)not-found.js (React 에러 경계)page.js 또는 중첩 레이아웃.js렌더링된 컴포넌트 계층 구조중첩된 경로에서 세그먼트의 컴포넌트는 부모 세그먼트의 컴포넌트 안에 중첩됩니다.중첩 렌더링 컴포넌트 계층 구조코로케이션특수 파일 외에도 폴더 내에 자체 파일을 배치할 수 있는 옵션이 있습니다. 예를 들어 스타일시트, 테스트, 컴포넌트 등이 있습니다.코로케이션된 파일의 폴더 예시클라이언트 측 탐색을 통한 서버 중심 라우팅클라이언트 측 라우팅을 사용하는 페이지 디렉토리와 달리 앱 디렉토리의 새 라우터는 서버 중심 라우팅을 사용하여 서버 컴포넌트 및 서버의 데이터 가져오기에 맞춰 조정합니다. 서버 중심 라우팅을 사용하면 클라이언트가 경로 맵을 다운로드할 필요가 없으며 서버 컴포넌트에 대한 동일한 요청을 사용하여 경로를 조회할 수 있습니다. 이 최적화는 모든 애플리케이션에 유용하지만 경로가 많은 애플리케이션에 더 큰 영향을 미칩니다.라우팅은 서버 중심이지만 라우터는 단일 페이지 애플리케이션의 동작과 유사한 링크 컴포넌트와 함께 클라이언트 측 탐색을 사용합니다. 즉, 다음과 같은 경우