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

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

Written by Dhairya Shah on Mar 25th, 2022 ・ Views ・ Report Post

Dhairya Shah Visit User Profile

What is HTML lang Attribute?

The HTML lang attribute is used to identify the language of the content on the web and, when you've got an international audience say for example Spanish and English, it helps search engines return language-specific results for Spanish or English screen readers to provide correct pronunciation.

the lang attribute in Next.js

Here's what lang attribute looks like in HTML,

<html lang="en">
  <!-- Head and Body -->
</html>

You can't just simply set the lang attribute by changing the HTML tag in Next.js.

To set the lang attribute to the HTML tag in Next.js. We have to add the i18n object in the next.config.js.

Here's how it must be done,

module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
  reactStrictMode: true,
}

Let's understand the properties of the i18ni n above snippet,

  • locale: It is the array of the locales values that you want to add support to the website. For example, you can set the value to es for the Spanish language.
locales: ["es"]
  • defaultLocale: It defines the default locale to be used on different pages.

After updating next.config.js, restart the server. Your final source code will have the lang="en" attribute in html tag.

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

Check out the full list of Language codes

Conclusion

We hope you enjoyed our article on how to set the lang attribute. Thank you for reading!

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

We all have used dummy text at some point or another as developers - for example, "Lorem Ipsum". Recently, I've launched Let's Lorem Ipsum, an easy-to-use service that enables you to copy and paste useful dummy content into projects where required - like annoying form fields!

Let’s Lorem Ipsum - https://letsloremipsum.vercel.app/

Let’s connect

If you found my content helpful and would like to thank me for my time, feel free to Buy me a coffee - https://www.buymeacoffee.com/codewithsnowbit.

Comments (0)