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.

Métricas del curso

  • 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 al curso

Inscribite en este curso online en vivo y empezá a desarrollar habilidades profesionales con acompañamiento personalizado y grupos reducidos. Ver próximas fechas

No hay cohortes disponibles por el momento. Consultá por WhatsApp las próximas fechas de inscripció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.

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

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)

Bootstrap de un proyecto Next.js con página de inicio, layout mínimo y TypeScript configurado

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

Secciones principales del sitio con rutas estáticas y dinámicas usando App Router

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

Layout raíz + layout por sección, con componentes compartidos y mezcla de Server/Client Components

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

UI responsiva y consistente de la aplicación usando Tailwind y componentes estilados

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

Página híbrida que combina partes renderizadas en servidor con componentes interactivos en cliente

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é)

Listado con datos externos: versión SSR/SSG (pages/) y versión con app/ y revalidate configurado

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

Galería optimizada con <Image> y tipografía gestionada con next/font, medida en Lighthouse

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

Endpoint REST simple (CRUD mínimo) consumido desde la interfaz Next.js

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

Flujo de Login/Logout con rutas protegidas, redirecciones seguras y estados de sesión

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

Aplicación completa (e-commerce, blog o dashboard) lista para deploy en Vercel

Curso anterior

Curso de React Online en Argentina: SPA, Hooks y React Router
Curso de React Online en Argentina: SPA, Hooks y React Router

Curso de React Online: SPA, Hooks y React Router

Creá interfaces dinámicas con componentes reutilizables, manejo de estado, hooks, React Router y patrones modernos para desarrollar SPA rápidas y mantenibles.

Comenzar Curso

Curso actual

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

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

Construí sitios y aplicaciones en Next.js usando SSR, rutas dinámicas, optimización de caché e imágenes, arquitectura escalable y buenas prácticas para entregar experiencias rápidas.

Curso actual

Curso siguiente

Curso de SEO Técnico Online en Argentina: Next.js, Core Web Vitals, i18n y JSON-LD
Curso de SEO Técnico Online en Argentina: Next.js, Core Web Vitals, i18n y JSON-LD

Curso de SEO Técnico para Next.js: Core Web Vitals, i18n y JSON-LD

Optimizá proyectos en Next.js aplicando SEO técnico, metadatos avanzados, sitemap.xml, robots.txt, i18n, Core Web Vitals y JSON-LD para posicionar sitios rápidos en buscadores.

Comenzar Curso
¿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.
Chateá por info