GDevTown

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 puedes editar este post en github. 😊

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';

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! 😄

Saludos!

📝 Editar en GitHub

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

Todos estos artículos están disponibles en DEV Community.