How to add lang attribute to html tag in Next.js?
Question
After running some performance check on my Next.js portfolio site I noticed that the main index.html is missing a lang attribute - which gets returned as a deduction from the accessibility score.
I can add the locale by using the i18n setup to next.config.js , but those features are incompatible with next export - the site is statically generated.
Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment
Are there any other ways to add the lang attribute?
2 answers
solution1
7 ACCPTED 2021-03-21 21:23:42
You can add the lang attribute to the <Html> tag in your custom _document .
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
solution2
0 2022-06-14 20:21:14
As alternative to @juliomalves answer, next.config.js file can also be used to define lang.
create a file called "next.config.js" in the root of your project with the below,
module.exports = {
i18n: {
locales: ["en"],
defaultLocale: "en",
},
};
ref: https://nextjs.org/docs/api-reference/next.config.js/introduction
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.