How to fix html lang on Next.js

Steps for Next.js

1. If using the App Router (Next.js 13+), open app/layout.tsx (or app/layout.jsx) and add the lang prop to the <html> element: <html lang="en">.
2. If using the Pages Router, open pages/_document.js and set <Html lang="en"> (using Next.js's built-in Html component).
3. For internationalized routing, configure i18n in next.config.js and Next.js will automatically pass the detected locale; bind it: <html lang={params.lang}> using the dynamic segment.

What is html lang?

Every web page starts with an opening `<html>` tag. Adding a `lang` attribute to it — for example, `<html lang="en">` for English — tells browsers, screen readers, and search engines what human language the page is written in. It is a one-line change in your theme or template, and it is one of the most foundational requirements of modern web standards. The value uses a standard two-letter (or extended) language code such as `en`, `fr`, `de`, `es`, `ja`, or `zh-Hans`.

Screen readers used by visually impaired shoppers rely on the `lang` attribute to choose the correct pronunciation engine — without it, your content may be read aloud in the wrong language, making your store inaccessible. Accessibility laws in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada) treat a missing `lang` attribute as a conformance failure, creating real legal exposure. Search engines also use this signal to understand which market a page targets, which influences how and where your pages appear in regional search results. Fixing it is a quick win that simultaneously reduces legal risk, improves usability for millions of shoppers with disabilities, and reinforces your international SEO targeting.

See the complete Html lang guide for every platform and the full background.