Curso de Next.js Online: SSR, Rutas Dinámicas y Performance

Diseñá y desplegá tu primera app de producción con Next.js

Al finalizar el curso vas a tener una aplicación completa en Next.js con App Router, SSR/SSG, API Routes, autenticación, optimización de imágenes y fuentes, y checklist de SEO técnico lista para deploy en Vercel. Todo el proceso lo hacés acompañado por un docente, en grupos de máximo 6 personas, para que tu proyecto quede en condición de portfolio o uso real.

150+
10 clases en vivo (2 h cada una)
10+
Proyecto final con App Router, SSR/SSG y API Routes
Grupos reducidos (máx. 6 personas por cohorte)
Certificado de finalización del curso de Next.js

Inscripción a los cursos de programación

Elegí tu camino: frontend, backend o full stack. Inscribite en los cursos online en vivo y empezá a construir proyectos profesionales en grupos reducidos. Ver próximas fechas

No hay cohortes disponibles por el momento. Consultá por WhatsApp las próximas fechas para cursar programación.

Curso de Next.js Nivel Inicial–Intermedio

Este curso está pensado para quienes ya manejan HTML, CSS y los fundamentos de React y quieren dar el paso a aplicaciones listas para producción, con SSR/SSG, rutas modernas, App Router y APIs integradas. Es ideal si querés construir landing pages rápidas, e-commerce, blogs o dashboards con buen SEO y performance. Trabajamos en grupos reducidos de hasta 6 personas, con foco en código de verdad, revisión de tu trabajo y preparación para deploy.

Personas que vienen de React y quieren dar el salto a proyectos de producción con App Router, SSR, SSG e ISR.
Desarrolladores que necesitan cerrar el circuito completo: UI, data fetching, API Routes, autenticación y deploy.
Diseñadores/UX y frontend devs que quieren armar sistemas de diseño escalables combinando Next.js + Tailwind.
Equipos que buscan estandarizar performance, DX, organización de carpetas y patrones en proyectos Next.js.

MODALIDAD

¿Cómo vas a aprender Next.js en este curso?

Aprendés Next.js en clases online en vivo, trabajando sobre una aplicación pensada para producción desde las primeras semanas. Las cohortes son chicas (máximo 6 personas), lo que permite revisar código en conjunto, resolver dudas complejas de arquitectura y ajustar el ritmo según tu experiencia previa.

Sesiones en vivo orientadas a producción

Implementación guiada paso a paso, debugging en directo y feedback sobre tus decisiones de arquitectura y performance.

Material complementario y ejemplos

Guías, snippets y repositorios de referencia para reforzar lo visto en clase y seguir practicando Next.js entre sesiones.

Temario del Curso de Next.js con App Router

En este curso de Next.js vas a aprender a construir aplicaciones web pensadas para producción, con SEO sólido, carga rápida y una DX moderna. Trabajamos con el App Router, layouts anidados, estilos con Tailwind, SSR/SSG, data fetching en servidor, API Routes y patrones de autenticación actuales. También vemos compatibilidad con getServerSideProps/getStaticProps para entender el ecosistema completo. Todo se trabaja en grupos reducidos de máximo 6 personas, con foco en código real, performance y deploy final en Vercel.

Introducción a Next.js y setup del proyecto

Qué es Next.js y ventajas frente a una SPA en React puro
Estructura base del proyecto (app/, pages/, public/, src/)
Creación del proyecto, scripts clave y configuración inicial con TypeScript (opción recomendada)

Páginas y enrutamiento con el App Router

Rutas en app/: segmentos, rutas anidadas y dinámicas
Uso de Link y navigation, params y search params
Convenciones de Next.js (layout.tsx, page.tsx, loading.tsx, error.tsx) para manejar estados de la UI

Componentes, layouts compartidos y Server Components

Layouts persistentes, anidados y patrones de diseño de estructura
Diferencias entre Server Components y Client Components
Headers, footers y navegación persistente optimizados para SEO y rendimiento

Estilos con Tailwind CSS y `CSS Modules`

