NEXT.JS : Dynamic Routes

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

Dynamic Routes?

http://www.사이트명.com/카테고리/페이지

위와 같이 경로가 고정되어있는 route는 static route라고 한다. 그 반대로 경로가 고정적이지 않은 route를 Dynamic route라고하는데 도대체 경로가 고정적이지 않다는 말이 무엇일까?

http://www.사이트명.com/카테고리/:id

똑같은 페이지를 보여주더라도 변수를 이용하여 변수의 값에 해당하는 페이지를 보여주는 것이 바로 Dynamic route이다.

NEXT에서 Dynamic Routes사용하기

예를 들어서 MOVIE라는 카테고리안에서 id에 따른 페이지를 보여준다고 하면 [대괄호]폴더를 생성하면 된다.

export default function MovieDetail(props) {
  console.log(props);
  return <h1>movie</h1>;
}

MovieDetail에서 어떤 props를 받는지 콘솔로 확인해보면, params로 id와 searchParams를 받아오는 것을 확인할 수 있는데, 이 id는 [id]폴더에서 오는 객체이다. 이때 콘솔은 브라우저가 아닌 서버의 콘솔을 의미한다.

브라우저에서는 아무것도 찍히지 않는데, 이는 [id]폴더가 CSR가 아닌 SSR임을 알 수 있는 부분이다.

공식문서를 참고하면 조금더 이해하기 쉽다.
👉🏻NEXT공식문서 page.js