Next.js에서 searchParms를 이용할 때 주의할 것

[fzdf0613]

위 코드의 주석 처리된 부분을 포함한 것이 원래의 코드이다.
처음 코드 대로 빌드 후 실행하였을 때 카테고리 페이지에서 카테고리를 선택하면 바로 페이지가 replace 되어버렸다.

Next.js의 문서를 살펴본 결과,

Page에서 SearchParms를 사용할 경우 dynamic rendering이 된다고 하였다.

이를 통해 알 수 있는 것은, page에서 searchParams를 사용하고 있는 데, 동시에 'use client'를 사용하였기 때문에 원하는 대로 작동하지 않았던 것으로 보인다.

아래와 같이 렌더링 사이드에 따른 적절한 함수를 사용하여, 충돌이 없도록 할 수 있을 것으로 보인다.

• 'use client'를 사용하고, searchParms이 필요한 경우엔 next에서 제공하는 useSearchParms를 사용.
• page에서 searchParms prop을 사용하고, 페이지의 이동이 필요할 땐 next의 redirect 등을 사용.