huseyinseyit commented 2 weeks ago

< ### [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 commented 2 weeks ago

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 commented 2 weeks ago

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 (

Inventory

{ }

{}

);

}`

aalej commented 1 week ago

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 commented 1 week ago

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?

firebase / firebase-tools

searchParams does not work Firebase Hosting #7320

Inventory