Benutzerdefinierte App

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

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

Verwendung

Um die Standard-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} />
}

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

Die Component-Prop ist die aktive page, daher ändert sich Component bei Navigation zwischen Routen zur neuen page. Alle Props, die Sie an Component übergeben, 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.

Wissenswert

• 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 ermöglicht.

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

import App from 'next/app'

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

MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)

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