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

Gut 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 Server-seitiges Rendering (SSR) 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ühre die React-Rendering-Logik synchron aus
    ctx.renderPage = () =>
      originalRenderPage({
        // Nützlich zum Einwickeln des gesamten React-Baums
        enhanceApp: (App) => App,
        // Nützlich zum Einwickeln auf einer pro-Seite-Basis
        enhanceComponent: (Component) => Component,
      })

    // Führe 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ühre die React-Rendering-Logik synchron aus
    ctx.renderPage = () =>
      originalRenderPage({
        // Nützlich zum Einwickeln des gesamten React-Baums
        enhanceApp: (App) => App,
        // Nützlich zum Einwickeln auf einer pro-Seite-Basis
        enhanceComponent: (Component) => Component,
      })

    // Führe 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

Gut zu wissen

  • getInitialProps in _document wird nicht während client-seitiger Navigationen aufgerufen.
  • Das ctx-Objekt für _document entspricht dem in getInitialProps erhaltenen, 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.

API-Routen

Next.js unterstützt API-Routen, mit denen Sie Ihre API erstellen können, ohne Ihre Next.js-App zu verlassen. Erfahren Sie hier, wie es funktioniert.