Benutzerdefinierte App

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

• Ein gemeinsames Layout zwischen Seitenwechseln erstellen
• Zusätzliche Daten in Seiten einfügen
• Globales CSS hinzufügen

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

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 senden, 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.

Gut zu wissen

• Wenn Ihre App läuft und Sie eine benutzerdefinierte App hinzufügen, müssen Sie den Entwicklungsserver neu starten. 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 die schrittweise Einführung des App-Routers, 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' }
}