No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Extendiendo el Document

12/27
Recursos

Aportes 22

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Advertencias sobre extender el Document:

  • Ya que el Document se renderiza en servidor, los eventos como onClick no funcionar谩n.
  • Los componentes de React fuera de <Main /> no ser谩n inicializados por el navegador. No a帽adir l贸gica de la aplicaci贸n aqu铆 o CSS personalizado (como styled-jsx). Si necesita componentes compartidos en todas sus p谩ginas (como un men煤 o una barra de herramientas).
  • getInitialPropsfunci贸n de Document no se llama durante las transiciones del lado del cliente, ni cuando una p谩gina est谩 optimizada est谩ticamente.

Documentaci贸n de Custom Document:
https://nextjs.org/docs/advanced-features/custom-document

Se usa para hacer modificaciones a todas las paginas, como por ejemplo:

  • Favicon personalizado
  • Fuentes personalizadas
  • Estilos / Scripts de librerias externas
  • Meta tags
  • Cualquier otra cosa que puedas agregar en el <head> de HTML

Aqu铆 esta el archivo _document.js

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>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Por favor no importen jQuery en el _document.tsx 馃槀

馃寪 Extendiendo el document de Next.js

<h4>Ideas/conceptos claves</h4>

document.- Archivo principal de nuestra pagina donde los cambios se pueden aplicar a una escala global

documentation de Next.js custom document:

Advanced Features: Custom Document | Next.js

<h4>Apuntes</h4>

La estructura de nuestro proyecto suele ser

  • Nuestra Aplicaci贸n
    • Document
      • App

Normalmente solemos editar los primeros dos items

Para poder editarlo creamos un archivo en pages llamado 鈥淿document.js鈥 para usar un template definido podemos ir a la documentation de Next.js para un custom document

El c贸digo quedar铆a de la siguiente manera

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

