useSearchParams() should be wrapped in a suspense boundary at page '...'. Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

`useSearchParams()` kräver en `<Suspense>`-gräns runt komponenten för att undvika att hela sidan renderas dynamiskt.

Förklaring

useSearchParams() ger tillgång till URL-parametrar (?key=value). Eftersom URL-parametrarna är okända vid byggtid kan Next.js inte förgenerera sidan statiskt om en komponent läser dem. Utan en Suspense-gräns gör Next.js hela sidan dynamisk, vilket tar bort fördelen med statisk generering.

När komponenten omges av <Suspense> kan Next.js dela upp sidan: den statiska delen byggs i förväg och den del som beror på URL-parametrar renderas vid behov. Det ger bästa möjliga prestanda.

Felet syns som en varning vid byggtid (next build) och kan leda till sämre build-output om det ignoreras.

Vanliga orsaker

En komponent som anropar useSearchParams() saknar <Suspense>-omslutning. Vanligt vid funktioner som filtrering, sökning, och paginering.

Lösning

Omslut komponenten som använder useSearchParams() med <Suspense>:

import { Suspense } from 'react';
import SearchResults from './SearchResults';

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

Flytta useSearchParams()-anropet till en separat klientkomponent (SearchResults.js med 'use client') som omges av Suspense i page-filen.