NextJS: Dynamic Routes

Dynamic Routes

사전에 정의된 경로를 사용하여 경로를 정의하는 것은 복잡한 애플리케이션에 대해서는 항상 충분하지 않습니다. Next.js에서는 페이지에 대괄호([param])를 추가하여 동적 경로(a.k.a. url slug, pretty url 등)를 생성할 수 있습니다.

다음과 같은 page pages/post/[pid].js를 고려해보세요.

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

/post/1, /post/abc 등의 모든 경로가 pages/post/[pid].js와 일치합니다. 일치하는 경로 매개변수는 쿼리 매개변수로 페이지로 전송되며 다른 쿼리 매개변수와 병합됩니다.

예를 들어, 경로 /post/abc는 다음과 같은 쿼리 객체를 갖습니다.

{ "pid": "abc" }

마찬가지로 경로 /post/abc?foo=bar는 다음과 같은 쿼리 객체를 갖습니다.

{ "foo": "bar", "pid": "abc" }

하지만 경로 매개변수는 같은 이름의 쿼리 매개변수를 덮어씁니다. 예를 들어, 경로 /post/abc?pid=123은 다음과 같은 쿼리 객체를 갖습니다.

{ "pid": "abc" }

여러 개의 동적 경로 세그먼트도 동일하게 작동합니다. 페이지 pages/post/[pid]/[comment].js는 /post/abc/a-comment 경로와 일치하며 쿼리 객체는 다음과 같습니다.

{ "pid": "abc", "comment": "a-comment" }

동적 경로로의 클라이언트 측 탐색은 next/link로 처리됩니다. 위에서 사용한 경로에 대한 링크를 추가하려면 다음과 같습니다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">Go to pages/post/[pid].js</Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">Also goes to pages/post/[pid].js</Link>
      </li>
      <li>
        <Link href="/post/abc/a-comment">
          Go to pages/post/[pid]/[comment].js
        </Link>
      </li>
    </ul>
  )
}

export default Home

자세한 내용은 페이지 간 링크(Linking between pages) 문서를 읽어보세요.

모든 경로 캐치

예제: Catch All Routes(https://github.com/vercel/next.js/tree/canary/examples/catch-all-routes)

동적 경로는 괄호 안에 세 개의 점(...)을 추가하여 모든 경로를 캐치할 수 있습니다. 예를 들어:

• pages/post/[...slug].js는 /post/a뿐만 아니라 /post/a/b, /post/a/b/c 등도 일치합니다.

참고: slug 대신 다른 이름([...param] 등)을 사용할 수 있습니다.

일치하는 매개변수는 쿼리 매개변수(slug는 예시에서 사용)로 페이지로 전송됩니다. 경로 /post/a는 항상 배열이므로 다음과 같은 쿼리 객체를 갖습니다.

{ "slug": ["a"] }

/post/a/b와 같은 경로가 일치하는 경우 새 매개변수가 배열에 추가됩니다.

{ "slug": ["a", "b"] }

선택적 모든 경로 캐치

파라미터를 이중 괄호([[...slug]])에 포함시킴으로써 모든 경로 캐치를 선택적으로 만들 수 있습니다.

예를 들어, pages/post/[[...slug]].js는 /post, /post/a, /post/a/b 등과 일치합니다.

모든 경로 캐치와 선택적 모든 경로 캐치의 주요 차이점은 선택적인 경우, 매개변수 없는 경로도 일치된다는 것입니다(위 예시에서는 /post).

쿼리(query) 객체는 다음과 같습니다.

{ } // GET `/post` (빈 객체)
{ "slug": ["a"] } // `GET /post/a` (단일 요소 배열)
{ "slug": ["a", "b"] } // `GET /post/a/b` (다중 요소 배열)

주의사항

• 사전에 정의된 경로가 동적 경로보다 우선하고, 동적 경로가 모든 경로 캐치보다 우선합니다. 다음 예를 확인해보세요.

  • pages/post/create.js - /post/create와 일치합니다.
  • pages/post/[pid].js - /post/1, /post/abc 등과 일치합니다. 하지만 /post/create와는 일치하지 않습니다.
  • pages/post/[...slug].js - /post/1/2, /post/a/b/c 등과 일치합니다. 하지만 /post/create, /post/abc와는 일치하지 않습니다.

• 자동 정적 최적화로 정적으로 최적화된 페이지는 라우트 매개변수가 제공되지 않은 채로 하이드레이트됩니다. 즉, 쿼리는 빈 객체({})가 됩니다.

하이드레이션 후, Next.js는 애플리케이션을 업데이트하여 쿼리 객체에 라우트 매개변수를 제공합니다. 이 과정에서 useEffect 및 getServerSideProps와 같은 라이프사이클 메서드가 재실행됩니다.

그러나, getStaticProps와 getStaticPaths와 같은 정적 생성 함수는 빌드 시에 호출되므로 이러한 함수에서는 라우트 매개변수를 사용할 수 없습니다.

이러한 함수는 동적 경로를 사용하는 페이지를 렌더링할 때 쿼리 매개변수에만 의존해야 합니다.