searchParams 체험

이 페이지는 Server Component에서 searchParams prop을 사용하여 URL 쿼리 파라미터를 읽고 있습니다. 아래 링크를 클릭하거나 브라우저 주소창에서 직접 쿼리를 수정해보세요.

현재 URL:

/demo/nextjs/16.1.6/layouts-and-pages/search-params

쿼리 프리셋 (클릭하면 서버에서 다시 렌더링):

?filters=recent

최근 항목 필터링

?page=2&sort=date

페이지네이션 + 정렬

?filters=popular&page=1&sort=views

복합 쿼리

(쿼리 없음)

파라미터 제거

await searchParams 결과:

Static (파라미터 없음)

{}

이 페이지의 핵심 코드:

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{
    [key: string]: string | string[] | undefined
  }>
}) {
  const filters = (await searchParams).filters
  // 이 값으로 DB 쿼리 실행
}

참고: searchParams를 사용하면 이 페이지는 자동으로 dynamic rendering이 활성화됩니다. 매 요청마다 서버에서 새로 렌더링되므로 쿼리 변경 시 항상 최신 데이터를 반영할 수 있습니다.

파일 구조

demo/nextjs/16.1.6/layouts-and-pages/search-params/
|- page.tsx
└── static-only/
    └── page.tsx