[Next.js] useRouter 쿼리 스트링 사라짐

useRouter를 활용해서

특정 검색어에 대한 검색 결과를 보여주는 페이지로 이동을 구현했다.

쿼리 스트링에 검색어를 포함한 여러가지 옵션들을 담아서 이동한다.

쿼리 스트링에 담긴 검색어 등을 읽어 서버에 POST해서 검색 결과를 가져오는 로직이다.

하지만,

특정 검색어를 입력하면

페이지 이동 시 모든 쿼리 스트링이 사라지는 현상을 목격했다..!

이러한 현상은

#, & 등 특수 기호가 쿼리스트링에 들어가 서버에서 특수 기호를 알아차리지 못할 때 발생한다.

이러한 현상을 해결하기 위해서는 특수 기호를 인코딩해서 서버에 POST 해야한다.

encodedURIComponent를 사용하면 간편하게 인코딩이 가능하다.

아래 mdn을 참조하자.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent