searchParams does not work Firebase Hosting

[huseyinseyit]

[REQUIRED] Environment info

Firebase CLI: 13.11.2 Windows, Next.js 14.2.3

[REQUIRED] Test case

A new project was created, a search was done using searchParams. Localhost works properly without any problems. firebase experiments:enable webframeworks activated. npm run build. Firebase deploy process completes successfully but https://xxx.web.app does not work

[REQUIRED] Steps to reproduce

A new project was created, a search was done using searchParams. firebase experiments:enable webframeworks activated. npm run build. Firebase deploy

[REQUIRED] Expected behavior

Works on firebase hosting too.

[REQUIRED] Actual behavior

Localhost works properly without any problems but firebase hosting dont work. There is no error in the console.

[aalej]

Hey @huseyinseyit, thanks for reaching out. Currently, I’m unable to reproduce the behavior you mentioned. I tried creating a new Next.js project and used searchParams. After running firebase deploy and checking the deployed application, I was able to verify that the query parameters from the URL were being read.

I’m using this to try and replicate the issue. If I'm missing anything or if I made a mistake, please let me know. Alternatively, any chance you could share a minimal reproducible example with us or sample code snippets? This will help us accurately reproduce the issue.

[huseyinseyit]

First of all, thank you, I have added the project structure, the visual is below, and I am also adding the inventory page.tsx, import { Suspense } from 'react'; import CardWrapper from '../../components/cards'; import Search from '../../components/search'; import Pagination from './pagination'; import Table from './table'; export default async function Page({ searchParams, }: { searchParams?: { query?: string; page?: string; }; }) { const query = searchParams?.query || ''; //const currentPage = Number(searchParams?.page) || 1; const currentPage = 1; const totalPages = 1; return ( <div className="h-full bg-gray-800 border-t border-l border-gray-600 p-3"> <div className="overflow-hidden flex justify-between items-center"> <h1 className="text-white text-2xl font-bold pb-3">Inventory</h1> <div className="flex items-center"> <div className="ml-auto"> <div className="flex items-center"> <button className="bg-slate-500 text-[14px] text-white px-3 py-1 rounded"> Export </button> <button className="bg-slate-500 text-[14px] text-white px-3 py-1 rounded ml-2"> New Model </button> </div> </div> </div> </div> <div className='overflow-hidden'> <div className="flex justify-around gap-4"> <CardWrapper /> </div> </div> <div className="mt-4 flex items-center justify-between"> <Search placeholder="Search model..." /> </div> {<Suspense key={query + currentPage} > <Table query={query} currentPage={currentPage} /> </Suspense>} <div className="mt-5 flex w-full justify-center"> {<Pagination totalPages={totalPages} />} </div> </div> ); }

[aalej]

Thanks for sharing code snippets. I copied the code you provided, but it looks like it uses some components you created like CardWrapper, Search, etc. I removed those components so that I can run the application.

// app/page.tsx
export default async function Page({
 searchParams,
}: {
 searchParams?: { query?: string; page?: string };
}) {
 const query = searchParams?.query || "";
 //const currentPage = Number(searchParams?.page) || 1;
 const currentPage = 1;
 const totalPages = 1;
 return (
   <div className="h-full bg-gray-800 border-t border-l border-gray-600 p-3">
     <div className="overflow-hidden flex justify-between items-center">
       <h1 className="text-white text-2xl font-bold pb-3">Inventory</h1>
       <div className="flex items-center">
         <div className="ml-auto">
           <div className="flex items-center">
             <button className="bg-slate-500 text-[14px] text-white px-3 py-1 rounded">
               Export
             </button>
             <button className="bg-slate-500 text-[14px] text-white px-3 py-1 rounded ml-2">
               New Model
             </button>
           </div>
         </div>
       </div>
     </div>
     <div className="overflow-hidden">
       <div className="flex justify-around gap-4"></div>
     </div>
     <div className="mt-4 flex items-center justify-between"></div>
     The query is: {query}
     <div className="mt-5 flex w-full justify-center"></div>
   </div>
 );
}

I’m still unable to reproduce the issue. The query string parameters are accessible in searchParams. Could you provide an MCVE so that we can replicate the issue on our end?

[huseyinseyit]

Hi, I added the contents one by one and tried it, it worked now. It's really interesting because I didn't make any changes. Does it take a while for the server to be ready on the firebase side?

[chalosalvador]

@huseyinseyit I'm glad you got it working.

Regarding your question, the server is usually available immediately after the deployment is complete, but it may depend on your specific configuration.

I'm going to close this issue since everything seems fine.