Adding a lang attribute to your Next.js site

Sometimes when you’re running a Lighthouse performance check on your sites, you might come across the issue:

<html> element does not have a [lang] attribute

Luckily, this is a pretty easy thing to fix, whether you’re using Next.js, or pl…

Sometimes when you’re running a Lighthouse performance check on your sites, you might come across the issue:

<html> element does not have a [lang] attribute

Luckily, this is a pretty easy thing to fix, whether you’re using Next.js, or plain ol’ HTML!



Why do I need this?

It’s for accessibility! Screen readers often use a different sound library for each language they support. They can easily switch between those sound libraries, but only when a webpage specifies which language to use.

Typically in your average Next.js website, the deployed page ships only a <html> wrapped site, with no language attribute attached.

If you were writing a plain HTML website (or using some other library that allows you to update the shipped HTML files), it would be a simple matter of adding a lang="en" to your outputted HTML, like so:

<html lang="en">

With Next.js, it’s a little bit more involved, but luckily not too difficult!



Create a Custom Document

Inside of your pages/ directory (or wherever you put your page components), make a file called _document.js. This overrides the default document that is shipped with your Next.js site. Don’t worry though, we won’t break anything!

Inside of that file, add the following:

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

export default function Document() {
  return (
    <Html lang="en"> {/* Add whichever language you want here */}
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Boom, you’re done! Make sure you don’t delete the Html, Head, Main, and NextScript components, because they are required for your site to be properly rendered. Now, next time you run your performance and accessibility audits, your language settings should be in the clear!


Print Share Comment Cite Upload Translate
APA
Cassidy Williams | Sciencx (2024-03-29T06:36:53+00:00) » Adding a lang attribute to your Next.js site. Retrieved from https://www.scien.cx/2022/02/08/adding-a-lang-attribute-to-your-next-js-site/.
MLA
" » Adding a lang attribute to your Next.js site." Cassidy Williams | Sciencx - Tuesday February 8, 2022, https://www.scien.cx/2022/02/08/adding-a-lang-attribute-to-your-next-js-site/
HARVARD
Cassidy Williams | Sciencx Tuesday February 8, 2022 » Adding a lang attribute to your Next.js site., viewed 2024-03-29T06:36:53+00:00,<https://www.scien.cx/2022/02/08/adding-a-lang-attribute-to-your-next-js-site/>
VANCOUVER
Cassidy Williams | Sciencx - » Adding a lang attribute to your Next.js site. [Internet]. [Accessed 2024-03-29T06:36:53+00:00]. Available from: https://www.scien.cx/2022/02/08/adding-a-lang-attribute-to-your-next-js-site/
CHICAGO
" » Adding a lang attribute to your Next.js site." Cassidy Williams | Sciencx - Accessed 2024-03-29T06:36:53+00:00. https://www.scien.cx/2022/02/08/adding-a-lang-attribute-to-your-next-js-site/
IEEE
" » Adding a lang attribute to your Next.js site." Cassidy Williams | Sciencx [Online]. Available: https://www.scien.cx/2022/02/08/adding-a-lang-attribute-to-your-next-js-site/. [Accessed: 2024-03-29T06:36:53+00:00]
rf:citation
» Adding a lang attribute to your Next.js site | Cassidy Williams | Sciencx | https://www.scien.cx/2022/02/08/adding-a-lang-attribute-to-your-next-js-site/ | 2024-03-29T06:36:53+00:00
https://github.com/addpipe/simple-recorderjs-demo