Aprendiendo NextJS, el framework de React con Server Side Rendering

midudev

Resumen

En este vídeo introductorio, el autor presenta una serie dedicada a dominar Next.js, el framework de React optimizado para Server Side Rendering (SSR). A través del desarrollo de un proyecto práctico, un clon de Twitter orientado a desarrolladores, se explican conceptos fundamentales como el prerendering, el enrutamiento basado en el sistema de archivos, el CSS-in-JS con styled-jsx y la creación de rutas API. El contenido combina teoría con live coding, comparando Next.js con enfoques tradicionales como Create React App y Gatsby, destacando su facilidad de uso, optimización automática y capacidad para escalar aplicaciones de producción.

Capítulos

  1. 5:43Conceptos de renderizado y SEO
  2. 6:44Server Side Rendering
  3. 7:35Diferencia con aplicaciones estáticas
  4. 8:50Estilos con Styled JSX
  5. 10:13API Routes en Next.js
  6. 10:56SEO con Next Head
  7. 23:03Configuración y entorno de desarrollo
  8. 23:22Inicialización del proyecto con NPX
  9. 25:23Estructura de archivos y directorios
  10. 25:42Scripts de ejecución
  11. 33:16CSS encapsulado
  12. 36:20Estilos globales
  13. 39:01Rutas y Navegación SPA
  14. 39:16Creación de nuevas páginas
  15. 43:32Navegación sin recargas
  16. 50:16Data Fetching y Ciclo de vida
  17. 1:07:30React Router vs Next Link
  18. 1:12:06Get Initial Props
  19. 1:16:43Hidratación en el cliente
  20. 1:17:58Creación de endpoints
  21. 1:29:00Diferencias con Express

Temas tratados

  • Introducción a Next.js
  • Server Side Rendering (SSR)
  • Ecosistema y ventajas
  • CSS-in-JS con styled-jsx
  • Rutas y Navegación
  • Data Fetching (getInitialProps)

Extracto de la transcripción

Hoy empezamos una nueva serie de vídeos que van a estar todas centradas en NextJS. Hoy es el primer vídeo donde vamos a ver next desde cero. Vamos a aprender qué es next. Por lo tanto, hoy diríamos que es un vídeo más introductorio sobre qué es next DS. Crearemos la aplicación, igual jugamos un poquito con la aplicación, no llegaremos mucho más allá, pero vamos a ver un montón de diferentes temas, ¿no? O sea, que en el centro vamos a tener NextDGS de Versel, vamos a ver este framework de React que ahora os explicaré más, pero también me gustaría en esta serie de vídeos tocar Firebase. ¿Por qué vamos a tocar Firebase? Porque el proyecto que vamos a hacer en esta serie de vídeos va a ser un clon de Twitter, un clon de Twitter, como lo queráis hacer en americano o en inglés. Pues Twitter o o Twitter sería como en castellano, ¿no? Twitter, Twira o Twitta, como lo queráis pronunciar. Pues vam…