Configuración de Tailwind CSS en Next.js y uso de utilidades
CSS Modules para estilos con scope local cuando se requiere
Buenas prácticas de diseño responsive, tokens de diseño y coherencia visual

Renderizado en servidor (`SSR`), `SSG` y `CSR`

Diferencias entre SSR, SSG, ISR y CSR y cuándo conviene cada uno
Server Components, streaming y tiempos de respuesta
Hidratación, eventos del lado del cliente y límites de los Client Components

Data Fetching: `getServerSideProps`, `getStaticProps` y nuevo modelo

Estrategias de datos para páginas dinámicas y estáticas en el directorio pages/
Incremental Static Regeneration (ISR) y revalidación de contenido
Equivalentes modernos en app/ (fetch en componentes de servidor, opciones de revalidate y caché)

Optimización de imágenes, fuentes y performance

Uso del componente <Image>, loaders y tamaños adaptativos
Optimización de fuentes con next/font (local y Google Fonts)
Impacto en Core Web Vitals y SEO técnico

APIs con `API Routes` y Route Handlers

Route Handlers en app/api y manejo de métodos HTTP
Validación de entrada, respuestas tipadas y manejo de errores
Organización por dominios y consideraciones básicas de CORS

Autenticación, middlewares y rutas protegidas

Patrones de autenticación (cookies, tokens) en Next.js
Middlewares para proteger rutas del lado del servidor
Persistencia de sesión y UI condicionada para usuarios autenticados

Proyecto final: aplicación completa en Next.js lista para producción

Integración de routing, layouts, data fetching, API Routes y autenticación
Optimización de imágenes, fuentes y accesibilidad para un mejor SEO
Preparación para deploy en Vercel y documentación técnica del proyecto

¿Necesito saber React antes de tomar este curso?

Sí, es un requisito indispensable. Next.js es un framework sobre React. Debes entender componentes, props, `useState` y `useEffect` para poder aprovechar el contenido sobre renderizado y rutas.

¿Enseñan el 'App Router' o el 'Pages Router'?

Nos enfocamos principalmente en el **App Router** (la carpeta `app/`), que es el estándar moderno y futuro de Next.js. Sin embargo, explicamos las diferencias con `pages/` para que entiendas código legado.

¿Qué son los Server Components?

Son componentes que se renderizan exclusivamente en el servidor. Esto reduce drásticamente el JavaScript que se envía al navegador, haciendo tu web mucho más rápida. Es el concepto central del App Router.

¿Cuál es la diferencia entre SSR, SSG e ISR?

SSR (Server-Side Rendering) genera la página en cada petición. SSG (Static Site Generation) la genera una vez al compilar. ISR (Incremental Static Regeneration) permite actualizar páginas estáticas sin recompilar todo el sitio.

¿Por qué Next.js es mejor para SEO que React puro?

Porque React puro (SPA) a veces dificulta que Google lea el contenido. Next.js entrega HTML listo desde el servidor, lo que garantiza que los buscadores indexen tu información perfectamente.

¿Vemos TypeScript en el curso?

Sí. Next.js y TypeScript son la pareja perfecta. Configuraremos el proyecto con TS desde el inicio para tener autocompletado y evitar errores de tipos en las props y APIs.

¿Qué es el 'Routing' basado en archivos?

En Next.js no configuras un router complejo. La estructura de carpetas define las rutas. Si creas `app/contacto/page.tsx`, tu ruta será `/contacto`. Aprenderás a dominar este sistema.

¿Usamos Tailwind CSS?

Sí. Es la forma más eficiente de estilar en Next.js. Veremos cómo configurarlo y cómo usarlo para crear diseños responsivos sin salir de tus componentes.

¿Qué son los 'API Routes' o 'Route Handlers'?

Next.js te permite crear tu propio backend dentro del mismo proyecto. Aprenderás a crear endpoints (como `/api/usuarios`) para consultar bases de datos o procesar formularios.

¿Cómo se optimizan las imágenes en Next.js?

