page.js

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
}

• 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
}

Client Component pages can also access searchParams using React’s use hook:

'use client'
import { use } from 'react'
 
export default function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = use(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 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.

Page Props Helper

You can type pages with PageProps to get strongly typed params and searchParams from the route literal. PageProps is a globally available helper.

export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  const query = await props.searchParams
  return <h1>Blog Post: {slug}</h1>
}

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