4️라우팅

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

폴더 이름을 따르는 URL Path

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

출처: https://nextjs.org/docs/app/building-your-application/routing/defining-routes#creating-routes

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

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

상황에 따라 짓는 파일 이름

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

layout	세그먼트의 메인 컨텐츠와 하위 세그먼트의 공용 레이아웃 UI
page	세그먼트의 메인 컨텐츠 UI
loading	세그먼트의 메인 컨텐츠와 하위 세그먼트의 로딩 UI
not-found	세그먼트의 메인 컨텐츠와 하위 세그먼트의 Not Found UI
error	세그먼트의 메인 컨텐츠와 하위 세그먼트의 에러 UI
global-error	전역 에러 UI
route	서버 API 엔드포인트
template	특별하게 재사용될 수 있는 레이아웃 UI
default	패러럴 라우트의 폴백 UI

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

출처: https://nextjs.org/docs/app/building-your-application/routing#component-hierarchy

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

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

블로그를 만든다고 가정하면 게시글마다 ID 혹은 이름을 갖습니다. 블로그 상세 페이지라면 /blog/:id 와 같은 형태를 갖는 것이죠. 이런 경우를 위해 Next.js에서는 Dynamic Routes라는 기능을 제공합니다.

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

app/blog/[id]/page.tsx

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

참고 자료

• https://nextjs.org/docs/app/building-your-application/routing