DEV Community

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

Posted on • Originally published at


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

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 -->
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 😃.

Top comments (1)

kelsny profile image


An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.