page.js

Last updated April 23, 2026

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:

app/blog/[slug]/page.tsx

JavaScriptTypeScript

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.
• In the component hierarchy, page.js is the innermost file convention. It is wrapped by loading.js (Suspense boundary), error.js (error boundary), template.js, and layout.js in the same segment.

Reference

Props

params (optional)

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

app/shop/[slug]/page.tsx

JavaScriptTypeScript

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:

app/shop/page.tsx

JavaScriptTypeScript

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:

app/shop/page.tsx

JavaScriptTypeScript

'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 Request-time 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.

app/blog/[slug]/page.tsx

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

Good to know

• Using a literal route (e.g. '/blog/[slug]') enables autocomplete and strict keys for params.
• Static routes resolve params to {}.
• Types are generated during next dev, next build, or with next typegen.
• After type generation, the PageProps helper is globally available. It doesn't need to be imported.

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.

app/blog/[slug]/page.tsx

JavaScriptTypeScript

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.

app/shop/page.tsx

JavaScriptTypeScript

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:

app/page.tsx

JavaScriptTypeScript

'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

Was this helpful?