page.js

Die page-Datei ermöglicht es Ihnen, eine Benutzeroberfläche zu definieren, die für eine Route eindeutig ist. Sie können eine Seite erstellen, indem Sie eine Komponente standardmäßig aus der Datei exportieren:

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

Wissenswertes

• Die Dateierweiterungen .js, .jsx oder .tsx können für page verwendet werden.
• Eine page ist immer das Blatt des Routen-Unterbaums.
• Eine page-Datei ist erforderlich, um ein Routensegment öffentlich zugänglich zu machen.
• Seiten sind standardmäßig Server Components, können aber als Client Component festgelegt werden.

Referenz

Props

params (optional)

Ein Promise, das sich zu einem Objekt auflöst, das die dynamischen Routenparameter vom Wurzelsegment bis zu dieser Seite enthält.

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

• Da die params-Prop 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 eine synchrone Prop. Zur Abwärtskompatibilität können Sie in Next.js 15 weiterhin synchron darauf zugreifen, aber dieses Verhalten wird in Zukunft veraltet sein.

searchParams (optional)

Ein Promise, das sich zu einem Objekt auflöst, 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 die searchParams-Prop 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 eine synchrone Prop. Zur Abwärtskompatibilität können Sie in Next.js 15 weiterhin synchron darauf zugreifen, aber dieses Verhalten wird in Zukunft veraltet sein.
• searchParams ist eine Dynamic API, deren Werte nicht im Voraus bekannt sein können. Die Verwendung führt dazu, dass die Seite zur Laufzeit in dynamisches Rendering wechselt.
• searchParams ist ein einfaches JavaScript-Objekt, keine URLSearchParams-Instanz.

Beispiele

Anzeigen von Inhalten basierend auf params

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

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

Handhabung von Filtern mit searchParams

Sie können die searchParams-Prop verwenden, um Filterung, Paginierung oder Sortierung basierend auf der Query-String der URL zu handhaben.

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 Components

Um searchParams und params in einer Client Component (die nicht async sein kann) zu verwenden, können Sie Reacts use-Funktion verwenden, um das Promise zu lesen:

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

Versionsverlauf