Subscribe

NextJS add lang attribute to HTML tag

✍️

How can we add a lang attribute to a Next.JS website

29 May, 2022 Β· 2 min read

When working on accessibility, a common issue you might come across is that your HTML tag doesn't have a lang attribute.

The lang attribute tells the user which language the page is written in.

Some examples of valid lang attributes are:

<!-- French content -->
<html lang="fr"></html>

Note: Find all languages codes here.

We can also extend the use-case to define specific versions of a language, for instance, British English.

<html lang="en-gb"></html>

Adding this lang tag to Next.js

In any regular plain HTML website, we would add this tag to the HTML element. However, in the case of Next.js, we don't have direct access to it.

So to add this tag, we need to use the next.config.js file.

module.exports = {
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
};

If your website supports multiple languages, you can even put various values in the locales array.

The default locales are then used to set the current one.

You can even use this config to set up custom domains, but we might dive into that separately.

Alternative method

There is an alternative way of adding a custom HTML tag if you want to override multiple HTML properties.

Inside your pages directory, you can add a _document.js file.

This page will override the default Next.js document. Inside of it, add the following structure, and you are good to go.

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

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

And that's it, two different ways of adding the lang tag in Next.js. I like to use the config way as it's a bit cleaner and future-proof.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

NextJS and TypeScript

3 Mar, 2022 Β· 3 min read

NextJS and TypeScript

Adding code highlighting to markdown code blocks

3 Feb, 2022 Β· 3 min read

Adding code highlighting to markdown code blocks

Join 1509 devs and subscribe to my newsletter