Helmen Design

Back to blog

Lang attribute on your Next.js site

Cover Image for Lang attribute on your Next.js site

The lang attribute is used to define the language in the HTML document. This helps the browser and especially screen readers specify the language for the page. Screen readers can switch between languages but only if the lang attribute is defined.

If you were creating a standard HTML website you can define the language at the top of the page like this:

<html lang="en-GB">

Here we set the language for this page to English (UK).

Setting lang attribute with custom Document component

We can create a new file called _document.tsx in the /pages folder in our Next.js project. This will override the default document that ships with the Next.js site.

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

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

With this file in the project we can configure amount others things the lang attribute. We are importing other components in this file as well and these are used by Next.js to correctly render the app. So remember to include them!

That’s it! More points to us for accessibility and a better user experience.

Back to blog