[Next.js] 다이나믹 라우트(Dynamic Routes)

[pid].tsx

import { useRouter } from "next/router";

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

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

export default Post;

Next.js에서 기본적으로 router 설정을 useRouter를 한 뒤에, 저렇게 pid를 라우터의 쿼리로 설정할 경우.. 예를 들어

 

1. '/post/abc' 라우트인 경우: { "pid": "abc" } 의 쿼리 객체를 가진다.

2. '/post/abc?foo=bar' 라우트의 경우 { "foo": "bar", "pid": "abc" } 의 쿼리 객체를 가진다.

 

그러나, 쿼리 파라미터를 동일한 이름으로 오버라이딩하기 때문에 pid 이후의 쿼리스트링은 무시된다.

1. '/post/abc?pid=123' 라우트의 경우 { "pid": "abc" } 의 쿼리 객체를 똑같이 갖게 된다.

 

다중 다이나믹 라우트 또한 동일한 형태로 움직인다.

1. 'pages/post/[pid]/[comment].tsx' 페이지는 'post/abc/a-comment' 라우트와 연결될 것이고, 이 페이지의 쿼리는

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

가 될것이다.

 

클라이언트 사이드에서 다이나믹 라우트로의 연결은 'next/link' 로 다뤄진다. 위에서 선언한 라우트들에 대한 링크를 갖고싶다면 아래와 같은 형태를 띠게 될 것이다.

 

index.tsx

import Link from "next/link";

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

export default Home;

[comment].tsx

function Comment() {
  return <div>Hello World!</div>;
}

export default Comment;

결과물

 

확장

다이나믹 라우트는 점 세개(...)를 넣음으로써 모든 path로 확장시킬 수 있게 된다. 예를 들면..

1. 'pages/post/[...slug].tsx'는 '/post/a', '/post/a/b', '/post/a/b/c' 뿐만 아니라 다른 것들과 모두 연결된다.

-> 이름이 slug일 필요는 없고, 그냥 파라미터 이름을 넣어주면 된다!

 

연결된 파라미터들은 페이지에 쿼리 파라미터로써 전달이 될 것이고, 그리고 항상 배열 형태를 띤다. 따라서, '/post/a' 루트는 { "slug": ["a"] } 의 쿼리 객체를 가질 것이다.

그리고, '/post/a/b'를 포함한 모든 다른 연결 경로에 대해 새로운 파라미터가 배열에 추가될 것이다. 예를 들면.. 앞서 말한 '/post/a/b' 루트는 { "slug": ["a", "b"] } 의 쿼리 객체를 가질 것이다.

 

선택적으로 모든 라우트를 연결하기

double bracket ([[...slug]]) 을 넣음으로써 모든 파라미터를 선택적으로 포함시킬 수 있다. 예를 들면..

'pages/post/[[...slug]].tsx는 '/post', '/post/a/', '/post/a/b'와 나머지 것들에 대해 연결될 수 있다.

모든 라우트를 캐치하는 것과 선택적으로 모든 라우트를 캐치하는 것의 차이는, 선택적인 경우 파라미터가 없는 라우트더라도 전부 매치가 된다는 것이다.

 

쿼리 객체는 다음과 같은 형태를 띤다.

{ } // GET `/post` (비어있는 객체)
{ "slug": ["a"] } // `GET /post/a` (한가지 객체를 가진 배열)
{ "slug": ["a", "b"] } // `GET /post/a/b` (다수의 객체를 가진 배열)

 

주의사항

미리 정의된 라우트가 다이나믹 라우트보다 우선이고, 다이나믹 라우트는 모든 경로를 연결한다. 예시를 보면..

1. `pages/post/create.tsx`는 `/post/create`를 연결한다.

2. `pages/post/[pid].tsx`는 `/post/1`, `/post/abc` 등등과 연결되지만 `/post/create`와 연결되어있지 않다.

3. `pages/post/[...slug].tsx`는 `/post/1/2`, `/post/a/b/c` 등등과 연결되지만 `/post/create`, `/post/abc`와 연결되어있지 않다.

 

- 자동 정적 최적화(ASO)에 의해 정적으로 최적화된 페이지는 경로 매개변수를 제공하지 않은 상태로 hydrated 된다. 즉, 쿼리가 빈 객체가 된다.

- hydration이 된 이후에, Next.js는 쿼리 객체에 라우트 파라미터를 제공하기 위해 앱에 대한 업데이트를 진행한다...

 

출처

Next.js 공식문서