NEXT JS 15+ Framework de Producción para ReactJS [2026]

Name: NEXT JS 15+ Framework de Producción para ReactJS [2026]
Rating: 4.7 (75 reviews)

NextJS 15+, Typescript, Tailwinds, V0, SSR, CSR, SSG, DR, Middleware, Auth, APIs, CRUD, Shadcn, Supabase, etc..

Highest Rated

Created byJosé Galdámez

Last updated 3/2026

Spanish

Spanish [Auto],

What you'll learn

Crear apps de alto rendimiento: Desarrolla aplicaciones web rápidas con renderizado estático y dinámico según el proyecto.
Optimización para SEO: Aprende a mejorar el SEO con renderizado del lado del servidor y generación estática de páginas.
Desarrollo full-stack: Integra frontend y backend en un solo proyecto, simplificando la arquitectura con APIs integradas.
Productividad mejorada: Aumenta la eficiencia con herramientas como enrutado automático y recarga rápida de componentes.

Course content

11 sections • 190 lectures • 19h 48m total length

Introducción a la sección2:09
Comenzamos a programar en NextJS, en esta sección aprenderás los conceptos básicos del framework, como está estructurado y cual es la Next way, es decir como trabaja y cual es la filosofía de NextJs. Sin más, comencemos.
Temas a tratar en la sección0:14
¿Qué problema soluciona NextJS?5:28
Tenemos que tener claro para qué nos sirve usar NextJS, de esa manera sabremos en que casos es conviente utilizarlo.
Vercel2:44
Vercel es la empresa que está detrás de NextJS, una plataforma que hace que desplegar proyectos en línea sea muy sencillo.
Instalaciones necesarias7:14
Para trabajar con NextJS no necesitamos demasiadas aplicaciones. NodeJS, Git y un editor de código. Yo propongo usar Visual Studio Code. Pero son libres de elegir el que más les guste.
Creando nuestra primera NextJS App7:27
Llego el momento de crear nuestra primera aplicación en NextJS. Veremos la forma de crear y las diferentes opciones que nos solicita contestar al momento de crearla. También aprenderemos como correr nuestro servidor local para ver como va quedando.
Archivos y directorios15:44
En este vídeo haremos un recorrido por nuestro primer proyecto en NextJS para conocer la estructura de carpetas y los archivos que contiene.
Introducción a TailwindCSS6:27
Vamos a usar TailwindCSS para darles estilos a nuestras aplicaciones en este curso. En este vídeo haremos una introducción a como funciona.
Enrutamiento6:50
NextJs maneja el enrutamiento de una forma muy sencilla, en este video aprenderás a crear varias rutas de forma clara y manejable.
Tarea enrutamiento2:17
Practiquemos un poco como funciona las rutas en NextJS. Una pequeña tarea para familiarizarnos con las páginas de forma fácil.
Solución tarea enrutamiento4:07
Solucionamos la tarea del enrutamiento que vimos en el vídeo anterior.
API5:02
Con NextJs podemos no solo tener un sitio web estático, también podemos tener un servidor, esto significa que podemos tener un servidor de NodeJS sin problemas en el que podemos implementar un API REST. Aquí te muestro cómo funciona.
Metadata6:31
Cuando trabajamos en NextJS tenemos la posibilidad de configurar el SEO, para eso nos ayuda un elemento llamado metadata. Aquí te mostraré como utilizarlo.
Layout7:58
Un archivo muy importante en NextJS es layout.tsx, aquí aprenderemos como usarlo.
Estilos CSS6:18
Hay diferentes formas de manejar el CSS de nuestras aplicaciones. Aquí aprenderemos a usarlos.
Public Folder6:07
Una forma de compartir documentos en un servidor mediente la forma más fácil posible usando el folder especial en NextJS.
Componentes19:31
Atomizar nuestra aplicación es muy importante para aprovechar lo más posible las capacidades de React tanto de escalabilidad como de eficiencia.
Link9:50
En NextJs hay varios componentes especiales que debemos conocer. Uno de ellos es Link, en este video aprenderemos sobre su uso y beneficios.
Image5:32
Otro componete especial de NextJS es Image. En este vídeo te mostraré qué beneficios tiene usarlo.
Tarea componentes1:56
Practiquemos lo aprendido en los últimos vídeos.
Solución Tarea de Componentes3:20
Resolvamos la tarea del vídeo anterior.
Resumen de la sección4:16
Hablemos de lo que aprendimos en esta sección.

