`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.