Next.js Query String Params: searchParams + useRouter

The symptom is simple: you open /dashboard?search=invoice&page=2, copy an old snippet, and get undefined, stale values, or the wrong API entirely.

The root cause is that Next.js now has two routing models, and the correct query-string API depends on where you read the params:

• App Router Server Component page: use the searchParams prop
• App Router Client Component: use useSearchParams()
• Shared client component across both routers: useSearchParams() still works

Here is the exact fix for each case.

The App Router server-side fix

If you are inside app/.../page.tsx, use the page prop. In the current Next.js docs, searchParams is a promise in modern App Router pages.

// app/dashboard/page.tsx
export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { search = '', page = '1' } = await searchParams

  return (
    <main>
      <h1>Dashboard</h1>
      <p>Search: {search}</p>
      <p>Page: {page}</p>
    </main>
  )
}

Use this when the query string affects data fetching, pagination, filtering, or metadata for the page itself.

The App Router client-side fix

If the component is interactive and already marked 'use client', use useSearchParams() from next/navigation.

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchSummary() {
  const searchParams = useSearchParams()
  const search = searchParams.get('search') ?? ''
  const page = searchParams.get('page') ?? '1'

  return (
    <p>
      Searching for <strong>{search || 'everything'}</strong> on page {page}
    </p>
  )
}

Two details matter:

1. useSearchParams() is read-only.
2. In the App Router docs, Next.js explicitly recommends the page searchParams prop if you are already in a Server Component page.

The shared-component pattern that survives both routers

This is the cleanest answer if you are migrating gradually or sharing a search bar between pages/ and app/.

'use client'

import { useSearchParams } from 'next/navigation'

export function SearchBar() {
  const searchParams = useSearchParams()

  if (!searchParams) {
    return <input defaultValue="" placeholder="Search..." />
  }

  const search = searchParams.get('search') ?? ''

  return <input defaultValue={search} placeholder="Search..." />
}

That fallback is important in Pages Router prerendering. The official Pages Router docs now document useSearchParams from next/navigation as a shared option across both routers.

The mistake that keeps causing confusion

Most search results still mix old Pages Router answers with new App Router code.

If you copied something like this into app/page.tsx:

// Wrong mental model for a modern App Router page
const query = router.query.search

you are using the wrong abstraction. In the App Router, the page itself should usually read searchParams, and client components should use useSearchParams.

Which API should you choose?

Use the page prop when:

• the param changes the server query
• the param affects SEO or pagination
• the page should render from the URL alone

Use useSearchParams() when:

• the component is client-only
• you need live access after client navigation
• you are building a reusable search or filter widget

The production-safe rule

If the URL controls what data the page loads, read it on the server first and pass stable values downward. That keeps your route easy to reason about and avoids a lot of hydration and loading-state noise.

If you are already untangling router differences, these are worth reading next:

• Next.js App Router Guide: From Basics to Advanced Patterns
• How to Access Route Parameter Inside getServerSideProps
• Next.js 15 Middleware: Complete Guide to Auth, Rate Limiting, A/B Testing, and Edge Logic
• Fix "cookies() should be awaited" Error in Next.js 15

References

• Stack Overflow: How can I get (query string) parameters from the URL in Next.js?
• Next.js docs: useSearchParams
• Next.js docs: page.js searchParams
• Next.js docs: useSearchParams in the Pages Router

Related

• Next.js Redirect from / to another page

---

Originally published at https://www.iloveblogs.blog