logoNext.js Deutsch
DokumentationBlogLernen
Einführung/Aufbau Ihrer Anwendung/Routing/Benutzerdefiniertes Document

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>
  )
}
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.

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 für die eingebaute styled-jsx-Unterstützung nicht erforderlich.

Wir empfehlen dieses Muster nicht. Erwägen Sie stattdessen die schrittweise Einführung des App-Routers, der es Ihnen ermöglicht, Daten einfacher für Seiten und Layouts 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 Einpacken des gesamten React-Baums
        enhanceApp: (App) => App,
        // Nützlich zum Einpacken auf einer pro-Seite-Basis
        enhanceComponent: (Component) => Component,
      })

    // Führt das übergeordnete `getInitialProps` aus, das jetzt das benutzerdefinierte `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
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const originalRenderPage = ctx.renderPage

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

    // Führt das übergeordnete `getInitialProps` aus, das jetzt das benutzerdefinierte `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 während clientseitiger Navigationen nicht aufgerufen.
  • Das ctx-Objekt für _document entspricht dem in getInitialProps empfangenen Objekt, mit der Ergänzung von renderPage.

Benutzerdefinierte App

Steuern der Seiteninitialisierung und Hinzufügen eines Layouts, das für alle Seiten erhalten bleibt, durch Überschreiben der standardmäßigen App-Komponente von Next.js.

Benutzerdefinierte Fehlerseiten

Überschreiben und erweitern Sie die integrierte Fehlerseite, um benutzerdefinierte Fehler zu behandeln.