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
localesvalues that you want to add support to the website. For example, you can set the value toesfor 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 - https://www.buymeacoffee.com/codewithsnowbit.
Top comments (0)