Next.js

Next.js es el framework de React más usado para construir sitios y aplicaciones web completas. Creado por Vercel, agrega a React lo que le falta para producción: rutas basadas en archivos, renderizado en el servidor (SSR), generación estática (SSG), optimización de imágenes y fuentes, SEO, y un backend integrado con Server Actions y Route Handlers.

En proyectos reales, Next.js se usa para tiendas en línea, blogs, landing pages que necesitan posicionarse en Google, plataformas SaaS, paneles de administración y sitios corporativos. Empresas como Nike, Netflix (Jobs), TikTok, OpenAI, Notion y Mercado Libre lo usan. Con un solo proyecto puedes tener el frontend y el backend de la app de tu cliente.

Este curso usa Next.js 15/16 con App Router, React 19 y TypeScript: la forma moderna y recomendada de trabajar con Next.

Qué vas a poder hacer al terminar

• Entender y elegir entre SSR, SSG, ISR y CSR según el proyecto.
• Crear apps con App Router: layouts, rutas dinámicas, estados de carga y error.
• Combinar Server Components y Client Components correctamente.
• Obtener datos con caché y revalidación; crear formularios con Server Actions.
• Construir APIs con Route Handlers, optimizar SEO, imágenes y fuentes.
• Agregar autenticación con Auth.js y base de datos con Prisma.
• Desplegar en Vercel, en un VPS con Node o como sitio estático en hosting compartido.

Requisitos previos

• React sólido: componentes, props, estado, hooks y formularios.
• JavaScript moderno y nociones de TypeScript (tipos básicos e interfaces).
• Recomendable: conceptos de backend del curso de Node.js (HTTP, APIs REST, bases de datos).

Temario

Fundamentos

1. Qué es Next.js: SSR, SSG, ISR y CSR — Estrategias de renderizado y cuándo usar cada una.
2. Crear proyecto — create-next-app, estructura y configuración.
3. App Router y archivos especiales — layout, page, loading, error, not-found y grupos de rutas.
4. Server vs Client Components — Qué corre dónde y cómo combinarlos.
5. Rutas dinámicas — Segmentos [slug], catch-all y generateStaticParams.

Datos y backend

6. Data fetching y caché — fetch, caché, revalidación y streaming.
7. Server Actions y formularios — Mutaciones sin API, validación con zod y useActionState.
8. Route Handlers (API) — Endpoints REST dentro de tu app.
9. Metadata y SEO — Títulos, Open Graph, sitemap y robots.
10. Imágenes y fuentes — next/image y next/font.

Profesional

11. Autenticación con Auth.js — Login con GitHub y credenciales, rutas protegidas.
12. Base de datos con Prisma — Modelos, migraciones y CRUD con Server Actions.
13. Despliegue — Vercel, VPS con Node y exportación estática.
14. Proyecto final — Blog con panel de administración, auth y base de datos.