Page Router 방식에서 URL 정보 가져오는 법

App Router 방식에서는 경로 상에 포함되는 모든 값이 page컴포넌트의 props에 담긴다.

(Query string, URL parameter 등)

export default function Page(props) {
	console.log(props)
	return <div>페이지</div>
}

props에 담기는 값을 확인하면, params(URL Parameter)와 searchParams(Query string)가 Promise 객체로 나타난다.

Query string 꺼내오기

export default async function Page({ searchParams }: {searchParams: Promise<{q: string}>}) {
	
	const q = await searchParams;
	
	return <div>페이지: {q}</div>
}

URL parameter 꺼내오기

export default async function Page({ params }: {params: Promise<{id: string}>}) {
	
	const { id } = await params;
	
	return <div>item/{id} 페이지</div>
}