Curso Práctico de Next.js
Curso Práctico de Next.js

Configuración de un proyecto en Next

1

Cómo migrar apps de React a Next.js

2

¿Qué es Next.js?

3

Primeros pasos en Next.js

4

ESLint, Prettier y JSConfig con Next.js

5

next.config.js

Migración de React.js a Next.js

6

Estructura de carpetas: de React.js a Next.js

7

Alias y comunicación entre archivos

8

Estilos del Header

9

React Context en el Header

10

next/image: assets en Next.js

11

Lista de productos

12

Páginas en Next.js

13

next/link: enlaces en Next.js

Despliegue a producción

14

next/head: SEO en Next.js

15

Google Analytics con Next.js

16

Preparando la app para el deploy a producción

17

next/script

18

Corrección de bugs

19

Deployment en Vercel

20

Progressive Web Apps con Next.js 12

Próximos pasos

21

Performace: SSR vs. SSG

22

Toma el Curso Profesional de Next.js

Curso Práctico de Next.js

Curso Práctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

¿Qué es Next.js?

2/22
Recursos

Aportes 8

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Oscar Rabadan Martinez

Oscar Rabadan Martinez

hace 4 meses

Next.js es un marco de desarrollo de código abierto construido sobre Node.js que permite funcionalidades de aplicaciones web basadas en React, como la representación del lado del servidor y la generación de sitios web estáticos.

Características principales de Next.js:

  • Facilidad para aprender
  • Optimizado para SEO
  • Posibilidad de combinar páginas estáticas junto a páginas dinámicas
  • Compatibilidad con todos los recursos de React

En este curso se utilizará la versión 12 de Next.js (última hasta la fecha) y React 18. Se llevará a cabo la optimización del anterior proyecto realizado con webpack.

Fernando Quinteros Gutierrez

Fernando Quinteros Gutierrez

hace 4 meses

👨‍💻 ¿En qué consiste el Server Side Render?

Para poder entender que es el Server Side Render, debemos entender como funcionan las aplicaciones React.js “normales”. Comunmente estas tienen un proceso para llegar al cliente y es el siguiente:

  1. Petición del sitio (Cuando el usuario llama al url de nuestro website)
  2. El servidor web como respuesta le manda un HTML inicial 💌
  3. El navegador recibe el HTML y lo comienza a leer línea por línea 👀, comúnmente tiene esta forma
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./app.js"></script>
</body>
</html>
  4. Llega a la etiqueta script, descarga en el navegador el archivo JS y comienza la magia de React.js ✨
  5. Toda la aplicación está dentro el div #root y el usuario ya puede ver e interactuar con el sitio

Pero esto tiene 2 desventajas grandes:

  1. SEO y rendimiento
    El buscador de google entra y revisa la primera respuesta, y solo encontrará el div vació, pero no te preocupes, ya que el mismo está entrenado para leer tu sitio, solo que lo hace más lento porque debe esperar a que el JS del script termine de cargar.
    Suponiendo que tienes miles y miles de páginas y únicamente 5 minutos para ser inspeccionado por el buscador. Tristemente, no todas las páginas serán leídas.
  2. **Experiencia de usuario **
    Supongamos que tienes un usuario que está con su celular en medio de la nada y apenas tiene internet, entonces el mismo tendrá que esperar a que el sitio le mande el HTML, Encuentre el Script, descargue el mismo y lo renderice. Esto tomará mucho tiempo y quizás ya se abra ido a un sitio que cargue más rápido.

💪 La solución

Para poder mejorar existen muchas estrategias, una de ellas es el Server Side Render, la principal diferencia está en el flujo el cual cambia a este:

  1. Petición del sitio (Cuando el usuario llama al url de nuestro website)
  2. El servidor web mediante una funcionalidad de React pre renderiza la aplicación, es decir sacar el HTML de los archivos React y lo pega a la futura respuesta del HTML
  3. El servidor web como respuesta le manda un HTML inicial 💌
  4. El navegador recibe el HTML y lo comienza a leer línea por línea 👀, y tendrá esta forma en este caso
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </div>
  <script src="./app.js"></script>
</body>
</html>
  5. El usuario ya puede ver el sitio
  6. Llega a la etiqueta script, descarga en el navegador el JS y comienza la magia de React.js, pero en forma de hidratación 🌊 es decir le dará funcionalidad al website, por ejemplo buscando eventos como el de onClick entre los elementos ya existentes y lo conectará a sus respectivas funciones
  7. El usuario ya puede interactuar con el sitio
💡 **Recuerda** Para que un website funcione siempre contará con un servidor para que lo mande al usuario, entonces por que no aprovechar el mismo para pasarle la tarea de renderizar contenido, Como frontends podemos olvidar que existe un servidor, ya que existen servicios como github pages que ya nos brindan un servidor para poder servir nuestros sitios con solo tener unos cuantos archivos HTML, CSS y JS.

Con este procedimiento el sitio cargará más rápido a nivel visual y estaremos mejorando el SEO del mismo.

💚 #nuncaParesDeAprender

Fernando Quinteros Gutierrez

Fernando Quinteros Gutierrez

hace 4 meses

⚛ ¿Qué es Next.js?

Ideas/conceptos claves

Server Side Render es una técnica la cual manda el trabajo de renderizado HTML a un servidor, lo que normalmente lo realizaría React en un navegador

React.Suspense es una forma de realizar lazy loading dentro de react, es decir que no se descargue todo el código de golpe, más bien vaya descargándose bajo demanda, mejorando la carga inicial de los websites

Recursos

Apuntes

  • Next.js te permite crear sitios con la librería React.js, los cuales estarán listos y optimizados para producción
  • Next.js se caracteriza por:
    • La facilidad para aprender y realizar la configuración
    • Optimizado para el brindar mejoras a nivel del SEO y rendimiento de tus aplicaciones
    • Incluye un enrutamiento por defecto basado en páginas, las cuales pueden ser dinámicas
    • Puedes integrar API’s con el concepto de Server Side Render
    • Puede crear tanto sitios estáticos y mediante server side render en una misma aplicación
    • Incluye soporte para diferentes sabores de CSS (Sass, Postcss, CSS in JS) y JS (TypeScript)
  • La versión 12, (más actual hasta el momento) del framework incluye características como:
    • Un compilador veloz implementado mediante Rust
    • Implementación de Middlewares en el servidor
    • Soporte casi terminado para react 18
    • Optimización paras las imágenes, haciendo que carguen más rápido para los usuarios
    • Soporte para React.Suspense y módulos nativos de ECMAScript
    • Importación de URL’s como un CDN
    • Implementación para React Server Components
📌 **RESUMEN:**  Next.js es un framework de React.js el cual te permite crear aplicaciones web   con mejor SEO y rendimiento, con una gran facilidad a nivel de configuración. Este framework puede crear aplicaciones hibridas, es decir que tendra tanto paginas estaticas como paginas las cuales implementarán server side render.
Brian Sánchez Izquierdo

Brian Sánchez Izquierdo

hace 4 meses

¡Soñé con este día, a darle!

fabian nieves

fabian nieves

hace 4 meses

lets gooo

Luis Fernando Nuñez Rangel

Luis Fernando Nuñez Rangel

hace 4 meses

A darle con todo al curso de Next.js

letori

Justo me di cuenta de que React no es muy bueno en el tema SEO por lo que usar esa tecnología para el proyecto que tengo pendiente no es una buena idea y aquí estoy para no parar de aprender.

Brian Sánchez Izquierdo

Brian Sánchez Izquierdo

hace 4 meses

React server components?! Oscar eres el mejor.