Document personnalisé

Un Document personnalisé peut modifier les balises <html> et <body> utilisées pour rendre une Page.

Pour remplacer le Document par défaut, créez le fichier pages/_document comme indiqué ci-dessous :

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

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

Bon à savoir :

_document est uniquement rendu côté serveur, donc les gestionnaires d'événements comme onClick ne peuvent pas être utilisés dans ce fichier.

<Html>, <Head />, <Main /> et <NextScript /> sont nécessaires pour que la page soit correctement rendue.

Mises en garde

Le composant <Head /> utilisé dans _document n'est pas le même que next/head. Le <Head /> utilisé ici ne doit être utilisé que pour le code <head> commun à toutes les pages. Pour tous les autres cas, comme les balises <title>, nous recommandons d'utiliser next/head dans vos pages ou composants.
Les composants React en dehors de <Main /> ne seront pas initialisés par le navigateur. Ne rajoutez pas de logique applicative ici ou de CSS personnalisé (comme styled-jsx). Si vous avez besoin de composants partagés sur toutes vos pages (comme un menu ou une barre d'outils), consultez plutôt Layouts.
Document ne prend actuellement pas en charge les méthodes de récupération de données de Next.js comme getStaticProps ou getServerSideProps.

Personnalisation de `renderPage`

La personnalisation de renderPage est avancée et uniquement nécessaire pour des bibliothèques comme CSS-in-JS afin de supporter le rendu côté serveur. Ce n'est pas nécessaire pour le support natif de styled-jsx.

Nous ne recommandons pas d'utiliser ce modèle. Envisagez plutôt d'adopter progressivement le routeur App, qui vous permet de récupérer plus facilement des données pour les pages et les layouts.

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

    // Exécute la logique de rendu React de manière synchrone
    ctx.renderPage = () =>
      originalRenderPage({
        // Utile pour englober l'arbre React entier
        enhanceApp: (App) => App,
        // Utile pour englober à la page
        enhanceComponent: (Component) => Component,
      })

    // Exécute le `getInitialProps` parent, qui inclut désormais le `renderPage` personnalisé
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }

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

export default MyDocument

Bon à savoir :

getInitialProps dans _document n'est pas appelé lors des transitions côté client.

L'objet ctx pour _document est équivalent à celui reçu dans getInitialProps, avec l'ajout de renderPage.

Mises en garde

Personnalisation de renderPage

On this page

Personnalisation de `renderPage`