Native History API 데모

이 데모는 window.history.pushState와 replaceState를 Next.js의 URL 상태와 함께 사용하는 실전 예시입니다.

파일 구조

native-history-api/
├── page.tsx                 ← Server entry (Suspense 경계)
└── NativeHistoryApiClient.tsx ← Client 동작 (useSearchParams + history API)

핵심 파일 코드

// page.tsx
<Suspense fallback={<p>Loading controls...</p>}>
  <NativeHistoryApiClient />
</Suspense>

// NativeHistoryApiClient.tsx
const searchParams = useSearchParams()
window.history.pushState(null, '', '?sort=asc')

Loading controls...

← 목록으로 돌아가기