getInitialProps

Hinweis: getInitialProps ist eine veraltete API. Wir empfehlen stattdessen die Verwendung von getStaticProps oder getServerSideProps.

getInitialProps ist eine async-Funktion, die zur standardmäßig exportierten React-Komponente der Seite hinzugefügt werden kann. Sie wird sowohl auf der Serverseite als auch auf der Clientseite während Seitenübergängen ausgeführt. Das Ergebnis der Funktion wird als props an die React-Komponente weitergeleitet.

pages/index.tsx

TypeScript

import { NextPageContext } from 'next'
 
Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
 
export default function Page({ stars }: { stars: number }) {
  return stars
}

Hinweis:

Bei der Serverseitigen Darstellung werden die von getInitialProps zurückgegebenen Daten serialisiert. Stellen Sie sicher, dass das zurückgegebene Objekt ein einfaches Object ist und keine Date, Map oder Set verwendet.

Beim initialen Seitenaufruf wird getInitialProps nur auf dem Server ausgeführt. Bei der Navigation zu einer anderen Route mit der next/link-Komponente oder über next/router wird getInitialProps anschließend auch auf dem Client ausgeführt.

Wenn getInitialProps in einer benutzerdefinierten _app.js verwendet wird und die Seite, zu der navigiert wird, getServerSideProps verwendet, wird getInitialProps ebenfalls auf dem Server ausgeführt.

Kontextobjekt

getInitialProps erhält ein einzelnes Argument namens context, ein Objekt mit den folgenden Eigenschaften:

Name	Beschreibung
`pathname`	Aktuelle Route, der Pfad der Seite in `/pages`
`query`	Query-String der URL, als Objekt geparst
`asPath`	`String` des tatsächlichen Pfads (einschließlich der Query) wie im Browser angezeigt
`req`	HTTP-Anfrageobjekt (nur Server)
`res`	HTTP-Antwortobjekt (nur Server)
`err`	Fehlerobjekt, falls während des Renderings ein Fehler auftritt

Einschränkungen

getInitialProps kann nur in pages/ Top-Level-Dateien verwendet werden und nicht in verschachtelten Komponenten. Für verschachtelte Datenabfragen auf Komponentenebene sollten Sie den App Router in Betracht ziehen.
Unabhängig davon, ob Ihre Route statisch oder dynamisch ist, können alle von getInitialProps als props zurückgegebenen Daten auf der Clientseite im ursprünglichen HTML untersucht werden. Dies dient dazu, die Seite korrekt zu hydratisieren. Achten Sie darauf, keine sensiblen Informationen in props zu übergeben, die nicht auf dem Client verfügbar sein sollten.