next.js 의 Dynamic Routes (동적 라우트)

개요

미리 정의된 URL 주소로만 라우팅하는 것이 아니라 사용자가 접근한 경로 혹은 상황에 따라 동적인 라우팅을 제공하고 싶을 때 사용할 수 있는 방식이다.
이를테면, /my-profile/ 뒤에 이름을 주어서 회원들의 프로필을 표현하고 싶다면? /my-profile/ray-kim 페이지에서는 ray-kim 의 프로필을 제공하고, /my-profile/jake-seo 페이지에서는 jake-seo 의 프로필을 제공하고 싶을 때 사용할 수 있다.
Next.js 에서는 [param] 과 같이 페이지에 존재하는 컴포넌트 파일명에 괄호를 씌우는 것으로 가능하다. 이를테면 pages/my-profile/[name].js 와 같이 경로를 구성하면 위에서 예로 들었던 /my-profile/jake-seo 와 같은 URL이 잘 매칭되어 라우팅된다.

네트워크에서 말하는 동적 라우팅 과는 조금 다른 웹에 특화된 개념이다.

동적 라우팅 예제 소스코드

블로그에 post 라는 페이지가 존재하고 각각의 post 는 pid 라는 일련 번호로 구분한다고 가정했을 때 아래와 같은 코드가 나올 수 있다.

import { useRouter } from 'next/router'

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

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

export default Post

위의 소스코드에서 pid 값을 router.query 오브젝트를 통해 가져오고 있는데, router.query 오브젝트 내부의 pid 프로퍼티 값은 경로에 의해 설정된다.
/post/123 경로에 접근했을 때, router.query 내부의 pid 프로퍼티 값은 123 이 된다.

{ "pid": "123" }

위와 같은 오브젝트가 router.query 에 들어있다고 생각하면 된다.
post/123?foo=bar 경로에 접근한다면, router.query 내부의 값은 다음과 같을 것이다.

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

다중 동적 라우팅

동적 라우팅은 경로 중 하나만 동적으로 설정 가능한 것이 아니라, pages/post/[pid]/[comment].js 와 같이 디렉토리 이름에 [] 를 붙여 중간 경로를 동적으로 만들 수도 있다.
- post/abc/a-comment 와 같은 경로로 접속한다면, router.query 에는 아래와 같은 값이 들어간다.

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

다중 동적 라우팅도 next.js 의 컴포넌트인 next/link 로 가능하다.

import Link from 'next/link'

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

export default Home

가변 동적 (catch all) 라우팅 구성하기

때에 따라 크기가 달라지는 배열을 받고 싶다면, pages/post/[...slug].js 와 같이 경로를 구성하면 된다. slug 는 [...param] 과 같이 원하는 이름으로 바꾸어도 된다.
pages/post/a/b/c 라는 경로로 접근하면 router.query 에 다음과 같은 값이 들어갈 것이다.

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

만일, 파일 이름을 [...param] 으로 지었다면, router.query 에는 { "param": ["a", "b", "c"] } 값이 들어있었을 것이다.

옵셔널 가변 (optional catch all) 동적 라우팅 구성하기

옵셔널 가변 동적 라우팅이란 겉보기에 용어는 굉장히 어렵지만 간단히 논리로 표현하자면, 0개 ~ n개까지 들어올 수 있는 경우를 말한다.

{ } // GET `/post` (empty object)
{ "slug": ["a"] } // `GET /post/a` (single-element array)
{ "slug": ["a", "b"] } // `GET /post/a/b` (multi-element array)

가변 동적 라우팅에서 empty object 케이스가 추가되었다.
적용하는 방법은 [[...slug]] 와 같이 가변 동적 라우팅을 적용하는 방법에서 [] 를 한번 더 덧씌우면 된다.

동적 라우팅 쿼리 파라미터를 가져올 때 주의사항

동적 라우팅 URL 에서 받은 쿼리 파라미터를 이용할 때, 보통 useRouter() 를 이용하여 router 오브젝트를 가져와서 router.query 와 같은 방식으로 꺼내게 된다.

