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와는 매칭되지 않는다.- 미리 정의된 라우팅이 동적 라우팅보다 우선순위를 갖는다.
- 예시 1
- 동적 라우팅이 가변 동적 라우팅보다 우선순위를 갖는다.
- 예시 2
pages/post/[...slug].js는/post/1/2,/post/a/b/c와 매칭된다.- 그러나
/post/create,/post/abc와 매칭되지 않는다. 이는 각각 미리 정의된 동적 라우팅과 다중 동적 라우팅이 아닌 그냥 동적 라우팅에 이미 정의되어 있기 때문이다.
- 예시 2
Automatic Static Optimization에 의해 정적으로 최적화되는 페이지는route파라미터가 제공되지 않아도hydrated될 것이다.hydration이후에나 next.js 는query오브젝트 내부에route파라미터를 제공하기 위해 앱을 업데이트하도록 트리깅 된다.
Next.js 에서의 hydration 이란 단순히 HTML 이 만들어진 것이 아닌 js 소스코드를 정상적으로 불러와 상호작용이 가능한 상태를 말한다.