page.js

El archivo page te permite definir una interfaz de usuario (UI) que es única para una ruta. Puedes crear una página exportando por defecto un componente desde el archivo:

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

Es bueno saber

• Las extensiones de archivo .js, .jsx o .tsx pueden usarse para page.
• Una page siempre es la hoja del subárbol de rutas.
• Se requiere un archivo page para que un segmento de ruta sea accesible públicamente.
• Las páginas son Componentes de Servidor (Server Components) por defecto, pero pueden configurarse como Componentes de Cliente (Client Component).

Referencia

Props

params (opcional)

Una promesa que se resuelve en un objeto que contiene los parámetros de ruta dinámica desde el segmento raíz hasta esa página.

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

• Dado que el prop params es una promesa, debes usar async/await o la función use de React para acceder a los valores.
  • En la versión 14 y anteriores, params era un prop síncrono. Para mantener la compatibilidad hacia atrás, aún puedes acceder a él de forma síncrona en Next.js 15, pero este comportamiento quedará obsoleto en el futuro.

searchParams (opcional)

Una promesa que se resuelve en un objeto que contiene los parámetros de búsqueda de la URL actual. Por ejemplo:

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

• Dado que el prop searchParams es una promesa, debes usar async/await o la función use de React para acceder a los valores.
  • En la versión 14 y anteriores, searchParams era un prop síncrono. Para mantener la compatibilidad hacia atrás, aún puedes acceder a él de forma síncrona en Next.js 15, pero este comportamiento quedará obsoleto en el futuro.
• searchParams es una API Dinámica cuyos valores no pueden conocerse de antemano. Usarlo hará que la página utilice renderizado dinámico en el momento de la solicitud.
• searchParams es un objeto JavaScript plano, no una instancia de URLSearchParams.

Ejemplos

Mostrar contenido basado en params

Usando segmentos de ruta dinámica, puedes mostrar o obtener contenido específico para la página basado en el prop params.

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

Manejo de filtros con searchParams

Puedes usar el prop searchParams para manejar filtrado, paginación u ordenación basados en la cadena de consulta de la 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>Product Listing</h1>
      <p>Search query: {query}</p>
      <p>Current page: {page}</p>
      <p>Sort order: {sort}</p>
    </div>
  )
}

Lectura de searchParams y params en Componentes de Cliente

Para usar searchParams y params en un Componente de Cliente (que no puede ser async), puedes usar la función use de React para leer la promesa:

'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)
}

Historial de versiones