_document.js

O nosso arquivo de document tem a função de aumentar a quantidade de TAGs usadas em nossa aplicação, aqui é onde podemos manipular o DOM do nosso site, para que isso aconteça precisamos criar um _document.js .

Isso é necessário porque as páginas Next.js ignoram a definição da marcação do documento ao redor.

Para substituir o padrão Document, crie o arquivo /pages/_document.js e herde a Document classe conforme mostrado abaixo:

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
        )
  }
}

export default MyDocument

O código acima é o padrão Document adicionado pelo Next.js. Sinta-se à vontade para remover ou alterar a função getInitialProps.

<Html>, <Head />, <Main /> e <NextScript />são necessários para que a página seja devidamente processada.

O <Head />usado aqui não é o mesmo de [next/head](https://nextjs.org/docs/api-reference/next/head). O <Head /> usado aqui deve ser usado apenas para <head> comum em todas as páginas. Para todos os outros casos, como <title> ou meta tags, recomendado o uso do next/headnas páginas ou componentes.

O ctx(contexto) é o objeto recebido em [getInitialProps](https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#context-object), com um acréscimo:

renderPage : Function

Um retorno de chamada que executa a lógica de renderização real do React (de forma síncrona).

É útil decorar esta função para suportar wrappers de renderização de servidor como o de Afrodite [renderStatic](https://github.com/Khan/aphrodite#server-side-rendering)

OBS:

O Document só é renderizado no lado do servidor, ou seja, eventos como onClick, onChange entre outros não funcionaram e o console.log colocado nesse arquivo aparecerá no terminal e não no navegador.
Nenhum outro componente fora o <Main /> será inicializado pelo navegador aqui, pois o <Main /> contém o valor que é passado para o <App />, caso queira customizar ou validar alguma informação ela deverá ser realizada no _app.js previamente criado.
A função getInitialProps não é chamada todas as vezes que ocorre uma mudança de pagina ou de componente, ela é executada somente quando a aplicação é inicializada no seu primeiro render.

_document.js

OBS:

Did you find this article valuable?