[Next.js] Dynamic Routes 동적 라우팅

💡 외부 데이터에 의존하는 경로가 있을 경우 동적 라우팅을 이용할 수 있다.

• [ 로 시작하고 ] 로 끝나는 페이지는 Next.js의 dynamic routes이다.

ex) pages/posts/[id].js

---

pages/post/[pid].js

import { useRouter } from 'next/router';

export default function Post() {
	const router = useRouter();
	const { pid } = router.query;
	
	return <p>Post: {pid}</p>
}

경로 /post/1, /post/abc 등이 일치된다. 경로 매개변수는 페이지에 쿼리 매개변수로 전송되고 다른 쿼리 매개변수와 병합된다.

예를 들어 /post/abc 에는 query 객체가 있다.

{ "pid": "abc" }

마찬가지로 경로 /post/abc?foo=bar 에는 다음 query 객체가 있다.

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

경로 매개 변수는 동일한 이름의 쿼리 매개변수를 재정의한다.
예를 들어 경로 /post/abc?pid=123 에는 다음 query 객체가 있다.

{ "pid": "abc" }

pages/post/[pid]/[comment].js
/post/abc/a-comment 의 query 객체는

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

---

Catch all routes

💡 괄호 안에 세 개의 점 (...)을 추가하여 모든 경로를 포착하도록 동적 경로를 확장 할 수 있다.

• pages/post/[...slug].js 는 /post/a, /post/a/b, /post/a/b/c 과 일치한다.

query 객체

/post/a
{ "slug": ["a"] }

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

---

Optional catch all routes

💡 이중 괄호 안에 매개변수를 포함하여 모든 경로를 선택적으로 잡을 수 있다.

• pages/post/[[...slug]].js 는 /post, /post/a, /post/a/b 와 모두 일치한다.

위의 [...slug] 와의 주요 차이점은 optional을 사용하면 매개변수가 없는 경로도(/post) 일치한다는 것.

query 객체

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

---

주의 사항

💡 사전 정의 된 경로는 동적 경로보다 우선적이고, 동적 경로는 모든 경로를 포착하는 것 보다 우선한다.

• 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 와는 일치하지 않는다.

정적으로 최적화 된 페이지는 경로 매개변수를 제공하지 않는다. 즉, 쿼리는 빈 객체 ({ }) 가 된다.

---