Benutzerdefinierte App

Next.js verwendet die App-Komponente, um Seiten zu initialisieren. Sie können sie überschreiben und die Seiteninitialisierung steuern und:

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

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

Die Component-Eigenschaft ist die aktive Seite, sodass sich Component bei jedem Routenwechsel zur neuen Seite ändert. Alle Eigenschaften, die Sie an Component senden, werden von der Seite empfangen.

pageProps ist ein Objekt mit den ursprünglichen Eigenschaften, die für Ihre Seite durch eine unserer Datenabfragemethoden vorgeladen wurden, andernfalls ist es ein leeres Objekt.

Hinweis:

• Wenn Ihre App läuft und Sie eine benutzerdefinierte App hinzugefügt haben, müssen Sie den Entwicklungsserver neu starten. Nur erforderlich, wenn pages/_app.js zuvor nicht existierte.
• App unterstützt keine Next.js Datenabfragemethoden 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. Stattdessen sollten Sie die schrittweise Einführung des App Routers in Betracht ziehen, der es Ihnen ermöglicht, Daten für Seiten und Layouts einfacher abzurufen.

import App, { AppContext, AppInitialProps, AppProps } from 'next/app'
 
type AppOwnProps = { example: string }
 
export default function MyApp({
  Component,
  pageProps,
  example,
}: AppProps & AppOwnProps) {
  return (
    <>
      <p>Daten: {example}</p>
      <Component {...pageProps} />
    </>
  )
}
 
MyApp.getInitialProps = async (
  context: AppContext
): Promise<AppOwnProps & AppInitialProps> => {
  const ctx = await App.getInitialProps(context)
 
  return { ...ctx, example: 'data' }
}