Course lesson

Override the Default Next.js Document

The Document is like the top level HTML structure of your Next.js application. By default it looks like this:

Duration
4 min
Access
Included
Transcript
Retained from source evidence

The Document is like the top level HTML structure of your Next.js application. By default it looks like this:

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

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

As you can see it looks pretty close to an HTML document but with custom components instead of the native tags. Here, you can introduce custom behavior like fonts, scripts, icons, etc.