Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://nextjs.org/docs/app/api-reference/file-conventions/page below:

File-system conventions: page.js | Next.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>
}

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

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.

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.

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

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4