웹 어플리케이션에서 경로란 URL Path를 의미합니다.
next.js에선 파일 시스템 기반으로 경로를 지정합니다.
파일 시스템 기반 라우팅
➡️ 폴더 이름을 따르는 URL Path
app이라는 폴더를 만들고 그 아래 dashboard, settings라는 폴더를 만들면 URL path가 폴더 이름과 동일한 순서를 따라 만들어집니다.
- next에서는 라우트를 표현하는 폴더인 경우
라우트 세그먼트(Route Segment)라고 부릅니다. - app은 가장 시초가 되는 세그먼트이기 때문에
루트 세그먼트(Roote Segment)라고 부릅니다.
➡️ 상황에 따라 짓는 파일 이름
Next.js에서는 상황에 맞는 UI를 정의할 때 쓰는 파일명이 미리 정해져있습니다.
- 파일 이름을 약속된대로 지정해서 세그먼트 안에 정의하면 Next.js가 알아서 React 컴포넌트를 배치해준다.
➡️ 동적으로 변할 수 있는 URL Path 만들기
- 블로그를 만든다고 가정하면 게시글마다 ID 혹은 이름을 갖습니다. 블로그 상세 페이지라면 /blog/:id 와 같은 형태를 갖는 것이죠.
Dynamic Routes
- 이런 경우를 위해 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>
}