class MyDocument extends Document {
  // Cosas que podemos hacer desde el server
	static async getInitialProps(ctx) {
    // todos los cambios aplican para todas las paginas
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
		return (
      <Html>
        <Head>
          {/* lo modificamos para */}
          {/* favicon */}
          {/* webfonts personalizadas */}
          {/* stylesheet externos */}
          {/* script/js externos */}
        </Head>
        {/* No es muy comun editar adentro del body */}
        {/* pero se puede usar para agregar una clase */}
        <body className="my-body-class">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

De esta forma modificamos y customizar el document del HTML para hacer cosas personalizable de forma visible que no podemos hacer con Next.js

RESUMEN: En esta clase podemos observar que para editar directamente el document debemos crear una pagina en pages, con el nombre de 鈥淿document.js鈥 y usar como template el cod铆go de la documentaci贸n

En 2022 el _document se hace con funci贸n y no con clase, as铆 dice la documentaci贸n :

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Toda la clase pasada y parte de esta estuve sufriendo por que no me funcionaba absolutamente nada, y no me hab铆a dado cuenta que aqui no se usa 鈥榥pm run start鈥 si no 鈥榥pm run dev鈥, pr谩cticamente no me compilaba nada desde el inicio xD

Es decir que yo podria extender el _document.tsx para agregar los scripts para Google Analytics?

Me parece fant谩stico este curso introductorio. Pero creo que es momento de actualizarlo o hacer uno nuevo. Dadas las 煤ltimas actualizaciones/features introducidas recientemente.

Como as铆 tambi茅n alguno m谩s avanzado. Dado su extenso uso en la industria鈥

Hasta ahora me parece genial todo lo que hace Next.js
Lo 煤nico con lo que estoy peleando es que vengo de siempre iniciar los proyectos con npm run start, al punto que hasta lo hago por inercia.
Y ahora tengo que usar npm run dev 馃槄

Extendiendo el Document

Les recomiendo descargar una extensi贸n de NextJS para tener snippets, as铆 no tienen que buscar el template en internet 馃槂


En toda app de React existe el 鈥楢pp鈥 pero dentro de NextJS existe el 鈥楧ocument鈥.

Documentaci贸n de Custom Element

Creamos un archivo llamado _document.tsx:

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

class MyDocument extends Document {

  render() {
    return (
      <Html>
        <Head>
          { /*favicon*/ }
          { /*Webfont*/ }
          { /*Estilos externos */ }
          { /*Scripts externos */ }
        </Head>
        <body className="my-body-class">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Aqu铆 tienen unos ejemplos de NextJs por si necesitan configurar styled components o alguna otra cosa pueden echarle un vistazo.
Link

Hasta aqu铆 llego yo con este curso, es muy aburridor tener que estar usando el repositorio porque no explican los cambios necesarios para pasar de una clase a otra. As铆, 驴c贸mo voy a hacer un proyecto aparte desde cero?

Actualmente la documentacion recomienda para typescript lo siguiente:

https://nextjs.org/docs/basic-features/typescript#custom-app

import Document, { DocumentContext, DocumentInitialProps } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }
}

export default MyDocument

Nunca nadie me dijo que Js era extremooooo

Mejorando la estructura de Nuestra Aplicaci贸n

/
Por defecto Next.js no a帽ade la etiqueta html y la etiqueta body por s铆 mismo, esto hace que la calidad de nuestro SEO baje. Por ende. Tenemos que aumentar esas etiquetas nosotros mismos.
/
Para lograrlo debemos de hacer lo siguiente:
/

  1. Primero. Dentro de la carpeta de la p谩gina. Debemos crear un nuevo archivo que debe ser _document.js.
    /

    /
  2. A continuaci贸n. Debemos a帽adir el siguiente c贸digo:
    /
import Document, { Html, Head, Main, NextScript } from 'next/document'

// Por ahora. Esta parte del c贸digo es opcional. Ya que no la necesitamos todav铆a.

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

// Esto es lo que realmente necesitamos para aumentar.

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

/
Al hacer esto, tanto la etiqueta html como la etiqueta body, se a帽adir谩n al c贸digo fuente de nuestra aplicaci贸n, lo que a su vez, mejorar谩 el SEO de la misma.

Osea que con esto ya no tendr铆amos que configura esos cambios desde webpack?

para agregar title deben de importar el componente head:
import Head from 'next/head鈥
luego lo usan uno a uno en cada pag

Entonces en ese head podr铆amos agregas las etiquetas meta para SEO?

Para todos aquellos que tengan problemas de compatibilidad con las dependencias del proyecto luego de realizar el fetch al repositorio y no sean capaces de instalar las nuevas dependencias, ya sea con yarn o con npm. Recomiendo instalar 鈥渘vm鈥 para controlar las versiones de node que ejecutamos ya que este curso es de hace 2 a帽os y las dependencias ya se han actualizado bastante (estoy escribiendo en enero del 2023)

Para instalar nvm, si estas en Windows sigue los pasos que estan aqui, si estas en mac o linux ya lo sabras hacer mejor que yo.

Una vez instalado nvm, ejecuta el comando > nvm --version para comprobar que se instalo correctamente

Luego tendremos que instalar una version de node compatible con la del curso:

nvm install [email protected]16.0.0   

a continuacion el comando

nvm on  

y seguido le tendremos que especificar que version de node queremos utilizar, para eso ejecutamos:

nvm use 16.0.0 

comprobamos nuestra version de node actual con > node --version y debera ser la misma que hemos decidido utilizar con nvm

Ya podemos seguir ejecutando los comando al igual que en el curso

Tuve que hacer una adaptaci贸n de lo que est谩 en la p谩gina oficial:


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

class MyDocument extends Document {
    static async getInitialProps(
        ctx: DocumentContext
    ): Promise<DocumentInitialProps> {
        const initialProps = await Document.getInitialProps(ctx)

        return initialProps
    }
    render(){
        return (
            <Html>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

01/09/2022
pages/_document.js:

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}