Curso de Next.js

Curso de Next.js

Instruido por:
Jonathan Alvarez
Jonathan Alvarez
Básico
4 horas de contenido
Ver la ruta de aprendizaje
Platzi-Avo
Proyecto del curso
Platzi-Avo

Haciendo uso de las capacidades de API de Next.js, crearemos tres endpoints para obtener información sobre nuestros queridos aguacates y posteriormente haciendo uso de React con TypeScript, Styled JSX, y mucho CSS (El CSS de la forma que quieras), para renderizar la información y hacerla interactiva. Las páginas y el SPA (Single Page Application) lo crearemos también con Next.js y miraremos #UnderTheHood para exprimir las capacidades de este framework.

Curso de Next.js

Curso de Next.js

Progreso del curso:0/27contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/27contenidos(0%)

Lo básico

Material Thumbnail

Construir una web app con React no es fácil

05:41 min

Material Thumbnail

Nuestro proyecto y lo que necesitaremos

02:00 min

Material Thumbnail

Instalando NextJS

07:26 min

Routing

Material Thumbnail

#UnderTheHood setup y páginas: optimizaciones ocultas

05:38 min

Material Thumbnail

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

03:49 min

Material Thumbnail

Enlazando páginas

07:47 min

Material Thumbnail

#UnderTheHood enlazando páginas: prefetching automático

03:37 min

API y Debugging

Material Thumbnail

¿Cómo crear API con NextJS?

18:22 min

Material Thumbnail

Creando y consumiendo nuestra propia API

18:31 min

Extendiendo NextJS

Material Thumbnail

Extendiendo el Document

10:26 min

Material Thumbnail

Extendiendo el App

10:45 min

Material Thumbnail

Explora las soluciones de CSS en NextJS y su flexibilidad

13:26 min

Material Thumbnail

Finalizando las páginas

09:34 min

Deployment en Vercel

Material Thumbnail

Utilizando Vercel para hacer Deploy

04:58 min

Data Fetching y Pre-rendering

Material Thumbnail

Introducción a los pre-render modes

01:42 min

Material Thumbnail

#UnderTheHood Server Side Rendering: getServerSideProps

14:35 min

Material Thumbnail

#UnderTheHood Static Generation: getStaticProps

05:43 min

Material Thumbnail

#UnderTheHood Static Dynamic Static Generation: getStaticPaths

16:24 min

Deployment

Material Thumbnail

Otras formas de hacer deploy de una app NextJS

07:19 min

Midiendo Performance

Material Thumbnail

Mide Performance en NextJS

06:16 min

El futuro de NextJS

Material Thumbnail

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

05:23 min

Conclusiones

Bonus Next.js 10

nuevosmás votadossin responder
niulwinrios87
niulwinrios87
Estudiante

Puedes hablar sobre las zonas en next.js porfa lo he buscado por todos lados pero no lo comprendo muy bien.

0
Shirley Silvana Suarez Startary
Shirley Silvana Suarez Startary
Estudiante

¿De donde sale TProduct?

3
guerrerorodrigo14
guerrerorodrigo14
Estudiante

si nextJS ya maneja el routing, ya no será necesario implementar react-router en nuestra aplicación y son similares estas dos tecnologías ??

1
Carlos Restrepo
Carlos Restrepo
Estudiante

Una duda que me queda después de entender el “Static Generation” es: si la API cambia, entonces se debe hacer Build del proyecto de nuevo? Lo que entiendo es que si la API cambia y no se hace de nuevo Build y deploy, va a seguir mostrando el contenido generado estáticamente sobre el anterior llamado a la API, es decir, los datos viejos… Si esto es así, esta opción sería conveniente usarla en los casos donde se hacen consultas a APIs que cambian poco o casi nada?

0
David Daniel Castillo Nava
David Daniel Castillo Nava
Estudiante

Disculpe profesor pero en cada actualización que usted hace entre los tags, esta realizando cambios en ciertos archivos y no explica nada de los mismos, como el archivo “cors-middleware” y los cambios que realizo en los archivos de de api. Pienso que si hace cambios debe por lo menso tomar el tiempo de explicar para que es cada cosa.

2
Diego Pedroza
Diego Pedroza
Estudiante

En React puedes usar portales asignándoles los ids a otros divs que no sea el main y asi trabajar bien con los z-index como modales, con Next.js ¿como seria en este caso?.
Se agregaría un div con el id el documento extendido?

esto sería en react:

html:

<divid="modal"></div>
<divid="main"></div>

app.js

import ReactDOM from'react-dom';

const App = () => {
  return (
    <divclassName="App">
            {ReactDOM.createPortal(<h1>Modal, esta fuera del div main</h1>, document.getElementById('modal'))}
            <headerclassName="App-header">
               ....
           </header></div>
  );
}

exportdefault App;
2
Oscar Javier Vargas Díaz
Oscar Javier Vargas Díaz
Estudiante

Saludos, vercel gratis srive para apps con conexiones con mongo con objetivo comercial?

0
Renzo Giancarlo Rios Rugel
Renzo Giancarlo Rios Rugel
Estudiante

alguien tiene alguna referencia como puedo desplegar mi app si estoy haciendola con ssr?

1
Sergio Estrella
Sergio Estrella
Estudiante

Se podría tener más de un Layout?
Por ejemplo, tener un Layout que se repita en la mayoría de páginas, pero no en todas. Entonces tendría la oportunidad de poder definir qué Layout utilizar?

1
Daniel Hernan
Daniel Hernan
Estudiante
Voy en ese video, los códigos fuentes los liberan más adelante?
0