title: Dynamic HTML lang attribute Next@9.4 with functional component
body: <p>Before next@10, next did not have any built-in support for internationalized routing.</p>
  <p>I used <a href="https://github.com/vinissimus/next-translate#usetranslation" rel="nofollow noreferrer">next-translate/useTranslation</a>. But the problem I am facing now is that I'm unable to set the <code>lang</code> attribute.</p>
  <p>The only option I've found to set the attribute lang in next@9.4 using a functional component is <code>document.documentElement.lang = lang</code> which is not a good practice for SEO.</p>
  <p>Is there any other way I could use to set the lang of my HTML page dynamically?</p>
  <p>This is how my code is :</p>
  <pre><code>   /pages
         - index.js 
         - /[lang]
               - index.js
  </code></pre>
  <p><strong>/pages/index.js</strong></p>
  <pre><code>import { useEffect } from 'react'
  import Router from 'next/router'
  
  import i18nConfig from '../i18n.json'
  
  const { defaultLanguage } = i18nConfig
  
  export default function Index() {
    useEffect(() =&gt; {
      Router.replace(`/${defaultLanguage}`)
    }, [])
  
    return null
  }
  
  </code></pre>
  <p><strong>/[lang]/index.js</strong></p>
  <pre><code>import useTranslation from 'next-translate/useTranslation'
  import { getI18nProps, getI18nPaths, withI18n } from '../../utils/i18n'
  
  ...
  
  export function MainIndex() {
      const { t, lang } = useTranslation()
  
      ...
  
      useEffect(() =&gt; {
          document.documentElement.lang = lang
      })
  
      ...
  }
  
  ...
  
  export default withI18n(MainIndex)
  
  </code></pre>
  <p>In case it's needed this is my config file.</p>
  <p><strong>i18n.json</strong></p>
  <pre><code>{
    &quot;allLanguages&quot;: [
      &quot;fr&quot;,
      &quot;en&quot;
    ],
    &quot;defaultLanguage&quot;: &quot;fr&quot;,
    &quot;redirectToDefaultLang&quot;: false
  }
  </code></pre>
  <p>In <a href="https://github.com/vinissimus/next-translate#i18nprovider" rel="nofollow noreferrer">the documentation</a> they also talk about <code>I18nProvider</code> to set the lang attribut, but it does not work. No error and no lang attribut set in the document if I use :</p>
  <pre><code>&lt;I18nProvider lang={lang}&gt;
        ...
  &lt;/I18nProvider&gt;
  </code></pre>