APIs assíncronas

Algumas APIs do Next.js que antes eram síncronas, tornaram-se assíncronas.

A razão para isso é relativamente simples:

• O SSR Tradicional sempre esperava um request antes de renderizar qualquer conteúdo.
• Mas nem todos os componentes dependem do request para renderizar. Em tese eles poderiam iniciar a renderização antes do request “chegar”
• Logo, todas as APIs que dependem de dados específicos do request tornaram-se assíncronas.

O que mudou?

As seguintes APIs tornaram-se assíncronas:

• cookies
• headers
• params (prop de páginas, layouts, route handlers, etc.)
• searchParams (prop de páginas)

Como fazer a alteração?

É fácil e simples. Basta apenas esperar as promises se resolverem.

Caution

Atenção que, ao contrário dos cookies e headers as props params e searchParams já são Promises - e não funções que retornam promises! Isso significa que basta esperá-las (não podemos invocá-las).

Com o codemod:

npx @next/codemod@latest next-async-request-api .