Why useSearchParams returns null even though query string is existing on url

[walt1992]

Summary

My url has query params when It landing. For instance, https://my.com?tab=INFO

But in the init render, useSearchParams returns null value in searchParams.get('tab').

Why this hook doesn't reflect query string on the first render?
How can I get real query string on the first render phase?

Additional information

No response

Example

No response

[icyJoseph]

Does your APP have pages folder still?

[walt1992]

@icyJoseph
yes. my app is still using pages instead of app router

[icyJoseph]

Yeah I think that's the problem, when pages are used, to enforce compatibility they introduced this behavior.

[agomesd]

I'm getting this behaviour with app router, next version = 14.1.4

[S550Stang]

@walt1992 Firstly useSearchParams does get access to any query on First Render

i've tested this on my local as well with your use case ?tab=INFO im able to access it

Things to check & Trye

#1 Are you invoking it correctly ?

'use client'
import { useSearchParams } from 'next/navigation'

export default function ClientComponent() {
    
    const searchParams = useSearchParams() // <--- hooks needs to be invoked 

  return <h1>{searchParams.get('tab')}</h1>
}

#2 On initial render you can grab those in you page.js/ts

export default function Page({ params, searchParams }) {
  console.log("searchParams From Page.js",searchParams)
  // output { tab : "INFO" }  
  // if no query params are found you will get an empty object {}
  return <h1>My Page</h1>
}

#3 You Can Leverage The Use Of Middleware

import { NextResponse } from 'next/server';

// This function can be marked `async` if using `await` inside
export function middleware(request) {
    // Extracting pathname and search from the request URL
    const { pathname, searchParams } = request.nextUrl;

    const reqHeaders = new Headers(request.headers);

    reqHeaders.set('pathname', pathname);
    reqHeaders.set('searchParams', searchParams);

    const response = NextResponse.next({
        request: {
            headers: reqHeaders
        }
    });

    return response;
}

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - api (API routes)
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         */
        '/((?!api|_next/static|_next/image|favicon.ico).*)'
    ]
};

-----------------------------------------------------------------------

You can grab the response of this middleware in any server component like so

import { headers } from 'next/headers';

export default function Page() {
  console.log("searchParams coming from middleware to Page.js",headers().get('searchParams'))
  return <h1>My Page</h1>
}

[vedant476]

This usually happens because of one of a few common reasons:

1. Missing Suspense boundary
   useSearchParams() opts the component into client-side rendering up to the nearest <Suspense> boundary. If you're not wrapping the component (or a parent) in <Suspense>, Next.js may bail out and the value can appear null or empty on the very first render before hydration catches up.

   import { Suspense } from 'react'
   
   function SearchParamsReader() {
     const searchParams = useSearchParams()
     return <div>{searchParams.get('tab')}</div>
   }
   
   export default function Page() {
     return (
       <Suspense fallback={null}>
         <SearchParamsReader />
       </Suspense>
     )
   }

2. Using it in a Server Component
   useSearchParams only works in Client Components. Make sure "use client" is at the top of the file.

   "use client"
   
   import { useSearchParams } from 'next/navigation'
   
   export default function Page() {
     const searchParams = useSearchParams()
     console.log(searchParams.get('tab'))
   
     return <div>{searchParams.get('tab')}</div>
   }

   If you're using a Server Component/page instead, read the searchParams prop:

   export default async function Page({ searchParams }) {
     const params = await searchParams
     console.log(params.tab)
   
     return <div>{params.tab}</div>
   }

3. Static rendering
   If the route is statically generated, the search parameters aren't available during the build. The initial render may therefore not have the expected value, and the client can update after hydration. This can be expected behavior rather than a bug.

So the first things I'd check are:

• Is the component marked with "use client"?
• Is useSearchParams() inside a <Suspense> boundary?
• Are you using searchParams correctly if this is a Server Component?
• Are you expecting the query parameter during the server/static render?

If you share the component where you're calling useSearchParams(), the exact issue can usually be pinpointed pretty quickly.

[Khushbumandal2060]

This is expected behavior in the Next.js App Router, not a bug.

useSearchParams() returns null during static prerendering (at build time). When Next.js statically generates the page, there is no request URL yet, so the hook has no search params to read and returns null on the server.

To fix it, wrap the component that calls useSearchParams in a boundary:

import { Suspense } from "react";
import { useSearchParams } from "next/navigation";

function SearchResults() {
  const params = useSearchParams();
  const q = params?.get("q") ?? "";
  return <div>Searching for: {q}</div>;
}

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SearchResults />
    </Suspense>
  );
}