Nextjs Dynamic Routing

동적으로 URL 경로를 생성하는 내장 기능. Nextjs는 기본적으로 파일 시스템 기반으로 경로를 구성한다.

page.(jsx|tsx)

기본적으로 app이라는 이름의 폴더에서 이 파일을 생성하면 해당 폴더가 위치한 곳을 기준으로 자동으로 라우팅된다.

ex) app/posts/pages.tsx → /posts

대괄호

  • 특정 경로에 매칭되는 URL을 동적으로 활용하고 싶다면 파일명을 대괄호([])로 감싸서 네이밍한다. 이 방식은 여러 케이스로 나뉜다.
  • 대괄호 안에 지정한 이름을 통해 해당 변수에 접근 가능하다.
  • 이는 page뿐만 아니라 layout, route, generateMetadata 함수도 접근 방식이 동일하다.

1. 동적 세그먼트(Dynamic Segment)

가장 기본적인 방식으로, 하나의 파라미터 변수만을 동적으로 구성한다.

app/posts/[id]/page.tsx
export default function Page({ params }: { params: { id: string } }) {
  return <h1>My Page id: {params.id}</h1>
}

2. Catch-all Segment

전개 연산자를 더해서 매칭되는 모든 서브 경로까지 다 포괄하는 방식이다.

RouteExample URLparams
app/shop/[...slug]/page.js/shop/a{ slug: ['a'] }
app/shop/[...slug]/page.js/shop/a/b{ slug: ['a', 'b'] }
app/shop/[...slug]/page.js/shop/a/b/c{ slug: ['a', 'b', 'c'] }

3. Optional Catch-all Segments

2번에서는 /shop을 매칭시킬 수 없었는데, 대괄호로 1번 더 감싸면서 최상위 경로까지 포괄하도록 구성할 수 있다.

RouteExample URLparams
app/shop/[[...slug]]/page.js/shop{}
app/shop/[[...slug]]/page.js/shop/a{ slug: ['a'] }
app/shop/[[...slug]]/page.js/shop/a/b{ slug: ['a', 'b'] }
app/shop/[[...slug]]/page.js/shop/a/b/c{ slug: ['a', 'b', 'c'] }