Next.js에서 nuqs와 함께 검색 매개변수 관리

Next.js는 특히 버전 13, 14 및 15에 App Router 및 관련 기능이 도입됨에 따라 React 애플리케이션에서 검색 매개변수를 관리하기 위한 강력한 도구입니다. 그러나 복잡한 검색 매개 변수를 처리하는 것은 여전히 까다로울 수 있습니다. 이것은 Next.js에 대한 유형 안전 검색 param 상태 관리자 라이브러리 인 nuqs가 들어오는 곳입니다. nuqs는 URL 매개 변수를 처리하기 위한 상용구 코드를 줄여 상태 관리를 간소화하고, 선언적 API를 사용하여 코드 가독성을 향상시키고, 검색 매개 변수의 효율적인 구문 분석 및 업데이트를 통해 성능을 향상시키고, 형식 안전성 및 개발 프로세스를 개선하기 위한 Zod와 같은 인기 있는 도구와의 통합으로 인해 더 나은 개발자 환경을 제공합니다. nuqs를 시작하려면 create-next-app@latest를 사용하여 새 Next.js 앱을 초기화하고 npm install nuqs@latest 또는 yarn add nuqs 명령을 사용하여 nuqs를 설치합니다. 그런 다음 루트 레이아웃 파일에서 NuqsAdapter 구성 요소로 {children}을 래핑합니다. 이렇게 하면 입력할 때 검색 매개변수가 설정되고 업데이트됩니다. 그러나 nuqs는 서버 구성 요소를 자동으로 다시 렌더링하지 않습니다. 이 문제를 해결하려면 useQueryState Hook에서 shallow 옵션을 false로 설정하십시오. nuqs는 또한 URL에서 여러 관련 쿼리 매개 변수를 처리하기 위해 useQueryStates Hook을 제공합니다. 이렇게 하면 하나의 필터를 변경해도 불필요한 재렌더링이나 불일치가 발생하지 않으며 성능 향상을 위한 배치 업데이트도 지원됩니다.