Introducción a la sección2:32
Comenzamos nueva sección en la que hablaremos de los diferentes modos de renderizado que existen en NextJS, haciendo un par de ejemplos para entender como funcionan.
Temas de la sección0:21
¿Qué son los modos de renderizado?5:56
Aprendamos sobre la forma en que se renderiza nuestra aplicación en el modelo cliente-servidor que se utiliza tanto en internet.
Renderizado por componentes1:48
Debemos recordar que los modos de renderizados no aplican a la aplicación completa, son implementador a los diferentes componentes.
Creando nuestro proyecto5:22
Necesitamos crear nuestro proyecto para ver los diferentes ejemplos de renderizado. En este vídeo vamos a crearlo para comenzar a trabajar.
Comparando con ReactJS7:34
Vamos a hacer una comparación sobre como funciona ReactJS en comparación de como funciona NextJS. No es necesario que realices el ejemplo, es solo para que notes la diferencia y la entiendas.
Maquetando menú del proyecto8:30
Crearemos un pequeño menú para poder movernos entre los ejemplos que haremos en esta sección.
SSR - Landing Page (TopBanner)12:35
Comenzaremos creando una Landing Page usando NextJS. En este vídeo crearemos el TopBanner.
SSR - Landing Page (PrincipalMenu)13:13
Seguimos creando nuestra Landing Page, en este video crearemos el menú principal.
SSR - Landing Page (Content 1)12:49
Seguimos creando nuestra Landing Page. Seguimos con la sección de contenido principal.
SSR - Landing Page (Content 2)6:50
Seguidos maquetando el contenido de nuestra landing page.
SSR - Landing Page (Content 3)8:51
En este vídeo terminaremos nuestra mini landing page.
SSR - Langin Page (Tarea MiniMenú)1:40
CSR - PasswordGenerator (Maquetacion 1)8:28
Ahora aprenderemos sobre los componentes CSR o Client Side Rendering.
CSR - PasswordGenerator (Maquetación 2)12:21
Seguimos maquetando el formulario para el Generador de constraseñas.
CSR - PasswordGenerator (useState y "use client")9:40
Para poder usar los hook de React necesitamos utilizar los componentes en modo "use client". Aquí aprenderemos como hacerlo.
CSR - PasswordGenerator (crear contraseña)13:38
Creamos nuestro password con las configuraciones que tenemos en nuestro formulario.
CSR - PasswordGenerator ( useEffect + copy )14:03
Terminamos el ejemplo de componente CSR copiando nuestra contraseña y mostrando un mensaje.
DR - DragonBallAPI (maquetación y model)8:25
Pasamos al siguiente modo de renderizado, el renderizado dinamico. Comencemos maquetando nuestra app web.
DR - DragonBallAPI (get characters)6:28
Hagamos la petición al api para obtener los datos de la forma tradicional.
DR - DragonBallAPI ( Cards forma tradicional )12:14
Forma tradiciona o ReactJS way para renderizar nuestros card de la información solicitada en el API.
DR - DragonBallAPI ( Server Function )10:39
La forma correcta de realizar las solicitudes en NextJs es con las Server Functions.
DR - DragonBallAPI ( dynamic route )9:01
Rutas dinámicas en nuestra aplicación
DR - DragonBallAPI ( get single character - tarea )4:05
Vamos a practicar lo aprendido hasta ahora, con una pequeña tarea que nos ayudará enfrentar desafíos de código.
DR - DragonBallAPI ( solución tarea )6:50
Resolvamos la tarea que asignamos en el vídeo anterior.
DR - DragonBallAPI ( maquetación single character 1 )8:10
Maquetamos la página para el single character.
DR - DragonBallAPI ( maquetación single character 2 )5:32
Terminamos la maquetación de nuesro single character page.
DR - Build de App7:48
Hagamos build de nuestra aplicación.
Resumen de la sección5:57
Repasemos la sección y los diferentes modos de renderizado que conocimos.
¡¡¡ Importante !!!5:16
Importante aclaración sobre la sección.
Cuestionario final

