Using the native History API

Next.js는 페이지를 다시 로드하지 않고 브라우저의 히스토리 스택을 업데이트하는데 네이티브 window.history.pushState 및 window.history.replaceState 메서드를 사용할 수 있도록 한다.

pushState 및 replaceState 호출은 Next.js 라우터에 통합되어 usePathname 및 useSearchParams와 동기화 할 수 있다.

window.history.pushState

이를 사용하여 브라우저의 히스토리 스택에 새 항목을 추가할 수 있다. 사용자는 이전 상태로 다시 이동할 수 있다. 예를 들어, 제품 목록을 정렬하는 경우를 예로 들자면

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SortProducts() {
  const searchParams = useSearchParams()
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString())
    params.set('sort', sortOrder)
    window.history.pushState(null, '', `?${params.toString()}`)
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  )
}

window.history.replaceState

이를 사용하여 브라우저의 히스토리 스택의 현재 항목을 대체할 수 있다. 사용자는 이전 상태로 다시 이동할 수 없다. 예를 들어, 애플리케이션의 locale을 변경하는 경우:

'use client'
 
import { usePathname } from 'next/navigation'
 
export function LocaleSwitcher() {
  const pathname = usePathname()
 
  function switchLocale(locale: string) {
    // e.g. '/en/about' or '/fr/contact'
    const newPath = `/${locale}${pathname}`
    window.history.replaceState(null, '', newPath)
  }
 
  return (
    <>
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('fr')}>French</button>
    </>
  )
}

항해99 취업 리부트 코스를 수강하고 작성한 콘텐츠 입니다.

Routing: Linking and Navigating

항해99

#개발자포트폴리오 #개발자이력서 #개발자취업 #개발자취준 #코딩테스트 #항해99 #취리코 #취업리부트코스