- Create HtmlLang client component that updates document.documentElement.lang - Add HtmlLang component to layout.tsx to sync HTML lang attribute with locale - HTML lang now updates automatically when user changes language
19 lines
501 B
TypeScript
19 lines
501 B
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useLanguage } from "../hooks/useLanguage";
|
|
|
|
/**
|
|
* Client component that updates the HTML lang attribute based on the selected language.
|
|
* This must be a client component because it uses hooks and DOM manipulation.
|
|
*/
|
|
export function HtmlLang() {
|
|
const { locale } = useLanguage();
|
|
|
|
useEffect(() => {
|
|
// Update the HTML lang attribute when locale changes
|
|
document.documentElement.lang = locale;
|
|
}, [locale]);
|
|
|
|
return null;
|
|
}
|