Set Next.js lang

Set Next.js lang
Next.jsTutorial

It is advised and a good practice to define the language of a site. It's very straightforward in plain HTML, but it isn't so intuitive in Next.js. Let's see how we can do it.

Static Site Generation

In Next.js, if we want to modify the <head> we import Head from next/Head, but what if we want to pass a property to the <html> tag? Next provides an option to add another JS file – in the pages folder – called _document.js allowing us to be in control of the upper HTML.

Here is the default content of it:

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

Make sure the above _document.js is in the pages folder. We can now add the lang property on HTML <html lang="en"> and have the language defined for our website.

Server Side Rendering

If our site works with SSR, we can use another solution. In next.config.js at the root of our project, define the following i18n object:

module.exports = {
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};

Note this solution only works in Next.js version 10 and newer.

Enjoy coding with Next.js!

Please open this website with a recent browser for the best experience. Avoid Internet Explorer at all costs.