page.js

The page file is used to define a page in your Next.js application.

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

Reference

Props

params (optional)

A promise that resolves to an object containing the dynamic route parameters from the root segment down to that page.

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

• Since the params prop is a promise. You must use async/await or React's use function to access the values.
  • In version 14 and earlier, params was a synchronous prop. To help with backwards compatability, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.

searchParams (optional)

A promise that resolves to an object containing the search parameters of the current URL. For example:

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

• Since the searchParams prop is a promise. You must use async/await or React's use function to access the values.
  • In version 14 and earlier, searchParams was a synchronous prop. To help with backwards compatability, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.
• searchParams is a Dynamic API whose values cannot be known ahead of time. Using it will opt the page into dynamic rendering at request time.
• searchParams is a plain JavaScript object, not a URLSearchParams instance.

## Examples

Displaying content based on params

Using dynamic route segments, you can display or fetch specific content for the page based on the params prop.

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

Handling filtering with searchParams

You can use the searchParams prop to handle filtering, pagination, or sorting based on the query string of the 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>
  )
}

Reading searchParams and params in Client Components

To use searchParams and params in a Client Component (which cannot be async), you can use React's use function to read the promise:

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

Version History