page.js

API reference for the page.js file.

The page file allows you to define UI that is unique to a route. You can create a page by default exporting a component from the file:

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

Good to know

  • The .js, .jsx, or .tsx file extensions can be used for page.
  • A page is always the leaf of the route subtree.
  • A page file is required to make a route segment publicly accessible.
  • Pages are Server Components by default, but can be set to a Client Component.

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
}
Example RouteURLparams
app/shop/[slug]/page.js/shop/1Promise<{ slug: '1' }>
app/shop/[category]/[item]/page.js/shop/1/2Promise<{ category: '1', item: '2' }>
app/shop/[...slug]/page.js/shop/1/2Promise<{ slug: ['1', '2'] }>
  • 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 compatibility, 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
}
Example URLsearchParams
/shop?a=1Promise<{ a: '1' }>
/shop?a=1&b=2Promise<{ a: '1', b: '2' }>
/shop?a=1&a=2Promise<{ a: ['1', '2'] }>
  • 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 compatibility, 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 default 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

VersionChanges
v15.0.0-RCparams and searchParams are now promises. A codemod is available.
v13.0.0page introduced.

On this page