When working on accessibility, a common issue you might come across is that your HTML tag doesn't have a lang attribute.
The lang attribute tells the user which language the page is written in.
Some examples of valid lang attributes are:
<!-- French content -->
<html lang="fr"></html>
Note: Find all languages codes here.
We can also extend the use-case to define specific versions of a language, for instance, British English.
<html lang="en-gb"></html>
Adding this lang tag to Next.js
In any regular plain HTML website, we would add this tag to the HTML element. However, in the case of Next.js, we don't have direct access to it.
So to add this tag, we need to use the next.config.js file.
module.exports = {
i18n: {
locales: ['en'],
defaultLocale: 'en',
},
};
If your website supports multiple languages, you can even put various values in the locales array.
The default locales are then used to set the current one.
You can even use this config to set up custom domains, but we might dive into that separately.
Alternative method
There is an alternative way of adding a custom HTML tag if you want to override multiple HTML properties.
Inside your pages directory, you can add a _document.js file.
This page will override the default Next.js document. Inside of it, add the following structure, and you are good to go.
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang='en'>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
And that's it, two different ways of adding the lang tag in Next.js. I like to use the config way as it's a bit cleaner and future-proof.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter