page.js

Le fichier page vous permet de définir une interface utilisateur unique pour une route. Vous pouvez créer une page en exportant par défaut un composant depuis le fichier :

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  return <h1>My Page</h1>
}

Bon à savoir

• Les extensions de fichier .js, .jsx ou .tsx peuvent être utilisées pour page.
• Une page est toujours la feuille de l'arborescence des routes.
• Un fichier page est nécessaire pour rendre un segment de route accessible publiquement.
• Les pages sont par défaut des Composants Serveur, mais peuvent être configurées comme Composant Client.

Référence

Props

params (optionnel)

Une promesse qui se résout en un objet contenant les paramètres de route dynamiques depuis le segment racine jusqu'à cette page.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
}

• Comme la prop params est une promesse, vous devez utiliser async/await ou la fonction use de React pour accéder aux valeurs.
  • Dans la version 14 et antérieures, params était une prop synchrone. Pour assurer la compatibilité ascendante, vous pouvez toujours y accéder de manière synchrone dans Next.js 15, mais ce comportement sera déprécié à l'avenir.

searchParams (optionnel)

Une promesse qui se résout en un objet contenant les paramètres de recherche de l'URL actuelle. Par exemple :

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = (await searchParams).filters
}

• Comme la prop searchParams est une promesse, vous devez utiliser async/await ou la fonction use de React pour accéder aux valeurs.
  • Dans la version 14 et antérieures, searchParams était une prop synchrone. Pour assurer la compatibilité ascendante, vous pouvez toujours y accéder de manière synchrone dans Next.js 15, mais ce comportement sera déprécié à l'avenir.
• searchParams est une API Dynamique dont les valeurs ne peuvent pas être connues à l'avance. Son utilisation entraînera le passage de la page en rendu dynamique au moment de la requête.
• searchParams est un simple objet JavaScript, et non une instance de URLSearchParams.

Exemples

Affichage de contenu basé sur params

En utilisant des segments de route dynamiques, vous pouvez afficher ou récupérer du contenu spécifique pour la page en fonction de la prop params.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Article de blog : {slug}</h1>
}

Gestion du filtrage avec searchParams

Vous pouvez utiliser la prop searchParams pour gérer le filtrage, la pagination ou le tri en fonction de la chaîne de requête de l'URL.

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { page = '1', sort = 'asc', query = '' } = await searchParams

  return (
    <div>
      <h1>Liste des produits</h1>
      <p>Requête de recherche : {query}</p>
      <p>Page actuelle : {page}</p>
      <p>Ordre de tri : {sort}</p>
    </div>
  )
}

Lecture de searchParams et params dans les Composants Client

Pour utiliser searchParams et params dans un Composant Client (qui ne peut pas être async), vous pouvez utiliser la fonction use de React pour lire la promesse :

'use client'

import { use } from 'react'

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

Historique des versions