정적 경로의 Query String 추출하기

한 입 크기로 잘라먹는 Next.js(v15) 2.2강

import { useRouter } from "next/router"

export default function Test() {
	const router = useRouter() // 거의 모든 라우팅 정보가 담긴 객체
	const { q } = router.query; // 구조분해할당으로 query 값 꺼내기
	
	useEffect(() => {  // SSR 특성 상, 마운트 이전에 출력하면 빈 객체가 출력될 수 있으니 useEffect
		//console.log(router.query);
		console.log(q);
	}, [q]);
}

동적 경로의 Query String 추출하기

import { useRouter } from "next/router"

export default function Test() {
  const router = useRouter();
  const { id, name } = router.query; // 동적 경로 변수까지 포함

  useEffect(() => {
    console.log(router.query);
  }, [router.query]);
  
  return <div>Dynamic Route: {id}, Name: {name}</div>;
 }

Context 매개변수 살펴보기

SSR에서 동적 경로 받아오기 - GetServerSideContext

export async function getServerSideProps(context: GetServerSideContext) {
  console.log(context.params); // 동적 경로 정보
  console.log(context.req);    // HTTP 요청 객체
  
	const q = context.query.q;
  const data = fetchData(q as string); // 데이터페칭 함수에 인자로 전달
  
  return {
    props: {},
  };
}