`page.js`

Defines the UI unique to a route segment and makes it publicly accessible.

Since Next 13 (App Router); async params/searchParams Next 15 Spec ↗

Syntax

export default function Page({ params, searchParams }) { ... }

Parameters

Name	Type	Required	Description
`params`	`Promise<Record<string, string \| string[]>>`	No	Async dynamic route params (Next 15).
`searchParams`	`Promise<Record<string, string \| string[]>>`	No	Async query string params (Next 15).

Returns

ReactNode — The route's page UI.

Examples

// app/blog/[slug]/page.tsx
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)
  return <article>{post.title}</article>
}

// app/search/page.tsx
export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>
}) {
  const { q } = await searchParams
  return <Results query={q ?? ''} />
}

Notes

A route is only publicly routable when it has a `page` file. Server Component by default. Next 15: `params` and `searchParams` are Promises and must be awaited. Accessing `searchParams` opts the route into dynamic rendering.