¿Cómo configurar el atributo lang HTML dinámicamente en el documento NextJs?

Question 1

Tengo un sitio en varios idiomas y necesito configurar el atributo de idioma HTML según el idioma de cada página.

Intento pasar el valor en contexto, pero no se actualiza cuando cambia la página.

Aquí el código actual:

import Document, { Html, Head, Main, NextScript } from 'next/document'
import GlobalContext , {eLanguage }from '../components/GlobalContext' //my global context 

export default class MyDocument extends Document {

static async getInitialProps(ctx) {

  const initialProps = await Document.getInitialProps(ctx)
  return { ...initialProps }
}
static contextType = GlobalContext;
render() {

  console.debug('Started')
  console.debug('language:'+ this.context.language) 

  return (
    <Html lang={eLanguage[this.context.language]}> //if the first page loaded as lang 'en' it sets 'en' and apply to all other pages.
      <Head>
      </Head>
      <body>       
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

}

Actualización: el idioma de cada página se puede deducir de la ruta de la página

Question 2

Creo que la mejor solución aquí es usar un personalizado ./pages/_document.js archivar y anular el documento en sí.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Más explicación se puede encontrar aquí: https://nextjs.org/docs/advanced-features/custom-document

Question 3

Próximos 10 apoyos Enrutamiento internacionalizado y añadiré lang dejándote dinámicamente con:

<Html>
  <Head />
  <body>       
    <Main />
    <NextScript />
  </body>
</Html>

Question 4

Si utiliza siguiente/cabeza puede configurar el idioma para la etiqueta html. Todo lo que pase al componente Head se colocará en el <head> o <html>.

Next Head funciona de forma similar a React Helmet, por lo que para tu caso podrías hacer algo así:

Cree un componente e importe Head desde “next/head”
Dentro de la etiqueta Head, agregas el <html lang={lan} /> al componente.

Luego puede pasar el idioma deseado a ese componente, luego importar el componente en las páginas deseadas.

import React from "react"
import Head from "next/head"

const Language = ({title, lang}) => (
  <Head>
    <html lang={lang} />
    <title>{title}</title>
  </Head>
)

export default Language

Ese bit html se inyectará dentro del <html> etiqueta.

Tenga en cuenta que incluso si lo inyectamos así, la consola registrará el siguiente error: TypeError: n is null.

Question 5

Implementé esto agregando esto al archivo next.config.js:

i18n: {
// These are all the locales you want to support in
// your application
locales: ['en-US'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'en-US' }

No tuve la necesidad de crear un _document.js personalizado

Question 6

Las versiones de Nextjs posteriores a la 10 brindan soporte de localización predeterminado. No tiene que configurar mucho.

Agrega automáticamente el atributo lang a html, pero aún hay sin apoyo hasta ahora con v12 para el atributo dir para incluir que podemos usar este pequeño truco dentro _archivo de documento.

import { Head, Html, Main, NextScript } from "next/document";

function Document(props: any) {

  return (
    <Html dir={props.__NEXT_DATA__.locale === "en" ? "ltr" : "rtl"}>
      <Head></Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

export default Document;

El resultado final sería

Question 7

Crear _document.js en la carpeta `pages“ y usa esto:

import Document, { Head, Html, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(context) {
    const initialProps = await Document.getInitialProps(context);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

para uso de localización next.config.js

{
 i18n: {
    locales: ['en', 'fr', 'de',],
    defaultLocale: 'en',
  },
}

Question 8

Puede usar un enlace React useEffect para establecer el idioma del documento sin tener que cambiar la forma en que Next.js genera la etiqueta HTML.

Dentro de su componente de página u otro componente apropiado, incluya el gancho useEffect:

import {useEffect} from "react";

Y luego agrega el gancho:

const MyPage = () => {
  useEffect(() => {
    document.documentElement.lang = "en-us";
  });
  // The rest of your component
}

Esto pasa la verificación de Lighthouse para “hreflang”, y si su sitio tiene varios idiomas, puede usar esto para configurar el idioma de la página por página.

¿Ha sido útil esta solución?