Usando el componente `<Image />`. Este componente redimensiona, comprime y cambia el formato de las imágenes automáticamente para que carguen al instante en cualquier dispositivo.

¿Vemos autenticación?

Sí. Implementaremos un flujo de autenticación seguro, manejando sesiones, cookies y protegiendo rutas privadas (Middleware) para que solo usuarios logueados accedan.

¿Qué es el Middleware en Next.js?

Es código que se ejecuta antes de que se complete una petición. Lo usamos para redirecciones, reescritura de URLs y, sobre todo, para verificar si un usuario tiene permiso para ver una página.

¿Cómo hago deploy de mi proyecto?

Usaremos **Vercel**, la plataforma de los creadores de Next.js. Aprenderás a conectar tu repositorio de GitHub para que cada vez que hagas `push`, tu sitio se actualice en vivo.

¿Qué es la 'Hydration' (Hidratación)?

Es el proceso donde React 'toma el control' del HTML estático enviado por el servidor para hacerlo interactivo. Entender esto es clave para evitar errores comunes de renderizado.

¿Puedo usar bases de datos con Next.js?

Sí. Next.js es Fullstack. Puedes conectarte a cualquier base de datos (PostgreSQL, MongoDB) directamente desde tus Server Components o API Routes.

¿Qué son los Layouts anidados?

Una característica potente del App Router. Permite que secciones de tu web (ej: el dashboard) compartan una barra lateral mientras solo cambia el contenido principal, sin recargar todo.

¿Qué es `next/font`?

Es el sistema de optimización de tipografías. Aprenderás a usar Google Fonts sin que el navegador tenga que hacer peticiones externas, eliminando saltos de diseño (CLS).

¿Sirve para E-commerce?

Totalmente. Next.js es el estándar para e-commerce hoy en día debido a su velocidad y capacidad de SEO. Veremos patrones útiles para este tipo de sitios.

¿Vemos manejo de Metadata (SEO)?

Sí. Aprenderás a usar la API de Metadata para definir títulos, descripciones e imágenes (Open Graph) dinámicas para cada página de tu sitio.

¿Qué es el 'Streaming'?

Es la capacidad de enviar partes de la página al navegador a medida que están listas. Usaremos `Suspense` y `loading.tsx` para mostrar esqueletos de carga instantáneos.

¿Por qué grupos de 6 personas?

Next.js tiene conceptos arquitectónicos complejos (Servidor vs Cliente). En grupos pequeños, podemos revisar tu código y explicarte por qué ese componente específico está fallando en el servidor.

¿Qué es 'Client Component'?

Son los componentes tradicionales de React que usan `useState` o `useEffect`. Aprenderás cuándo usar la directiva `'use client'` y cuándo no.

¿Vemos Fetching de datos?

Sí. El App Router extiende la API `fetch` nativa. Aprenderás a cachear datos, revalidarlos por tiempo (ISR) y dedublicar peticiones automáticamente.

¿Es necesario saber Backend?

No es obligatorio, pero ayuda. Next.js borra la línea entre front y back. En el curso aprenderás lo necesario de backend para construir tu aplicación completa.

¿Qué es Turbopack?

Es el nuevo empaquetador de Next.js (escrito en Rust) que reemplaza a Webpack. Hablaremos de cómo acelera tu entorno de desarrollo local.

¿Vemos validación de formularios?

Sí. Usaremos Server Actions (la forma moderna) para procesar formularios directamente en el servidor, validando datos con tipado seguro.

¿Qué son las Server Actions?

Son funciones que puedes ejecutar desde un botón en el cliente pero que corren en el servidor. Simplifican enormemente la mutación de datos (crear, editar, borrar).

¿Cómo manejo errores?

Aprenderás a usar el archivo especial `error.tsx` para crear pantallas de error personalizadas que no rompen toda la aplicación cuando algo falla.

¿Qué es un Sitemap dinámico?

Es un mapa de tu sitio para Google. Aprenderás a generarlo automáticamente con código para que, si agregas un producto, aparezca en el sitemap al instante.

¿Vemos Variables de Entorno?