export default function MovieDetail() {
  const router = useRouter();
  const [title, id] = router.query.params
  return <div>{title}</div>;
}

위와 같이 코딩한 뒤에 SPA의 메인 페이지부터 페이지를 타고타고 넘어오지 않고 바로 해당 URL 을 입력하여 접속하면 에러가 나게 된다. 그 이유는 router 가 아직 초기화되지 않았기 때문이다. router 가 초기화되지 않았고 그 상태에서 const [title, id] 를 이용해 구조분해 할당을 하려고 하니 undefined is not iterable 에러가 난다.

next.js 는 해당 내용이 들어있는 HTML 자체는 먼저 만들어놓지만, 그렇다고 해서 그 HTML 이 사용자에게 정상적으로 보이는 상태라는 뜻은 아니다. 일단 정적인 정보만 만들어놓고 이후에 hydrate 가 일어나면, 그제서야 정말 동작하는 페이지가 된다. 메인페이지부터 접근했을 때는 동작을 담당하는 main.js 가 이미 다운로드 완료된 상태에서 Client-side transitions 가 일어나기 때문에 큰 문제가 없지만, 특정 페이지에서부터 시작하는 경우 정적 HTML 일부는 만들어져있지만, hydrate 에 필요한 main.js 도 다운로드 되어있지 않아 동작에 필요한 js 를 로드할 시간이 필요하다.

그래서 이럴 때는 아래와 같이 코딩하면 에러가 나지 않는다.

import { useRouter } from "next/router";

export default function MovieDetail() {
  const router = useRouter();
  const [title, id] = router.query.params || ["LOADING"];

  return <div>The Title is : {title}</div>;
}

router 가 존재하지 않을 때만, 임시로 쓸 값을 넣어주면 된다.

참고로 이러한 이유로 URL 에 직접 접근했을 때는 console.log(router.query) 가 두 번 표기된다.

헷갈리기 쉬운 부분

미리 정의된 고정된 라우팅이 동적 라우팅보다 우선순위를 갖는다.
- 예시 1
  - pages/post/create.js 는 /post/create 와 매칭될 것이다.
  - pages/post/[pid].js 는 /post/1, /post/abc 와 매칭된다. 그러나 create.js 가 있다면, /post/create 와는 매칭되지 않는다.
  - 미리 정의된 라우팅이 동적 라우팅보다 우선순위를 갖는다.
동적 라우팅이 가변 동적 라우팅보다 우선순위를 갖는다.
- 예시 2
  - pages/post/[...slug].js 는 /post/1/2, /post/a/b/c 와 매칭된다.
  - 그러나 /post/create, /post/abc 와 매칭되지 않는다. 이는 각각 미리 정의된 동적 라우팅과 다중 동적 라우팅이 아닌 그냥 동적 라우팅에 이미 정의되어 있기 때문이다.
Automatic Static Optimization 에 의해 정적으로 최적화되는 페이지는 route 파라미터가 제공되지 않아도 hydrated 될 것이다.
hydration 이후에나 next.js 는 query 오브젝트 내부에 route 파라미터를 제공하기 위해 앱을 업데이트하도록 트리깅 된다.

Next.js 에서의 hydration 이란 단순히 HTML 이 만들어진 것이 아닌 js 소스코드를 정상적으로 불러와 상호작용이 가능한 상태를 말한다.

레퍼런스

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

저작자표시 비영리 (새창열림)

'프레임워크 > next.js' 카테고리의 다른 글

next.js import 경로 예쁘게 하기 (0)	2022.07.05
Next.js 의 API routes (0)	2022.07.04
Next.js getServerSideProps 서버사이드 렌더링 알아보기 (0)	2022.06.24
next.js 내부 next.config.js 파일에서 할 수 있는 일들 (0)	2022.06.23
Next.js 에서 Hydration 이란 무엇인가? (0)	2022.06.23

개요