[Next.js] Dynamic Routes 사용 방법

Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다.

Dynamic Routes

Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다.

pages/movies 경로에 [id].js 파일을 생성하면 /movies/1, /movies/abc 등과 같은 경로로 접속할 수 있습니다.

다음 예제처럼 useRouter()의 query를 통해 /movies 다음의 하위 경로를 확인할 수 있습니다.

// pages/movies/[id].js

import { useRouter } from 'next/router';

export default function Detail() {
  const router = useRouter();
  const { id } = router.query;
  return 'detail';
}

생성한 경로로 이동을 원한다면 다음과 같이 next/link를 사용하여 작성합니다.

import Link from 'next/link';

function Home() {
  return (
    <ul>
      <li>
        <Link href="/movies/abc">Go to movies/movies/[id].js</Link>
      </li>
      <li>
        <Link href="/movies/abc?foo=bar">Also goes to movies/post/[id].js</Link>
      </li>
    </ul>
  );
}

export default Home;

Catch all routes

대괄호 안에 세 개의 점(...)을 추가하여 모든 경로를 포착하도록 Dynamic Routes를 확장할 수 있습니다.

pages/movies/[...id].js는 /movies/1와 일치하지만 /movies/1/2, /movies/1/ab/cd 등과도 일치합니다.

일치하는 매개변수는 페이지에 쿼리 매개변수로 전송되며 항상 배열이므로 /movies/a 또는 /movies/a/b 경로일 경우 다음과 같이 조회가 됩니다.

// /movies/a
{ "id": ["a"] }

// /movies/a/b
{ "id": ["a", "b"] }

참고

• https://nextjs.org/docs/routing/dynamic-routes