page.js

Die page-Datei wird verwendet, um eine Seite in Ihrer Next.js-Anwendung zu definieren.

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  return <h1>Meine Seite</h1>
}

Referenz

Props

params (optional)

Ein Promise, der zu einem Objekt aufgelöst wird, das die dynamischen Routenparameter vom Stammsegment bis zu dieser Seite enthält.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const slug = (await params).slug
}

• Da params ein Promise ist, müssen Sie async/await oder Reacts use-Funktion verwenden, um auf die Werte zuzugreifen.
  • In Version 14 und früher war params ein synchrones Prop. Zur Unterstützung der Abwärtskompatibilität können Sie in Next.js 15 weiterhin synchron darauf zugreifen, aber dieses Verhalten wird in Zukunft als veraltet markiert werden.

searchParams (optional)

Ein Promise, der zu einem Objekt aufgelöst wird, das die Suchparameter der aktuellen URL enthält. Zum Beispiel:

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const filters = (await searchParams).filters
}

• Da searchParams ein Promise ist, müssen Sie async/await oder Reacts use-Funktion verwenden, um auf die Werte zuzugreifen.
  • In Version 14 und früher war searchParams ein synchrones Prop. Zur Unterstützung der Abwärtskompatibilität können Sie in Next.js 15 weiterhin synchron darauf zugreifen, aber dieses Verhalten wird in Zukunft als veraltet markiert werden.
• searchParams ist eine Dynamische API, deren Werte nicht im Voraus bekannt sind. Die Verwendung führt dazu, dass die Seite zur dynamischen Rendering-Zeit gerendert wird.
• searchParams ist ein einfaches JavaScript-Objekt und keine URLSearchParams-Instanz.

Beispiele

Anzeigen von Inhalten basierend auf params

Mithilfe von dynamischen Routensegmenten können Sie spezifische Inhalte für die Seite basierend auf der params-Eigenschaft anzeigen oder abrufen.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blogbeitrag: {slug}</h1>
}

Filterbehandlung mit searchParams

Sie können die searchParams-Eigenschaft verwenden, um Filterung, Paginierung oder Sortierung basierend auf der Abfragezeichenfolge der URL zu behandeln.

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { page = '1', sort = 'asc', query = '' } = await searchParams
 
  return (
    <div>
      <h1>Produktliste</h1>
      <p>Suchanfrage: {query}</p>
      <p>Aktuelle Seite: {page}</p>
      <p>Sortierreihenfolge: {sort}</p>
    </div>
  )
}

Lesen von searchParams und params in Client-Komponenten

Um searchParams und params in einer Client-Komponente (die nicht async sein kann) zu verwenden, können Sie Reacts use-Funktion zum Lesen des Promises verwenden:

'use client'
 
import { use } from 'react'
 
export function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

'use client'
 
import { use } from 'react'
 
export function Page({ params, searchParams }) {
  const { slug } = use(params)
  const { query } = use(searchParams)
}

Versionsverlauf