How to use query in Next.js 13?

Question

I used to use query in Next.js 12 like this:

  const {
    query: { id }
  } = useRouter();

I think it have been changed to useSearchParams and can't really find examples akin to version 12, how do you use it in version 13?

Answer 1

If you are using server components inside app directory, pages have searchParams prop and it automatically populates this prop if you have a query. You do not need to write anything. For example, if you have this http://localhost:3000/?name=any, in page.js, console.log(props), you get this

{ params: {}, searchParams: { name: 'any' } }

for the client-side, you can use use-search-params