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
(선택사항)
루트 세그먼트부터 해당 페이지까지의 동적 라우트 매개변수를 포함하는 객체입니다. 예를 들어:
예시 | URL | params |
---|---|---|
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의 검색 매개변수를 포함하는 객체입니다. 예를 들어:
URL | searchParams |
---|---|
/shop?a=1 | { a: '1' } |
/shop?a=1&b=2 | { a: '1', b: '2' } |
/shop?a=1&a=2 | { a: ['1', '2'] } |
알아두면 좋은 점:
버전 기록
버전 | 변경 사항 |
---|---|
v13.0.0 | page 도입. |