query-params-next-router.js

import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'

const Page = () => {
  const router = useRouter()
  const [results, setResults] = useState(false)
  const [query, setQuery] = useState()

  // react to query parameter changes
  useEffect(() => {
    const q = router.query.query
    setQuery(q)
    // example: show reults if query === 'test'
    if (q === 'test') setResults(true)
    else setResults(false)
  }, [router.query])

  return (
    <div>
      <input
        type="text"
        onChange={(e) => {
          const { pathname } = window.location
          const url = !e.target.value
            ? pathname
            : `${pathname}?query=${e.target.value}`
          // update the current pathname with query param value
          router.push(url, null, { shallow: true })
        }}
      />
      // show results if results === true
      {results ? <div>results here</div> : <div>no results</div>}
    </div>
  )
}
      
export default Page