Skip to content

_document.tsx missing

What this means

In the Next.js Pages Router, pages/_document.tsx lets you customise the <Html>, <Head>, <Main>, and <NextScript> elements that Next.js renders for every page. The most common reason to create one is to set the lang attribute on the <html> element, which cannot be done from _app.tsx or individual page files.

Without a _document.tsx, your pages have no lang attribute, which affects accessibility and language detection.

How to fix it

Create pages/_document.tsx with the lang attribute set on <Html>.

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

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

You can also add global scripts or font preloads here:

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

export default function Document() {
  return (
    <Html lang="en-GB">
      <Head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Verify the fix

curl -s https://example.com | grep -i '<html'

You should see lang="en-GB" on the <html> element. Re-run the audit:

npx orino audit .