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

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",
  },
};

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>

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

See the above code live in codesandbox.

That's all! 😃