TIL

Next.js

Dynamic Routing

Next에서 동적 라우팅 (Dynamic Routing)을 사용할 때, 쿼리값은 router 객체의 query로 찾을 수 있다.
query 또한 객체인데, query: { folderName: dynamicData } 이런 형태로 매핑되어있다.
query는 path에 삽입되어 있는 동적 url뿐만 아니라 parameter의 내용도 담고 있다.

Next에서 렌더링 할 때, pre-rendering 단계에서는 이 쿼리값을 추적할 수 없다.
별도의 parameter가 있지 않으면 router의 query는 비어있게 된다.
그리고 이 상태에서는 router의 isReady 값도 false이다.
이후 CSR 환경이 되어 isReady가 true인 상태가 되면 query도 읽을 수 있다.

Router query

list/[listId] 이렇게 listId를 동적으로 주었을 때,
listId가 3에 해당하는 경로로 이동하면, router의 query에는 query: { listId: 3 } 이렇게 들어있다.

또한 list?listId=3 이렇게 listId라는 파라미터가 삽입된 경로로 이동하면,
마찬가지로 router의 query에는 query: { listId: 3 } 이렇게 들어있다.

따라서 listId가 동적으로 되어 있는 list/3?mode=edit&admin=n 이 경로로 이동하면,
router의 query는 query : { listId: 3, mode: "edit", admin: "n" } 이러하다.

이처럼 동적 url과 parameter(쿼리 스트링)이 모두 router의 query에 들어올 수 있다.