DEV Community

loading...
Cover image for How to set the HTML lang attribute in Next.js?

How to set the HTML lang attribute in Next.js?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・1 min read

Originally posted here!

To set or add the lang attribute to the html tag in Next.js, you can add the i18n object to the next.config.js file (or Next.js config file).

It can be done like this,

/* next.config.js  */
module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};
Enter fullscreen mode Exit fullscreen mode
  • the locales property in the object should have an array of locales values that you want to support in the application. This is a required property.
  • the defaultLocale property defines the default locale to be used on routing. This is a required property.

This will set the lang attribute to en in the root html tag.

It will look like this,

<html lang="en">
  <!-- Content -->
</html>
Enter fullscreen mode Exit fullscreen mode

To see all the possible locales you can use, see the ISO 639-1 Language Codes.

See the above code live in codesandbox.

NOTE: This will work on the Next.js versions 10.0.0 and up.

That's all! 😃

Feel free to share if you found this useful 😃.


Discussion (1)

Collapse
cursorsdottsx profile image
[Cursors]

thanks