Next.js — Iniciación

Este curso está dirigido a desarrolladores con conocimientos básicos de React que quieren dar sus primeros pasos en Next.js, el framework de producción más utilizado para construir aplicaciones web modernas sobre React. A lo largo de las diez horas de formación, el participante comprenderá qué aporta Next.js frente a una aplicación React pura, aprenderá a estructurar proyectos generados con create-next-app, dominará el sistema de enrutamiento basado en ficheros y distinguirá las tres estrategias de renderizado —CSR, SSR y SSG— aplicando getStaticProps y getServerSideProps en casos reales. Como resultado concreto, el alumno será capaz de crear y ejecutar una aplicación Next.js funcional con múltiples páginas, datos obtenidos desde una API REST e imágenes optimizadas, lista para ser revisada o desplegada en un entorno de desarrollo.

Al finalizar el curso, el participante será capaz de:

1. Describir el propósito y las ventajas de Next.js frente a React sin framework, diferenciando al menos dos de sus características principales en un contexto de desarrollo web real.
2. Identificar los directorios y archivos clave de un proyecto Next.js recién generado, explicando la responsabilidad de cada elemento de la estructura.
3. Ejecutar la creación y el arranque de un proyecto Next.js desde cero, verificando que la aplicación responde correctamente en el servidor de desarrollo local.
4. Describir las diferencias entre CSR, SSR y SSG, relacionando cada estrategia con la función de data fetching correspondiente a partir de un esquema proporcionado.
5. Aplicar el sistema de enrutamiento por ficheros para crear páginas estáticas y rutas dinámicas, enlazándolas entre sí mediante el componente <Link>.
6. Aplicar getStaticProps y getServerSideProps en páginas de ejercicios guiados para obtener datos de una API REST pública y justificar la elección de una u otra función según el caso.
7. Aplicar el componente <Image> de next/image sustituyendo etiquetas nativas, especificando correctamente todas las props obligatorias y eliminando advertencias en consola.
8. Identificar errores comunes de compilación y ejecución en un proyecto con fallos intencionados, localizando su origen a partir de los mensajes del compilador y del navegador.

Bloque 1 — Introducción a Next.js y estructura del proyecto El curso arranca situando Next.js dentro del ecosistema React: se analiza qué problemas resuelve el framework frente a una Single Page Application clásica —enrutamiento integrado, renderizado en servidor y optimización de recursos— y se comparan al menos dos de sus características con el enfoque sin framework. A continuación, el participante genera su primer proyecto con create-next-app, arranca el servidor de desarrollo y verifica que la aplicación responde en localhost:3000. Se dedica tiempo a recorrer la anatomía del proyecto resultante, entendiendo el papel de pages/, public/, styles/, next.config.js y _app.js antes de escribir una sola línea de código propia.

Bloque 2 — Enrutamiento basado en ficheros Next.js convierte cada archivo dentro de pages/ en una ruta accesible del navegador. En este bloque se construyen al menos tres páginas nuevas —incluyendo una ruta dinámica con parámetro ([id].js)— y se conectan entre sí usando el componente <Link> en lugar de anclas HTML nativas. Se explica por qué esta convención simplifica la navegación respecto a react-router-dom y qué implicaciones tiene sobre la organización del código.

Bloque 3 — Estrategias de renderizado y data fetching El núcleo del curso profundiza en la decisión más importante al trabajar con Next.js: cuándo generar el HTML. A partir de un diagrama de ciclo de vida, se describen y contrastan CSR, SSR y SSG, identificando qué función —getStaticProps o getServerSideProps— habilita cada estrategia. Tras la parte conceptual, el participante aplica ambas funciones en ejercicios guiados: primero consume una API REST pública con getStaticProps para pre-renderizar una página en tiempo de build; después utiliza getServerSideProps para obtener datos en cada petición y documenta en el propio código por qué ese caso concreto requiere renderizado en servidor.

Bloque 4 — Optimización de imágenes y depuración de errores El bloque final trabaja dos habilidades transversales esenciales para el trabajo diario. Por un lado, el participante sustituye etiquetas <img> nativas por el componente <Image> de next/image en una página de ejemplo, configurando correctamente src, alt, width y height, y comprueba que la consola queda libre de advertencias. Por otro, se presenta un proyecto con fallos intencionados —una ruta mal nombrada, getStaticProps no exportada y una prop alt ausente— y el alumno practica la localización y corrección de cada error a partir de los mensajes del compilador y del navegador, consolidando así los hábitos de depuración en entornos Next.js.

• Sistema operativo: Windows 10/11, macOS 12+ o cualquier distribución Linux moderna.
• Node.js: versión 18.17 o superior (LTS recomendada); incluye npm 9+.
• Editor de código: Visual Studio Code con la extensión ESLint y, opcionalmente, Prettier y Next.js snippets.
• Navegador: Google Chrome o Firefox en versión actualizada (se utilizarán las DevTools para inspeccionar errores de consola).
• Conexión a internet: necesaria para ejecutar create-next-app, instalar dependencias y consumir APIs REST públicas durante los ejercicios.
• Git (recomendado): versión 2.x para clonar repositorios de ejercicios proporcionados por el instructor.

• HTML y CSS: capacidad de estructurar y maquetar páginas web estáticas.
• JavaScript ES6+: manejo de funciones flecha, desestructuración, módulos import/export, async/await y promesas.
• React fundamentals: creación de componentes funcionales, uso de props, gestión básica de estado con useState y comprensión del ciclo de vida con useEffect.
• Línea de comandos: ejecución de comandos básicos en terminal (instalación de paquetes con npm/yarn, navegación por directorios).
• Node.js: tener instalado Node.js 18+ en el entorno de trabajo (no se requiere conocimiento profundo de Node, solo tenerlo disponible).