Descripción
En este curso actualizado de Next.js, aprenderás a construir aplicaciones web modernas, escalables y de alto rendimiento utilizando este framework líder basado en React.
Desde los fundamentos hasta características avanzadas, exploraremos cómo aprovechar al máximo Next.js para crear sitios estáticos, aplicaciones híbridas y APIs robustas. También conocerás las mejores prácticas para optimización, estilización, despliegue y mantenimiento en producción.
Este curso combina teoría y práctica con proyectos que te prepararán para desarrollar aplicaciones reales.
Requisitos previos
Para poder iniciar y seguir el curso con normalidad, es necesario tener un mínimo de conocimientos de React y Node.js
Objetivos
En este curso revisaremos todas las características que nos puede ofrecer Next.js ya sea para crear aplicaciones con contenido estático o para crear aplicaciones complejas con bases de datos y APIs internas.
El objetivo de este curso es establecer las bases fundamentales del desarrollo de aplicaciones web con Next.js. Por lo que no es un curso sólo donde aprender Next.js o sus características, sino que te enseñaremos cómo funciona, casos de uso, arquitectura y técnicas para sacar el mayor partido a este potente framework.
Los principales objetivos son:
- Comprender los conceptos básicos de Next.js: instalación, configuración inicial y estructura de una aplicación.
- Aplicar diferentes estrategias de renderizado: SSR, SSG, ISR y CSR.
- Implementar navegación y rutas dinámicas: manejo de parámetros y rutas anidadas.
- Dominar la obtención de datos: optimizar el uso de
getStaticProps, getServerSideProps y SWR. - Crear y gestionar APIs: desarrollo de funciones API y middleware.
- Estilizar aplicaciones: uso de CSS, CSS-in-JS y frameworks como Tailwind CSS.
- Optimizar y desplegar proyectos en producción: configuración de despliegue en Vercel y análisis de rendimiento.
- Internacionalizar aplicaciones: configuración de i18n para múltiples idiomas.
- Integrar imágenes optimizadas: usar el componente
Image de Next.js para mejorar la carga de recursos visuales. - Prepararte para trabajar en entornos reales con habilidades prácticas y proyectos funcionales.
Contenido
Introducción a Next.js
- ¿Qué es Next.js?
- Casos de uso: aplicaciones web, sitios estáticos, aplicaciones híbridas.
- Diferencias entre SSG, SSR, ISR y CSR.
- Características principales de Next.js.
Primeros pasos
- Instalación y configuración
- Instalación con NPM, Yarn o PNPM.
- Estructura básica de un proyecto.
- "Zero Config" de Next.js
- Configuración inicial automática.
- Opciones avanzadas en
next.config.js.
- Creación de tu primera página
- Proyecto "Hello World" con Next.js.
Estructura y Routing
- Anatomía de una aplicación Next.js.
- Sistema de routing basado en archivos:
- Páginas básicas.
- Rutas dinámicas (
[param].js). - Rutas anidadas.
- i18n:
- Configuración de internacionalización.
- Idiomas dinámicos con
getStaticPaths.
- Navegación dentro de la aplicación:
- Uso del componente
Link. - Métodos avanzados de navegación (API
router).
Data Fetching (Obtención de datos)
- Métodos principales de obtención de datos:
- Static Site Generation (SSG).
- Server Side Rendering (SSR).
- Incremental Static Regeneration (ISR).
- Client Side Rendering (CSR).
- API para obtención de datos:
getStaticProps.getServerSideProps.getStaticPaths.- Uso de SWR para data fetching en el cliente.
UI + Styling
- Opciones de estilización en Next.js:
- CSS global y CSS Módulos.
- CSS-in-JS con libraries como styled-components o Emotion.
- Tailwind CSS en proyectos de Next.js.
- Uso avanzado del componente
Image: - Optimización de imágenes con Next.js.
- Soporte para formatos modernos como WebP y AVIF.
Construcción de APIs con Next.js
- Rutas de API:
- Creación de funciones API.
- Métodos HTTP (
GET, POST, etc.).
- Rutas dinámicas en la API.
- Middleware:
- Validación y autenticación.
- Uso de middlewares con la API de Next.js.
Preparación para Producción
- Deployment:
- Configuración de producción.
- Exportación de aplicaciones estáticas con
next export.
- Plataforma Vercel:
- Despliegue de un proyecto.
- "Zero Config Deployment".
- Branch preview para probar cambios antes de producción.
- Uso de Analytics en Next.js:
- Integración con Next.js Analytics y herramientas externas (Google Analytics, Plausible, etc.).
- Optimización para producción:
- Análisis del bundle (
next build). - Eliminación de dependencias innecesarias.
- Optimización de tiempos de carga.
Extras
- Planes de suscripción en plataformas como Vercel.
- Demo final:
- Construcción y despliegue de una aplicación completa con Next.js.