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.jsindex.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';
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;
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)
Buena explicación, no hay otra forma de agregarlo que no sea con el _document?
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.
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!
De nada! Me alegro de que te haya servido. Saludos!
Muchas gracias! Exactly what I was looking for