Next.js | 라우터 | Dynamic Routes

 

Next.js에서 페이지에 대괄호를 추가하여 동적경로를 생성할 수 있다.

 

pages/post/[pid].js

import { useRouter } from 'next/router'

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

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

export default Post

원하는 경로 'post/1', '/post/abc'등이 일치된다. 

 

 

Optional catch all routes

선택적으로 모든 경로를 잡을 수 있다. 이중괄호 ('[[...slug]]') 에 포함하여 선택 사항으로 만들 수 있다.

예를 들어 pages/post/[[..slug]].js  이렇게 만들면

'/post', '/post/a', 'post/a/b' 이런식으로 불러올 수 있다. 다음과 같이 나타난다.

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