Introducción2:03
Introducción a la sección de Deploy.
Preparando mi App4:33
Preparemos nuestra app para que cumpla su función en Producción.
Creando Repositorio Github4:42
Necesitamos una cuenta de Github para crear un repositorio donde subiremos nuestro código.
Push a Github10:45
Subamos nuestro código a Github
Update repositorio en Github6:05
Podemos hacer cambios en nuestro repositorio y compartir los cambios para que estén en el repositorio en línea. Actualizar nuestros repos es la forma de actualizar nuestra aplicación.
Deploy en Vercel8:02
Vamos a desplegar en Vercel sincronizando con nuestra cuenta de Github.
Update Deploy en Vercel5:21
Integración Continua suena a algo súper profesional, pero sin querer queriendo ya lo implementamos en nuestro proyecto. Veamoslo funcionando.
Más sobre Vercel4:13
Vercel nos ofrece muchas caracteríasticas que nos pueden servir mucho. Te invito a que conozcas un poco más de la plataforma y que conozcas las ventajas de usar este servicio.
Resumen de la sección3:27
Repasemos un poco lo que aprendimos en esta sección que fue pequeña pero que incluye temas que son importantes para tu futuro profesional.

Introducción a la sección1:41
Comenzamos nueva sección en la que aprenderemos conceptos nuevos que te permitirán mejorar como programador en NextJS.
¿Qué aprenderemos en esta sección?0:21
Creando nuestro proyecto3:50
Comencemos creando nuestro proyecto.
Github Copilot gratis5:54
Grabando este curso OpenAI liberó Github Copilot para usarlo completamente gratis en Visual Studio Code
¿Cómo funciona un API?6:14
Demos un vistazo de lo que vamos a construir en esta sección.
Body Request7:32
El body request es la información que nos envían en la petició Http, aprendamos como leer esta información dentro de nuestra ruta en NextJS.
Modelo de datos BodySendMailRequest7:53
Les recomiendo encarecidamente siempre configurar los tipos de datos de tus modelos.
Validaciones básicas11:36
Validemos de forma básica los datos que estamos recibiendo en nuestra request.
Crear Service5:44
Creamos el servicio para tener independiente la lógica que realiza el envío del correo.
Configurar nuestra Contraseña de Aplicación en Gmail4:47
Configuramos el servicio de Gmail para poder usar el servidor para realizar envío de correos desde nuestra aplicación.
Variables de entorno4:59
Configuremos correctamente nuestras variables de entorno.
Configurando Nodemailer11:36
Para el envío de correos usaremos la librería Nodemailer para nodejs, veremos con instalarla y usarla.
Parámetro From y TryCatch6:32
Validación From1:43
Agregamos un parámetro más en lo que vamos a recibir, así que tenemos que validar este campo.
Maquetando formulario8:48
Vamos a probar nuestro servicio desde un frontend de nuestro mismo proyecto. Comencemos maquetando el formulario.
Funcionamiento formulario7:29
Demosle vida a nuestro formulario para obtener la información que vamos a enviar a nuestra api.
Request desde el frontend (success/error)12:45
Probemos nuestro servicio enviando correos desde el frontend
Deploy a Vercel9:39
Para tener nuestro servicio funcionando en línea vamos a usar Vercel para hacer un despliegue de nuestro proyecto.
Resumen de la sección5:04
Repasemos lo que aprendimos en esta sección.
Proyecto Final0:13

Introducción a la sección2:04
Temas que veremos0:14
Creando List DragonBall2:59
Nueva sección, nuevo proyecto
Header5:25
Creemos un header para poder verlo en cualquier pantalla de nuestra aplicación.
Tarea Obtener Información1:46
Ya vimos como obtener esta información en secciones anteriores. Así que como tarea te dejaremos hacerlo para este proyecto.
Solución Tarea - Obtener Información10:52
Obtengamos la información para nuestra aplicación.
Solución Tarea - Obtener Información 25:59
Hay que darle estilos a nuestras cards.
Image LazyLoad3:06
Esta es una característica muy buena que trae NextJS que nos permite carga perezosa para las imágenes.
Single Character Page8:48
Creemos la página de cada uno de los characteres
Get Single Character Information7:40
Obtengamos la información de los characteres de forma individual.
Not Found7:14
Solucionamos el error de characters no encontrados.
Cache6:04
Una herramiento muy poderosa es el cache para optimizar las peticiones online. Con NextJS es super fácil hacer esto.
Resumen de la sección2:40
Repacemos la sección.
Código de la sección0:15

