Parent : [[INDEX-GLOBAL]]

Next.js 15 — params et searchParams comme Promises

Problème

Après migration Next.js 14 → 15, le build échoue avec une erreur de type sur les pages dynamiques :

Type '{ params: { id: string; } }' does not satisfy 'PageProps'.
  Types of property 'params' are incompatible.

Solution

Dans Next.js 15, params et searchParams sont des Promises qu'il faut await.

Correct

// page.tsx (route dynamique)
export default async function ModelPage(
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params
  // utiliser id...
}

// page.tsx avec searchParams
export default async function NewsPage(
  { searchParams }: { searchParams?: Promise<{ category?: string }> }
) {
  const sp = searchParams ? await searchParams : undefined
  const category = sp?.category
}

// generateMetadata aussi
export async function generateMetadata(
  { params }: { params: Promise<{ id: string }> }
): Promise<Metadata> {
  const { id } = await params
  // ...
}

Incorrect

// Next.js 14 style — ne compile plus en v15
export default async function ModelPage(
  { params }: { params: { id: string } }  // ❌
) {
  const id = params.id  // ❌
}

Pourquoi ça marche

Next.js 15 utilise un modèle async unifié pour les Server Components. params et searchParams sont résolus dynamiquement et doivent être awaited pour garantir la cohérence du rendu streaming.

Quand ne PAS l'utiliser

• Si vous restez sur Next.js 14, ne changez rien.
• Dans les Client Components, useParams() reste synchrone.

Source

• Projet : ai-hub
• Contexte : Migration Next.js 14.2.35 → 15.3.0
• Validé le : 2026-05-16