Extendiendo el Document

Curso de Next.js

Lo básico

Construir una web app con React no es fácil

Nuestro proyecto y lo que necesitaremos

Instalando NextJS

Routing

Rutas básicas

Rutas dinámicas

#UnderTheHood setup y páginas: optimizaciones ocultas

#UnderTheHood páginas: pre rendering de páginas

Enlazando páginas

#UnderTheHood enlazando páginas: prefetching automático

API y Debugging

¿Cómo crear API con NextJS?

Creando y consumiendo nuestra propia API

Extendiendo NextJS

Extendiendo el Document

Extendiendo el App

Path alias

Explora las soluciones de CSS en NextJS y su flexibilidad

Finalizando las páginas

Deployment en Vercel

Utilizando Vercel para hacer Deploy

Data Fetching y Pre-rendering

Introducción a los pre-render modes

#UnderTheHood Server Side Rendering: getServerSideProps

#UnderTheHood Static Generation: getStaticProps

#UnderTheHood Static Dynamic Static Generation: getStaticPaths

Deployment

Otras formas de hacer deploy de una app NextJS

Midiendo Performance

Mide Performance en NextJS

El futuro de NextJS

¿Qué será de NextJS en los próximos años?

Conclusiones

Continúa con el Curso de Next.js: Sitios Estáticos y Jamstack

Bonus Next.js 10

Next.js Image

Link y Proxy

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 22

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Gregory Hernandez Abad

hace 3 años

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.

Eli José Carrasquero

hace 3 años

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

Jaime David Burbano Montoya

hace 3 años

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

Stiven Castillo Montero

hace 3 años

Por favor no importen jQuery en el _document.tsx 😂

Fernando Quinteros Gutierrez

hace 2 años

🌐 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

Baltazar Andersson

hace 10 meses

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>
  )
}

Mauricio Moreno Morales

hace 2 años

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 ‘npm run start’ si no ‘npm run dev’, prácticamente no me compilaba nada desde el inicio xD

Juan Bedoya

hace 2 años

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

Mariano DAngelo

hace 9 meses

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…

Sergio Estrella

Profe Platzi

hace 2 años

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 😅

Miguel Ángel Reyes Moreno

hace 2 años

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 ‘App’ pero dentro de NextJS existe el ‘Document’.

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

Geovanny Álvarez

hace 2 años

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

Edwin Torres

hace 4 meses

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?

Juan Sebastian Torchia

hace 6 meses

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

Brian Sánchez Izquierdo

hace un año

Nunca nadie me dijo que Js era extremooooo

Paolo Carrion

hace un año

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:
/

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

/
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.

Beto Toro

hace 2 años

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

Luis Gerardo López Hernández

hace 2 años

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

Juan Esteban Galvis

hace 2 años

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

Ahmed Gonzalez

hace 2 meses

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 “nvm” 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

Eduardo Rodriguez Cisneros

hace 6 meses

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

Juan Camilo Lentino Villalba

hace 7 meses

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>
  )
}