page.js in Next.js — Building Dynamic Pages with Route and Search Parameters

1. Defining a Page with page.js

To create a page, export a component as the default from a page.js, page.tsx, or page.jsx file.

// app/blog/[slug]/page.tsx
export default function Page({ params, searchParams }) {
  return <h1>My Page</h1>
}

2. Route Parameters (params)

Route parameters are passed as a Promise and must be accessed using async/await or use().

// app/shop/[slug]/page.tsx
export default async function Page({ params }) {
  const { slug } = await params
  return <h1>Product: {slug}</h1>
}

3. Search Parameters (searchParams)

Search parameters come from the URL query string and are also passed as a Promise.

// app/shop/page.tsx
export default async function Page({ searchParams }) {
  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>
  )
}

4. Using in Client Components

Client Components cannot be async, so use React’s use() to read params and searchParams.

'use client'
import { use } from 'react'

export default function Page({ params, searchParams }) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

5. Using PageProps for Strong Typing

Use PageProps to get strongly typed params and searchParams based on the route.

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

6. Good to Know

• A page is always the leaf of the route subtree
• A page file is required for a route to be publicly accessible
• Pages are Server Components by default, but can be marked as Client Components
• Using searchParams opts the page into dynamic rendering

Conclusion

The page.js file in Next.js lets you build dynamic, filterable, and personalized pages. With params and searchParams, you can control content based on the route and query string, creating fast and responsive user experiences.