DEV Community

Franco Andrés
Franco Andrés

Posted on • Updated on • Originally published at gdevtown.netlify.app

Cómo aplicar el "html lang" en next.js

En este post súper breve te voy a enseñar cómo agregar el <html lang=""> en nuestro proyecto en next.js.
Nosé si existe otra manera ya que no tengo mucha experiencia en next, si conoces otra manera déjalo en los comentarios. 😊

En next.js hay una carpeta llamada "pages" que por ejemplo puede contener los siguientes archivos:

  • _app.js
  • index.js

Aquí nosotros agregaremos un nuevo archivo llamado _document.js.

Es importante que tenga el _ al principio.


En este archivo importamos lo siguiente:

import Document, { Head, Html, Main, NextScript } from 'next/document';
Enter fullscreen mode Exit fullscreen mode

Ahora agregamos el siguiente código:

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

class MyDocument extends Document {
  render() {
    return (
      // Agregamos el idioma que deseemos, aquí por ejemplo español.
      <Html lang="es"> 
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
Enter fullscreen mode Exit fullscreen mode

Luego de agregar esto debes reiniciar el servidor local para que se agreguen los cambios.
Y listo eso es todo, todas las etiquetas que se encuentran en la función son necesarias para que funcione correctamente.

Más información sobre next/document en la documentación oficial: Custom Document.


Espero que este súper súper súper breve post te sea de ayuda! 😄

Me puedes encontrar en Twitter.

Saludos!

Top comments (5)

Collapse
 
ivanosquis10 profile image
ivanosquis10

Buena explicación, no hay otra forma de agregarlo que no sea con el _document?

Collapse
 
franqsanz profile image
Franco Andrés

Hola, gracias! Te soy sincero hace mucho que no estoy trabajando con next.js asi que no sabría decirte si hay otra manera, tal vez sí, pero la verdad no lo se.

Collapse
 
hugok2k profile image
Hugok2k

Gracias genio! justo estaba buscando esta info para tener 100 en Google Lighthouse, estamos en la versión 13 de Next y aun se usa el _document.

Saludos!

Collapse
 
franqsanz profile image
Franco Andrés

De nada! Me alegro de que te haya servido. Saludos!

Collapse
 
awwsmm profile image
Andrew (he/him)

Muchas gracias! Exactly what I was looking for