Benutzerdefiniertes Document

Ein benutzerdefiniertes Document kann die <html>- und <body>-Tags anpassen, die zum Rendern einer Page verwendet werden.

Um das Standard-Document zu überschreiben, erstellen Sie die Datei pages/_document wie unten gezeigt:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Wichtig zu wissen:

_document wird nur auf dem Server gerendert, daher können Event-Handler wie onClick in dieser Datei nicht verwendet werden.

<Html>, <Head />, <Main /> und <NextScript /> sind erforderlich, damit die Seite korrekt gerendert wird.

Einschränkungen

Die in _document verwendete <Head />-Komponente ist nicht dieselbe wie next/head. Die hier verwendete <Head />-Komponente sollte nur für <head>-Code verwendet werden, der für alle Seiten gemeinsam ist. Für alle anderen Fälle, wie z.B. <title>-Tags, empfehlen wir die Verwendung von next/head in Ihren Seiten oder Komponenten.
React-Komponenten außerhalb von <Main /> werden nicht vom Browser initialisiert. Fügen Sie hier keine Anwendungslogik oder benutzerdefiniertes CSS (wie styled-jsx) hinzu. Wenn Sie gemeinsame Komponenten auf allen Seiten benötigen (wie ein Menü oder eine Toolbar), lesen Sie stattdessen Layouts.
Document unterstützt derzeit keine Next.js Data Fetching-Methoden wie getStaticProps oder getServerSideProps.

Das Anpassen von renderPage ist fortgeschritten und nur für Bibliotheken wie CSS-in-JS erforderlich, die serverseitiges Rendering unterstützen. Dies ist für die eingebaute styled-jsx-Unterstützung nicht notwendig.

Wir empfehlen dieses Muster nicht. Erwägen Sie stattdessen die schrittweise Einführung des App Routers, der es Ihnen ermöglicht, Daten für Seiten und Layouts einfacher abzurufen.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const originalRenderPage = ctx.renderPage

    // Führt die React-Rendering-Logik synchron aus
    ctx.renderPage = () =>
      originalRenderPage({
        // Nützlich zum Einwickeln des gesamten React-Baums
        enhanceApp: (App) => App,
        // Nützlich für das Einwickeln auf einer pro-Seite-Basis
        enhanceComponent: (Component) => Component,
      })

    // Führt das übergeordnete `getInitialProps` aus, das jetzt das angepasste `renderPage` enthält
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Wichtig zu wissen:

getInitialProps in _document wird nicht während clientseitiger Navigationen aufgerufen.

Das ctx-Objekt für _document entspricht dem, das in getInitialProps empfangen wird, mit der Ergänzung von renderPage.

Einschränkungen

Anpassen von `renderPage`

On this page

Benutzerdefiniertes Document

Einschränkungen

Anpassen von renderPage

On this page

Anpassen von `renderPage`