DEV Community

loading...

Como aplicar el "html lang" en next.js

franqsanz profile image Franco Andrés Originally published at gdevtown.netlify.app ・1 min read

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!

Discussion (0)

pic
Editor guide