Query String에 따른 동적 경로

Next.js에서 검색결과를 받아오는 등, Query string에 따라 페이지가 동적으로 변경될 수 있는 경우, 모든 페이지를 폴더 별로 만들어 줄 필요가 없다.

Query string은 경로에 영향을 주지 않기 때문이다. (페이지 경로의 추가적인 데이터를 전달하는 역할)

대신 useRouter 훅을 사용하여 Query string을 읽어오게 하자.

import { useRouter } from “next/router // 경로 유의할 것

export default function Example() {
	const router = useRouter()
	console.log(router) // 라우터 객체 확인
	
	// 쿼리 추출하기
	// const q = router.query.q;
	const { q } = router.query; // 구조분해할당
} 

ID에 따른 동적 경로

<aside> 💡

해당 파일명 (또는 폴더명) 을 대괄호로 묶어준다.

</aside>

[id].tsx