What is the custom Document component used for in the Pages Router?

The custom Document component, defined in pages/_document.js, controls the initial HTML structure of your page, such as the html and body tags, and is the right place to add things like custom fonts, a language attribute, or third party scripts that need to load in the head or body.

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

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