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 i18n
i 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 toes
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!
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.