Benutzerdefinierte App

Next.js verwendet die App-Komponente zur Initialisierung von Seiten. Sie können diese überschreiben und die Seiteninitialisierung sowie folgende Aspekte steuern:

• Erstellen eines gemeinsamen Layouts zwischen Seitenwechseln
• Einfügen zusätzlicher Daten in Seiten
• Hinzufügen von globalem CSS

Verwendung

Um die standardmäßige App zu überschreiben, erstellen Sie die Datei pages/_app wie unten gezeigt:

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Die Component-Property ist die aktive page, daher ändert sich Component bei Navigation zwischen Routen zur neuen page. Alle an Component übergebenen Props werden somit von der page empfangen.

pageProps ist ein Objekt mit den initialen Props, die für Ihre Seite durch eine unserer Datenabrufmethoden vorab geladen wurden, andernfalls ist es ein leeres Objekt.

Wichtig zu wissen:

• Wenn Ihre App läuft und Sie eine benutzerdefinierte App hinzufügen, müssen Sie den Entwicklungsserver neu starten. Dies ist nur erforderlich, wenn pages/_app.js zuvor nicht existierte.
• App unterstützt keine Next.js Datenabrufmethoden wie getStaticProps oder getServerSideProps.

getInitialProps mit App

Die Verwendung von getInitialProps in App deaktiviert die Automatische Statische Optimierung für Seiten ohne getStaticProps.

Wir empfehlen dieses Muster nicht. Erwägen Sie stattdessen eine schrittweise Migration zum App-Router, der das Abrufen von Daten für Seiten und Layouts einfacher gestaltet.

import App, { AppContext, AppInitialProps, AppProps } from 'next/app'

type AppOwnProps = { example: string }

export default function MyApp({
  Component,
  pageProps,
  example,
}: AppProps & AppOwnProps) {
  return (
    <>
      <p>Data: {example}</p>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (
  context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx, example: 'data' }
}