page.js

Файл page позволяет определять пользовательский интерфейс, который является уникальным для маршрута. Вы можете создать страницу, экспортируя компонент по умолчанию из файла:

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

export default function Page({ params, searchParams }) {
  return <h1>My Page</h1>
}

Полезно знать

Для page можно использовать расширения файлов .js, .jsx или .tsx.
page всегда является конечным элементом поддерева маршрутов.
Файл page обязателен для того, чтобы сегмент маршрута был публично доступен.
Страницы по умолчанию являются Серверными Компонентами (Server Components), но могут быть настроены как Клиентские Компоненты (Client Component).

Справочник

Пропсы

`params` (опционально)

Промис, который разрешается в объект, содержащий динамические параметры маршрута от корневого сегмента до данной страницы.

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

export default async function Page({ params }) {
  const { slug } = await params
}

Пример маршрута	URL	`params`
`app/shop/[slug]/page.js`	`/shop/1`	`Promise<{ slug: '1' }>`
`app/shop/[category]/[item]/page.js`	`/shop/1/2`	`Promise<{ category: '1', item: '2' }>`
`app/shop/[...slug]/page.js`	`/shop/1/2`	`Promise<{ slug: ['1', '2'] }>`

Поскольку проп params является промисом, для доступа к значениям необходимо использовать async/await или функцию React use.
- В версии 14 и ранее params был синхронным пропом. Для обеспечения обратной совместимости в Next.js 15 его всё ещё можно использовать синхронно, но это поведение будет устаревшим в будущем.

`searchParams` (опционально)

Промис, который разрешается в объект, содержащий параметры поиска текущего URL. Например:

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

export default async function Page({ searchParams }) {
  const filters = (await searchParams).filters
}

Пример URL	`searchParams`
`/shop?a=1`	`Promise<{ a: '1' }>`
`/shop?a=1&b=2`	`Promise<{ a: '1', b: '2' }>`
`/shop?a=1&a=2`	`Promise<{ a: ['1', '2'] }>`

Поскольку проп searchParams является промисом, для доступа к значениям необходимо использовать async/await или функцию React use.
- В версии 14 и ранее searchParams был синхронным пропом. Для обеспечения обратной совместимости в Next.js 15 его всё ещё можно использовать синхронно, но это поведение будет устаревшим в будущем.
searchParams — это Динамический API, значения которого невозможно узнать заранее. Его использование переводит страницу в режим динамического рендеринга (dynamic rendering) во время запроса.
searchParams — это обычный JavaScript-объект, а не экземпляр URLSearchParams.

Примеры

Отображение контента на основе `params`

Используя динамические сегменты маршрута, вы можете отображать или получать конкретный контент для страницы на основе пропа params.

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

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

Обработка фильтрации с помощью `searchParams`

Вы можете использовать проп searchParams для обработки фильтрации, пагинации или сортировки на основе строки запроса 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>
  )
}

export default async function Page({ searchParams }) {
  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>
  )
}

Чтение `searchParams` и `params` в Клиентских Компонентах

Для использования searchParams и params в Клиентском Компоненте (который не может быть async), вы можете использовать функцию React use для чтения промиса:

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

'use client'

import { use } from 'react'

export default function Page({ params, searchParams }) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

История версий

Версия	Изменения
`v15.0.0-RC`	`params` и `searchParams` теперь являются промисами. Доступен кодмод.
`v13.0.0`	Введён `page`.

On this page