Curso Completo de Next.js paso a paso

⚡ Curso Completo de Next.js

Índice general del curso con todas las lecciones, quizzes y proyectos para dominar el framework de React moderno.

I. Fundamentos e Introducción

• 🚀 Introducción a Next.js y su ecosistema
• ⚙️ Instalación de Next.js paso a paso
• 📁 Estructura de carpetas y archivos del proyecto
• 🧭 Ruteo básico en Next.js (App Router)
• 💡 Pages vs. App Directory: diferencias y usos
• 🎨 Componentes y estilos con CSS, Sass y Tailwind
• 📦 Importación y modularización de componentes
• 🧩 Quiz Nº 1 — Fundamentos de Next.js



II. Rutas, Navegación y Renderizado

• 🛣️ Navegación entre páginas con Link y useRouter
• 🔄 Tipos de renderizado (SSR, SSG, ISR, CSR)
• 🧠 getStaticProps, getServerSideProps y getStaticPaths
• 📡 Fetching de datos desde APIs externas
• 💬 Layouts y páginas dinámicas
• 🗂️ Anidación de rutas y segmentación dinámica
• 🧠 Quiz Nº 2 — Rutas y Renderizado



III. Datos, APIs y Estado

• 🔗 API Routes en Next.js
• 📬 Peticiones HTTP con fetch y Axios
• 🧩 Manejo de estado global (Context API / Zustand)
• ⚡ React Query y manejo de caché de datos
• 🧱 Formularios y validaciones con React Hook Form
• 💾 Conexión a bases de datos (MongoDB / Prisma)
• 🧩 Quiz Nº 3 — APIs y Gestión de Datos



IV. Autenticación, Seguridad y Middleware

• 🔐 Autenticación con NextAuth.js
• 🛡️ Middlewares y protección de rutas
• 👤 Autorización basada en roles
• 📱 JWT y cookies seguras
• 🧩 CSRF y mejores prácticas de seguridad
• 🧠 Quiz Nº 4 — Seguridad y Middleware



V. Optimización, SEO y Rendimiento

• 🔍 SEO en Next.js (Metadata, Head, sitemap.xml)
• 🖼️ Optimización de imágenes con next/image
• ⚙️ Caching, ISR y revalidación de datos
• 🚀 Performance y Lighthouse
• 📈 Análisis y medición de Core Web Vitals
• 🧩 Quiz Nº 5 — SEO y Optimización



VI. Despliegue y Herramientas Avanzadas

• ☁️ Despliegue en Vercel
• 🧰 Variables de entorno (.env.local)
• 🌐 Configuración CORS y proxies
• 📦 Integración con APIs externas (Stripe, Firebase, etc.)
• 💻 Integración con TypeScript
• 🧪 Testing con Jest y React Testing Library
• 🧠 Quiz Nº 6 — Deploy y Entorno de Producción



VII. Proyectos Prácticos

• 📰 Proyecto 1 — Blog completo con Next.js y Markdown
• 🧭 Rutas dinámicas y pre-renderizado
• 🖼️ Imágenes optimizadas con next/image
• 💬 Comentarios con API Routes
• 📱 Proyecto 2 — Dashboard con autenticación y base de datos
• 🔐 Login con NextAuth
• 🧠 Roles de usuario y permisos
• 📊 Tablas dinámicas con SWR y APIs
• ⚡ Proyecto 3 — E-commerce con Next.js y Stripe
• 🛍️ Catálogo y carrito con Zustand
• 💳 Pasarela de pago con Stripe
• 🚀 Deploy final y optimización
• 🧭 Extras y Buenas Prácticas
• 🧩 Uso de server actions en Next.js 14
• 🪶 Animaciones con Framer Motion
• 🌿 Control de versiones con Git y GitHub
• 🏁 Retos prácticos para dominar Next.js