Sling Academy
Home/Next.js/Next.js: How to set HTML lang attribute

Next.js: How to set HTML lang attribute

Last updated: June 08, 2023

When building a web application, you can set the lang attribute of the <html> tag to explicitly declare the language used on your pages. For example, an app made for the Japanese market:

<html lang="ja">

Note: For English-speaking countries, replace ja with en.

This concise article will show you how to specify the lang attribute for a Next.js app. If you’re using Next.js 13+ with App Router (the /app directory), see the first section. If you prefer Pages Router (the /pages directory), see the later section.

Set HTML lang attribute with App Router (/app directory)

The place to focus on is the app/layout.js or app/layout.tsx file in your project. Look at the html tag and edit the lang attribute right there:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    // Edit html lang attribute to match your language here
    <html lang="ja">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Screenshot:

Set HTML lang attribute with Pages Router (/pages directory)

1. In the pages folder of your project, create a new file called _document.js if it doesn’t exist (or _document.ts if you’re using TypeScript). The name must be absolutely correct.

2. Add the following code to _document.js:

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

export default function Document() {
  return (
    <Html lang='ja'>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Replace ja (this is the English code) with the language code, you want. You should keep all other things unchanged. The <Html>, <Head/>, <Main/>, and <NextScript /> components are required for the page to be properly rendered.

File structure:

3. Now boot your app up and use Chrome DevTools to check the result:

That’s it. If you find something missing or outdated, please comment. We are happy to hear from you.

Next Article: How to Add Google Analytics to Your Next.js App

Series: Next.js: Configuration & Deployment

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported