Menu

Benutzerdefiniertes Dokument

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

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

pages/_document.tsx
TypeScript
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Hinweis:

  • _document wird nur auf dem Server gerendert, daher können Ereignishandler wie onClick in dieser Datei nicht verwendet werden.
  • <Html>, <Head />, <Main /> und <NextScript /> sind erforderlich, damit die Seite korrekt gerendert wird.

Vorbehalte

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

Anpassen von renderPage

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

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

pages/_document.tsx
TypeScript
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ühre die React-Rendering-Logik synchron aus
    ctx.renderPage = () =>
      originalRenderPage({
        // Nützlich zum Wrappen des gesamten React-Baums
        enhanceApp: (App) => App,
        // Nützlich zum Wrappen auf Seitenebene
        enhanceComponent: (Component) => Component,
      })
 
    // Führe das übergeordnete `getInitialProps` aus, es enthält jetzt das benutzerdefinierte `renderPage`
    const initialProps = await Document.getInitialProps(ctx)
 
    return initialProps
  }
 
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
 
export default MyDocument

Hinweis:

  • getInitialProps in _document wird während clientseitiger Übergänge nicht aufgerufen.
  • Das ctx-Objekt für _document entspricht dem in getInitialProps erhaltenen, mit dem Zusatz von renderPage.