Error: Route '...' used `searchParams.q`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

I Next.js 15 är `searchParams` ett löfte som måste awaitas i page-filer innan dess properties kan läsas.

Förklaring

I Next.js 15 gjordes både params och searchParams asynkrona i page.js-filer. Det är en breaking change från Next.js 14 och tidigare, där searchParams var ett vanligt objekt.

Felmeddelandet uppstår när du läser searchParams.q, searchParams.page, eller någon annan property utan att först awaita searchParams. Alla properties returnerar då undefined.

searchParams representerar URL-frågeparametrar som ?q=sök&page=2. Eftersom dessa är request-specifika kan de inte förhämtas vid byggtid, vilket förklarar varför Next.js hanterar dem som ett Promise.

Vanliga orsaker

Uppgradering från Next.js 14 till 15 utan att uppdatera page.js-filer som läser searchParams. searchParams destructureras direkt i funktionssignaturen utan await.

Lösning

Awaita searchParams innan du läser dess properties:

// Fel (Next.js 14-stil)
export default function Page({ searchParams }) {
  const query = searchParams.q;
  const page = searchParams.page ?? '1';
}

// Rätt (Next.js 15)
export default async function Page({ searchParams }) {
  const { q, page = '1' } = await searchParams;
}

Detsamma gäller i generateMetadata-funktioner som läser searchParams.