Dynamic HTML lang attribute Next@9.4 with functional component

Before next@10 next did not had any built-in support for internationalized routing.

I used next-translate/useTranslation. But the problem I am facing now is that I cannot achieve to set the lang attribute.

The only option I've found to set the attribut lang in next@9.4 using functional component is document.documentElement.lang = lang which is not a good practice for SEO.

Any other way I could use to set dynamically the lang of my HTML page ?

This is how my code is :

   /pages
       - index.js 
       - /[lang]
             - index.js

/pages/index.js

import { useEffect } from 'react'
import Router from 'next/router'

import i18nConfig from '../i18n.json'

const { defaultLanguage } = i18nConfig

export default function Index() {
  useEffect(() => {
    Router.replace(`/${defaultLanguage}`)
  }, [])

  return null
}

/[lang]/index.js

import useTranslation from 'next-translate/useTranslation'
import { getI18nProps, getI18nPaths, withI18n } from '../../utils/i18n'

...

export function MainIndex() {
    const { t, lang } = useTranslation()

    ...

    useEffect(() => {
        document.documentElement.lang = lang
    })

    ...
}

...

export default withI18n(MainIndex)

from Dynamic HTML lang attribute Next@9.4 with functional component