Sí. Aprenderás a configurar archivos `.env` para guardar secretos (API Keys, contraseñas de DB) de forma segura, diferenciando entre las que ve el navegador y las que no.

¿Qué es el 'Lazy Loading' en Next.js?

Es cargar componentes o librerías solo cuando se necesitan. Next.js lo hace fácil con `next/dynamic`, mejorando la velocidad inicial de tu sitio.

¿Puedo migrar un proyecto React a Next.js?

Sí, es un camino común. El curso te dará las bases para entender qué partes de tu lógica de React se mantienen y cuáles se mueven al servidor.

¿Qué es 'Static Export'?

Es la capacidad de exportar tu sitio como archivos HTML/CSS puros para alojarlos en cualquier servidor (no solo Vercel). Veremos las limitaciones y ventajas.

¿Vemos SEO Internacional (i18n)?

Tocaremos los fundamentos de cómo estructurar rutas para múltiples idiomas (ej: `/es`, `/en`) usando el routing dinámico de Next.js.

¿Qué pasa con `getServerSideProps`?

Esa función es del Pages Router antiguo. En el App Router ya no se usa, se reemplaza por `fetch` directo en el componente. Explicaremos el cambio de mentalidad.

¿Es compatible con Redux?

Sí, pero en Next.js (y más con Server Components) a menudo no lo necesitas. Veremos cómo manejar el estado sin complicar la arquitectura.

¿Qué es Vercel Edge Functions?

Son funciones serverless ultra-rápidas distribuidas globalmente. Mencionaremos cómo Next.js las utiliza para middleware y optimización.

¿Vemos Testing en Next.js?

Introduciremos cómo configurar un entorno de test básico, aunque el foco principal es la construcción y arquitectura de la aplicación.

¿Qué es el archivo `layout.tsx`?

Es el envoltorio principal de tus páginas. Ahí defines el HTML base, la fuente global y los componentes comunes como el Navbar y Footer.

¿Cómo funcionan los Dynamic Routes?

Creando carpetas con corchetes, como `[id]`. Aprenderás a capturar ese parámetro para buscar en la base de datos el producto o blog post correspondiente.

¿Qué es `revalidatePath`?

Una función clave para actualizar la caché. Cuando editas un dato, le dices a Next.js 'limpia la caché de esta ruta' para que el usuario vea el cambio.

¿Sirve para Dashboards privados?

Sí. Next.js no es solo para webs públicas SEO. Su manejo de datos y rutas lo hace excelente para paneles de administración rápidos y seguros.

¿El curso se actualiza?

Sí. Next.js evoluciona rápido. Nuestro contenido se ajusta a las últimas versiones estables (actualmente Next.js 14/15) y buenas prácticas.

¿Qué es CSS Modules?

Una forma de escribir CSS tradicional pero con alcance local (scope), para que tus clases no choquen entre componentes. Es una alternativa nativa a Tailwind.

¿Qué es el componente `<Link>`?

Es el reemplazo de la etiqueta `<a>`. Permite navegar entre páginas sin recargar el navegador, precargando la siguiente página para una velocidad instantánea.

¿Vemos Analytics?

Vemos cómo integrar scripts de terceros (como Google Analytics) usando el componente `<Script>` de manera optimizada para no dañar la performance.

¿Qué es `not-found.tsx`?

Un archivo especial para diseñar tu página 404 personalizada. Aprenderás a mostrarla condicionalmente cuando un recurso no existe.

¿Necesito una computadora potente?

Cualquier equipo que corra Node.js y VS Code sirve. Next.js es bastante eficiente en desarrollo, aunque proyectos grandes requieren más RAM.

¿Hay soporte fuera de clase?

Sí, tenemos un canal de comunicación para el grupo donde resolvemos dudas de implementación y compartimos recursos útiles.

¿Cuál es el proyecto final?

Construirás una aplicación completa (ej: blog con CMS, tienda, catálogo) optimizada, con SEO configurado y desplegada en producción en Vercel.

Métricas del curso

150+

10+