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?

user_1870780 · Answer

You can add the lang attribute to the tag in your custom _document.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      
        
        
          
          
        
      
    )
  }
}

export default MyDocument

user_139799 · Answer

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

How to add lang attribute to html tag in Next.js?

2 Answers