Utility component for keeping the "lang" attribute of the document up to date with current user locale (Next.js/React)

html-lang-provider.tsx

import { useLocale } from "next-intl";
import { useEffect } from "react";

/**
 * Utility component for keeping the lang-attribute of the document up to date.
 * For Next.js, include this in e.g. custom App component.
 */
export const HtmlLangProvider = () => {
  // Using next-intl here but realistically can be anything
  const locale = useLocale();

  useEffect(() => {
    if (typeof document !== "undefined") {
      document.documentElement.lang = locale;
    }
  }, [locale]);

  return null;
};