logoNext.js Español
DocumentaciónBlogAprender
Introducción/Construyendo tu Aplicación/Enrutamiento (Routing)/Documento Personalizado

Documento Personalizado

Un Document personalizado puede actualizar las etiquetas <html> y <body> utilizadas para renderizar una Página.

Para sobrescribir el Document predeterminado, cree el archivo pages/_document como se muestra a continuación:

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

Es bueno saber:

  • _document solo se renderiza en el servidor, por lo que no se pueden usar manejadores de eventos como onClick en este archivo.
  • <Html>, <Head />, <Main /> y <NextScript /> son necesarios para que la página se renderice correctamente.

Advertencias

  • El componente <Head /> usado en _document no es el mismo que next/head. El componente <Head /> usado aquí solo debe utilizarse para código <head> común a todas las páginas. Para otros casos, como etiquetas <title>, recomendamos usar next/head en sus páginas o componentes.
  • Los componentes de React fuera de <Main /> no serán inicializados por el navegador. No añada lógica de aplicación aquí ni CSS personalizado (como styled-jsx). Si necesita componentes compartidos en todas sus páginas (como un menú o barra de herramientas), consulte Layouts en su lugar.
  • Document actualmente no admite los métodos de obtención de datos de Next.js como getStaticProps o getServerSideProps.

Personalizando renderPage

Personalizar renderPage es avanzado y solo es necesario para bibliotecas como CSS-in-JS que requieren renderizado del lado del servidor (SSR). No es necesario para la compatibilidad integrada con styled-jsx.

No recomendamos usar este patrón. En su lugar, considere adoptar gradualmente el App Router, que le permite obtener datos para páginas y layouts más fácilmente.

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

    // Ejecuta la lógica de renderizado de React sincrónicamente
    ctx.renderPage = () =>
      originalRenderPage({
        // Útil para envolver todo el árbol de React
        enhanceApp: (App) => App,
        // Útil para envolver por página
        enhanceComponent: (Component) => Component,
      })

    // Ejecuta el `getInitialProps` padre, que ahora incluye el `renderPage` personalizado
    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

    // Ejecuta la lógica de renderizado de React sincrónicamente
    ctx.renderPage = () =>
      originalRenderPage({
        // Útil para envolver todo el árbol de React
        enhanceApp: (App) => App,
        // Útil para envolver por página
        enhanceComponent: (Component) => Component,
      })

    // Ejecuta el `getInitialProps` padre, que ahora incluye el `renderPage` personalizado
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }

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

export default MyDocument

Es bueno saber:

  • getInitialProps en _document no se llama durante transiciones del lado del cliente.
  • El objeto ctx para _document es equivalente al recibido en getInitialProps, con la adición de renderPage.

Aplicación Personalizada

Controle la inicialización de páginas y agregue un diseño persistente para todas las páginas sobrescribiendo el componente App predeterminado que utiliza Next.js.

Rutas API

Next.js soporta Rutas API, que te permiten construir tu API sin salir de tu aplicación Next.js. Aprende cómo funciona aquí.