Introducción a la sección6:15
Veremos una de las capacidades más impresionantes que tiene NextJS y es la generación de contenido estático a partir de contenido dinámico.
Dynamic - Actualmente7:41
Veamos como funciona actualmente la aplicación.
generateStaticParams10:23
Cambiamos el funcionamiento de NextJS simplemente agregando una función a nuestra página.
Revalidate3:46
Para actualizar nuestros archivos estáticos de vez en cuando, para eso vamos a utilizar una extensión del funcionamiento del Fetch.
Metadata6:40
Generemos la información para nuestra metadata usando funciones especiales de NextJS
Fix Warnings5:06
Arreglemos los warnings que nos sugiere NextJS solucionar respecto a las imágenes.
Resumen de la sección3:48
Repasemos un poco lo que hemos hecho durante esta sección.
Repositorio de código0:10

Introducción a la sección4:30
Creando Proyecto - AgendaSASS7:19
Creando con Shadcn init3:02
Así funciona Shadcn6:14
¿Dónde está SRC?9:42
Supermaven4:08
Shadcn Components8:20
Fix React197:06
Conociendo V07:52
Hero5:55
Aplicando secciones4:39
Spoiler de tarea0:06
Solución de tarea10:25
Página de Login10:31
Dashboard13:43
Navegando a dashboard6:24
Resumen de la sección6:05
Descarga el Repositorio (recomendado)0:19

Requirements

Tener un computador y ganas de aprender. Todo lo necesario lo enseñaré durante el curso.
Conocimientos básicos en HTML, CSS y JAVASCRIPT

Description

Este curso te enseñará a crear aplicaciones web rápidas, dinámicas y escalables usando Next.js, el framework de ReactJS más popular para proyectos modernos. Aprenderás a manejar el renderizado del lado del servidor (SSR), la generación de sitios estáticos (SSG) y la optimización de aplicaciones web para un rendimiento superior. Además, explorarás cómo integrar API, manejar rutas dinámicas y desplegar tus proyectos en producción. Ideal para desarrolladores que buscan crear aplicaciones web avanzadas con las mejores prácticas de la industria.

Para crear nuestras aplicaciones utilizaremos TailwindCSS, Typescript y muchas herramientas que nos ayudarán a desarrollar rápido nuestras apps. Algunas cosas que aprenderemos son:

Introducción a Next.js y su ecosistema.
Instalación y configuración básica del proyecto.
Páginas y enrutamiento en Next.js.
Renderizado del lado del servidor (SSR).
Generación de sitios estáticos (SSG).
Renderizado híbrido (SSR y SSG combinados).
Pre-renderizado y optimización de SEO.
Manejo de rutas dinámicas y parámetros.
API Routes: Creación de APIs con Next.js.
Estilos globales y módulos CSS en Next.js.
Integración de bases de datos y servicios externos.
Despliegue en plataformas como Vercel.
Optimización de imágenes y recursos estáticos.
Autenticación y protección de rutas.
Manejo de Layouts
Solicitud de recursos via HTTP requests
Estilos con TailwindCSS
Javascript con tipos con Typescript.
Shadcn/UI
V0 dev
Cookies
Middleware

Al terminar el curso conocerás como crear y desplegar tus aplicaciones en NextJS y en Vercel.

Who this course is for:

Interesando en aprender desarrollo web fullstack
Desarrolladores Frontend principiantes: Conocen HTML, CSS y JavaScript y quieren aprender frameworks.
Desarrolladores React: Buscan expandir su conocimiento con Next JS.
Desarrolladores Full Stack: Quieren optimizar el desarrollo web moderno.
Emprendedores o freelancers: Buscan crear aplicaciones web rápidas y eficientes.
Diseñadores web: Quieren pasar del diseño al desarrollo de aplicaciones dinámicas.

NEXT JS 15+ Framework de Producción para ReactJS [2026]

What you'll learn

Explore related topics

Course content

Conceptos básicos de Next.js22 lectures • 2hr 17min

Tipos de Renderizados30 lectures • 3hr 57min

Deploy de nuestra aplicación9 lectures • 49min

Send Emails - API20 lectures • 2hr 4min

Dragon Ball Characters - Optimizaciones14 lectures • 1hr 5min

Generación Estática8 lectures • 44min

AgendaSASS - Shadcn/UI - V018 lectures • 1hr 56min

Cookies + Middleware15 lectures • 1hr 22min

Server Actions12 lectures • 49min

Authentication Supabase20 lectures • 2hr 28min

Requirements

Description

Who this course is for: