# Missing lang attribute on in Next.js
> How to fix missing lang attribute on in Next.js — with the exact fix and copy-paste code.
_Category: Web essentials · Detector `web-essentials` · Check `lang` · Severity: warning_
The `` attribute tells screen readers which pronunciation rules and voice to use, and tells search engines the content language for regional ranking. Without it, a screen reader may read English content with a French synthesizer, and translation tools guess. AI scaffolds that generate the app body rarely set the document language.
## The fix for Next.js
In the App Router you own the `` tag in the root layout — set `lang` there.
_app/layout.tsx_
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
[Next.js docs](https://nextjs.org/docs/app/api-reference/file-conventions/layout)
### Steps
1. Find where the root `` element is defined
2. Add `lang="en"` (or your primary locale)
3. For multilingual pages, tag individual sections with their own `lang`
## How VibeCheck detects it
The `web-essentials` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.
- **Issue string:** `Missing lang attribute on `
- **Threshold:** document.documentElement has no non-empty lang attribute
## FAQ
### What value should `lang` be?
A BCP-47 tag: "en" for English, "en-US" for US English, "de", "pt-BR", etc. Use the most specific tag that is accurate for your content.
### Do I need `lang` on elements other than ?
Only if part of the page is in a different language. Then add `lang` on that element so assistive tech switches pronunciation just for that region.
See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-lang-attribute.md
---
Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-lang-attribute. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt