동적 라우팅
정확한 세그먼트 이름을 모르고 동적 데이터로부터 경로를 생성하고 싶을 때 요청시 채워지거나 빌드 시 미리 렌더링(prerendered)되는 동적 세그먼트를 사용할 수 있다.
Convention
동적 세그먼트는 파일 또는 폴더 이름을 대괄호로 묶어 생성할 수 있다. 예시,[id] 또는 [slug].
동적 세그먼트는 useRouter로 접근이 가능하다고 나와있다.
Example
Blog 페이지는 다음과 같은 경로가 포함될 수 있다. pages/blog/[slug].js
여기서 [slug]는 동적 세그먼트이다.
공식 문서 예시 코드
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return <p>Post: {router.query.slug}</p>
}/blog/a 경로인 경우 params 객체에 { slug: 'a'}가 할당된다.
포괄 세그먼트(Catch-all Segments)
동적 세그먼트는 하나의 동적인 경로를 생성할 수 있을 뿐만 아니라 추가적으로 연속적인 동적 경로를 생성할 수 있다. 위에서 사용한 방식과 마찬가지로 대괄호를 사용하지만 앞에 ...을 붙인다. 예시: [...segmentName]
예를 들어 pages/shop/[... slug].js는 /shop/clothes 경로와 일치하지만 /shop/clothes/tops, /shop/clothes/tops/t-shirts 전부 다 일치할 수 있다.
참고로 slug라는 이름은 고정된 것이 아니다. 내가 milk를 줄 경우 { slug: ['a'] } => {milk: ['a']}로 나타난다.
pages/shop/[...slug].js => /shop/a { slug: ['a'] }
pages/shop/[...slug].js => /shop/a/b { slug: ['a', 'b'] }
pages/shop/[...slug].js => /shop/a/b/c { slug: ['a', 'b', 'c'] }
선택적 포괄 세그먼트(Optional Catch-all Segments)
사용법은 간단한다. 위에서 사용한 포괄 세그먼트 방식에서 대괄호 하나를 더 추가한다. 예시:[[...segmentName]]
포괄 세그먼트와 선택적 포괄 세그먼트의 차이점은 매개변수가 없는 경로도 일치 한다는 것이다.
첫 번째 예시에서 확인할 수 있다.
pages/shop/[[...slug]].js => /shop { slug: undefined }
pages/shop/[[...slug]].js => /shop/a { slug: ['a'] }
pages/shop/[[...slug]].js => /shop/a/b { slug: ['a', 'b'] }
pages/shop/[[...slug]].js => /shop/a/b/c { slug: ['a', 'b', 'c'] }
공식 문서에 있는 내용을 읽어보면서 작성해 보았다.
