DEV Community

Cover image for NextJS add lang attribute to HTML tag
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

NextJS add lang attribute to HTML tag

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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',
  },
};
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (7)

Collapse
maxfindel profile image
Max F. Findel

Thanks for sharing this. Do you know about the best practices for language toggles and selects in the realm of a11y?

Collapse
vhs profile image
vhs

Make them discoverable by placing them in the header or footer with each language labeled twice: once in the current locale and again in the original format. Look here for accessible select menus and at Headless UI for guardrails. Finally, Jacob Neilson has some pointed advice worth consuming.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Hi Max,

I haven't gotten that far in to tell you in detail, but perhaps @inhuofficial or @abbeyperini can shed some light on this?

Collapse
abbeyperini profile image
Abbey Perini

Hey! I haven't built a language select, only written some i18next code, but there are some good resources out there:

Looks like one of the main gotchas is you should only use flags if you're having the user select countries - many languages are spoken in multiple countries and many countries have multiple languages spoken within their borders. Otherwise, making the component accessible depends on the HTML element you choose to use.

Thread Thread
maxfindel profile image
Max F. Findel

Oh wow, thanks for all the resources! I'm gonna look into i18next ๐Ÿ‘
I totally agree with the flags vs languages. I prefer to use the ISO abbreviations :)

Collapse
vhs profile image
vhs

HTTP has a standardized header for communicating the user's preferred language to the web server. If Next.js doesn't already do it for you, you can use this npm module server-side to get the preferences.

Collapse
vhs profile image
vhs

Language subtags are registered with IANA. You can scrape the latest versions from this endpoint.