문서
App Router 사용하기
page.js

page.js

페이지는 라우트에 고유한 UI입니다.

app/blog/[slug]/page.tsx
export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  return <h1>My Page</h1>;
}
app/blog/[slug]/page.js
export default function Page({ params, searchParams }) {
  return <h1>My Page</h1>;
}

Props

params (선택사항)

루트 세그먼트부터 해당 페이지까지의 동적 라우트 매개변수를 포함하는 객체입니다. 예를 들어:

예시URLparams
app/shop/[slug]/page.js/shop/1{ slug: '1' }
app/shop/[category]/[item]/page.js/shop/1/2{ category: '1', item: '2' }
app/shop/[...slug]/page.js/shop/1/2{ slug: ['1', '2'] }

searchParams (선택사항)

현재 URL의 검색 매개변수를 포함하는 객체입니다. 예를 들어:

URLsearchParams
/shop?a=1{ a: '1' }
/shop?a=1&b=2{ a: '1', b: '2' }
/shop?a=1&a=2{ a: ['1', '2'] }

알아두면 좋은 점:

  • searchParams는 값을 미리 알 수 없는 동적 API 입니다. 이를 사용하면 페이지가 요청 시 동적 렌더링 으로 전환됩니다.
  • searchParamsURLSearchParams 인스턴스가 아닌 일반 JavaScript 객체를 반환합니다.

버전 기록

버전변경 사항
v13.0.0page 도입.