# 라우팅

라우팅(Routing)은 우리말로 풀어쓰면 '경로 지정하기'라고 부르면 적절하지 않을까요. 웹 어플리케이션에서 경로란 URL Path를 의미합니다. Next.js에선 파일 시스템 기반으로 경로를 지정합니다. 무슨 의미인지 살펴보겠습니다.

### 폴더 이름을 따르는 URL Path

Next.js의 파일 시스템 기반의 라우팅은 아래와 같은 형태를 이룹니다. `app`이라는 폴더를 만들고 그 아래 `dashboard`, `settings`라는 폴더를 만들면 URL path가 폴더 이름과 동일한 순서를 따라 만들어집니다. 

<figure><img src="https://53734069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzxzdAZGtn510qj71tXJk%2Fuploads%2FLCE0QbGAjr0f6Bdjt48O%2Froute-segments-to-path-segments.webp?alt=media&#x26;token=79bd07ca-6fc0-4911-a6b1-7379653ad774" alt=""><figcaption><p>출처: <a href="https://nextjs.org/docs/app/building-your-application/routing/defining-routes#creating-routes">https://nextjs.org/docs/app/building-your-application/routing/defining-routes#creating-routes</a></p></figcaption></figure>

다만, Next.js에서는 라우트를 표현하는 폴더인 경우엔 라우트 세그먼트(Route Segment)라고 부릅니다.

루트 라우트 세크먼트 이름을 `app`이라고 지으면 App Router, `pages`라고 지으면 Pages Router가 됩니다. 쉽죠? 이번 강의에서는 App Router를 기준으로 진행한다고 말씀드렸으니 `app`이라는 이름으로 라우트 세그먼트 이름을 지으면 되겠네요.

### 상황에 따라 짓는 파일 이름

세그먼트에는 파일이 필요합니다. Next.js에서는 상황에 맞는 UI를 정의할 때 쓰는 파일명이 미리 정해져있습니다.

<table data-header-hidden><thead><tr><th width="179.5">파일명</th><th>동작</th></tr></thead><tbody><tr><td><a href="https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts"><code>layout</code></a></td><td>세그먼트의 메인 컨텐츠와 하위 세그먼트의 공용 레이아웃 UI</td></tr><tr><td><a href="https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages"><code>page</code></a></td><td>세그먼트의 메인 컨텐츠 UI</td></tr><tr><td><a href="https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming"><code>loading</code></a></td><td>세그먼트의 메인 컨텐츠와 하위 세그먼트의 로딩 UI</td></tr><tr><td><a href="https://nextjs.org/docs/app/api-reference/file-conventions/not-found"><code>not-found</code></a></td><td>세그먼트의 메인 컨텐츠와 하위 세그먼트의 Not Found UI</td></tr><tr><td><a href="https://nextjs.org/docs/app/building-your-application/routing/error-handling"><code>error</code></a></td><td>세그먼트의 메인 컨텐츠와 하위 세그먼트의 에러 UI</td></tr><tr><td><a href="https://nextjs.org/docs/app/building-your-application/routing/error-handling"><code>global-error</code></a></td><td>전역 에러 UI</td></tr><tr><td><a href="https://nextjs.org/docs/app/building-your-application/routing/route-handlers"><code>route</code></a></td><td>서버 API 엔드포인트</td></tr><tr><td><a href="https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#templates"><code>template</code></a></td><td>특별하게 재사용될 수 있는 레이아웃 UI</td></tr><tr><td><a href="https://nextjs.org/docs/app/api-reference/file-conventions/default"><code>default</code></a></td><td>패러럴 라우트의 폴백 UI</td></tr></tbody></table>

아래의 이미지를 보시면 이해가 쉽습니다. 파일 이름을 약속된대로 지정해서 세그먼트 안에 정의하면 Next.js가 알아서 React 컴포넌트를 배치해주는거죠.

<figure><img src="https://53734069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzxzdAZGtn510qj71tXJk%2Fuploads%2FgyhcRc3ucNANoZWKOkGv%2Fnested-file-conventions-component-hierarchy.webp?alt=media&#x26;token=60148744-eae1-40b5-9e34-d9d2964e14c1" alt=""><figcaption><p>출처: <a href="https://nextjs.org/docs/app/building-your-application/routing#component-hierarchy">https://nextjs.org/docs/app/building-your-application/routing#component-hierarchy</a></p></figcaption></figure>

위에서 언급한 파일명 이외에는 아무 이름이나 넣어도 라우트에 영향을 주지 않습니다. 필요에 따라 다양한 파일을 추가해도 괜찮다는 의미죠.

### 동적으로 변할 수 있는 URL Path 만들기

블로그를 만든다고 가정하면 게시글마다 ID 혹은 이름을 갖습니다. 블로그 상세 페이지라면 `/blog/:id` 와 같은 형태를 갖는 것이죠. 이런 경우를 위해 Next.js에서는 [Dynamic Routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)라는 기능을 제공합니다.&#x20;

Dynamic Routes는 파일 이름을 대괄호로 묶어주는 걸 약속으로 합니다. 대괄호 안에 지정한 이름을 Page 컴포넌트의 인자로 받을 수 있습니다.

{% code title="app/blog/\[id]/page.tsx" %}

```tsx
export default function Page({ params }: { params: { id: string } }) {
  return <div>My Post: {params.id}</div>
}
```

{% endcode %}

#### 참고 자료

* <https://nextjs.org/docs/app/building-your-application/routing>