Next.js: El framework de React

Next.js: El framework de React para producción

Next.js te brinda una excelente experiencia de desarrollo con todas las funciones que necesita para la producción: renderizado híbrido estático y de servidor, compatibilidad con TypeScript, agrupación inteligente, precarga de rutas y más.

Adquirir Ahora Vista previa gratis

{CONTENIDO DEL CURSO}

1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la sección
5. Generación estática y Revalidación
6. Consideración importante
7. Tarea - Generación estática
8. Resolución de la tarea
9. Revalidación - Sin Fetch API
10. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Antes de comenzar - Materiales adicionales
5. Continuación de la aplicación
6. Instalación y configuración de Redux Toolkit
7. Counter Slice
8. Exportando redux toolkit hooks
9. Counter Reducer y acciones
10. Server al client state
11. Tarea - Store, Props y Links
12. Solución de tarea
13. RESTful Api - Get Counter
14. Valor del counter desde API
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección
4. PokemonSlice
5. Mostrar cambios en el UI - Favoritos
6. Toggle Favorite
7. Página de favoritos
8. Mantener favoritos
9. Almacenar en LocalStorage
10. Redux Toolkit - Middlewares
11. Localstorage build time error
12. Server Components + LocalStorage
13. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Inicio de proyecto - AdminTodo
5. Configurar Postgres localmente
6. Recomendaciones - README.md
7. Prisma + NextJs
8. Conectar Prisma con Next
9. Generar semilla de base de datos
10. Listar todas las entradas
11. Paginación simple
12. Retornar una única entrada
13. POST - Crear una nueva entrada
14. Yup - Validation Schema
15. Actualizar entradas - PUT
16. Validaciones en la actualización
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de proyecto
5. Prisma CLI reference
6. Tarea - Estructura del proyecto
7. Resolución de la tarea
8. Sistema de navegación
9. Listar las entradas
10. Estructura y diseño de los TODOs
11. Estructura y diseño - Parte 2
12. Actualizar Todo
13. Actualizar Server Component
14. Crear un TODO
15. Solución de la tarea
16. Eliminar completados
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la aplicación
5. Preparar pantalla de Server Actions
6. Server Actions - Toggle Todo
7. Crear un nuevo Todo
8. Eliminar completados
9. useOptimistic Hook - React
10. Revalidación de la data
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la aplicación
5. Introducción a las cookies
6. Diseño de pantalla y componentes
7. Cookies - Client Side
8. Cookies - Server Side
9. Diseño de pantalla de productos
10. Mostrar listado de productos
11. Shopping-Cart - Client Side
12. Shopping-Cart - Server Side
13. Eliminar productos del carrito
14. Diseño de la pantalla de carrito
15. Tarea - Agregar y eliminar
16. Total + impuesto
17. Detalle final
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de aplicación
5. Auth.js - Configuraciones iniciales
6. GithubProvider
7. Información del usuario - Server Side
8. Tarea - Mostrar información del usuario
9. Información del usuario - Client Side
10. Google Provider
11. Logout y SignIn
12. Prisma Adapter - AuthJS
13. UUID en lugar CUID
14. Campos adicionales al usuario
15. Modificar Auth.js User
16. CredentialsProvider
17. Relaciones y semilla de base de datos
18. Todos por usuario
19. Crear TODO con usuario
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - TesloShop
4. NextJS Fonts
5. Estructura de directorios y primeras páginas
6. Creando rutas de la aplicación
7. TopMenu
8. Página 404 - Categorías
9. Página 404 - Personalizada
10. Componente - Title
11. Grid de Productos
12. Tarjeta de producto
13. Cambiar imagen - MouseOver
14. Menú lateral - Primera parte
15. Menú lateral - Segunda parte
16. Zustand - UI Store
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Continuación de la aplicación
5. Tarea - Pantalla de categorias
6. Pantalla de producto
7. Selector de tallas
8. Selector de cantidad
9. Slideshow de imágenes
10. Slideshow con Thumbs - Parte 1
11. Slideshow con Thumbs - Parte 2
12. Slideshow mobile
13. Pantalla carrito de compras
14. Pantalla carrito de compras - Parte 2
15. Pantalla de dirección del cliente
16. Pantalla de verificación de compra
17. Pantalla de orden de pago
18. Pantalla de ordenes de compra
19. Pantalla de carrito de compras vacío
20. Footer - Pie de página
21. Login - Registro y Auth Layout
22. Detalle estético del carrito de compras
23. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de proyecto
5. PostgreSQL - Base de datos relacional
6. Conectarnos a la base de datos - Table Plus
7. Configurar Prisma Client
8. Esquema de Prisma
9. Esquema de Prisma - Parte 2
10. Semilla de base de datos - Configuración inicial
11. Prisma Client - Borrar contenido de tablas
12. Semilla de base de datos - Categorías
13. Semilla de base de datos - Relación Productos - Categorías
14. Semilla de base de datos - Productos
15. Semilla de base de datos - ProductImages
16. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de proyecto
5. Cargar productos de base de datos
6. Mostrar productos en pantalla
7. Paginación manual
8. Controlar cuando no hay productos en la página
9. Paginación - Determinar el total de páginas
10. Paginación - Componente HTML
11. Paginación - Funcionamiento
12. Paginación - Generar el número de páginas
13. Paginación - Mostrar el número de páginas
14. Tarea - Productos por género
15. Solución de la tarea - Productos por género
16. Revalidación de rutas
17. Generar el build de producción
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la aplicación
5. Cargar producto por SLUG
6. Client Side - Sólo lo necesario
7. Resolución de la tarea - Cargar existencias
8. Skeleton - Mostrar loading en el stock
9. Optimizando Metadata
10. Probar enlaces para compartir
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de proyecto
5. Client Side - Tallas y Cantidad
6. Client Side - Tarea con la cantidad
7. Mensaje de error si no hay talla seleccionada
8. Client Side - Cart Store
9. Store - addProductToCart
10. Agregar producto al carrito de compras
11. Hacer persistente el carrito de compras
12. Mostrar número de elementos en el carrito
13. Mostrar los elementos del carrito de compras
14. Cambiar cantidad desde el carrito de compras
15. Remover producto del carrito
16. Resumen de la orden
17. Formato de moneda
18. Carrito de compras vacío
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la sección
5. Agregar autenticación - NextAuh
6. Configuración de Credentials Provider
7. Conectar Login Form con NextAuth
8. Modelo de Usuario
9. SEED - Insertar usuarios
10. Validar usuario - NextAuth
11. Mejorar la experiencia de usuario
12. Server Side - Saber el usuario conectado
13. Cerrar sesión
14. Redirección manual después del login
15. Client Side - Obtener la sesión
16. Mostrar y ocultar opciones del menú
17. Expandir el objeto de sesión
18. Tarea - Mostrar y ocultar opciones según rol
19. Formulario para crear usuarios
20. Mostrar errores en pantalla
21. Server Action - Crear usuario
22. Autenticar después de crear usuario
23. Middleware
24. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la aplicación
5. Formulario de dirección
6. Controlar el formulario - useForm Hook
7. Seed Countries
8. Resolución de la tarea
9. Mostrar los países en el formulario
10. Zustand - Almacenar la dirección
11. Guardar y cargar de Zustand la dirección
12. Dirección del usuario - Relación 1 a 1
13. Server Action - Guardar y actualizar dirección
14. Guardar y eliminar la dirección
15. Eliminar la dirección de base de datos
16. Cargar la dirección desde el servidor
17. Tarea - Agregar la ciudad en la base de datos
18. Nota de actualización
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo de la sección
4. Continuación de proyecto
5. Pantalla de confirmación - Parte 1
6. Pantalla de confirmación - Parte 2
7. Bloquear botón y mensajes de error
8. Modificaciones a nuestro esquema
9. Actualizar nuestro seed
10. Colocar orden - Server Action
11. Colocar orden - Productos y cantidades
12. Colocar orden - Total, SubTotal e Impuesto
13. Colocar orden - Transacción - Múltiples inserciones y actualizaciones
14. Transacción - Crear Encabezado y Detalle
15. Transacción - Insertar la dirección
16. Transacción - Actualizar inventario
17. Mensaje de error y navegar a la página de orden
18. Pantalla de orden por ID
19. Resolución de la tarea - Pantalla de Orden
20. Listado de ordenes
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la sección
5. Modificaciones adicionales en la orden
6. PayPal developer dashboard
7. Botones de Paypal
8. Mostrar Skeleton mientras se carga
9. Crear orden de pago - PayPal - TransactionID
10. Server Action - Actualizar el TransactionID
11. Postman - Verificar pagos desde PayPal
12. Server Action - Verificar Pago - Parte 1
13. Server Action - Verificar Pago - Parte 2
14. Server Action - Verificar el pago en PayPal
15. Server Action - Marcar order como pagada
16. PayPal - Invoice ID
17. Ocultar botones si está pagada la orden
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de la sección
5. Visor de ordenes
6. Cambiar roles de usuario - Diseño de pantalla
7. Server Action - Cambiar rol del usuario
8. Guard de protección de rutas administrativas
9. Listado de productos
10. Pantalla de Producto
11. Tarea - Cargar categorías
12. Cargar formulario con el producto
13. Mostrar imágenes actuales del producto
14. Mostrar las tallas seleccionadas
15. Server Action - Esquema de validación de objetos
16. Actualizar producto
17. Crear un producto
18. CustomImage - Componente
19. Invalidar Paths y Redireccionar
20. Server Action - Carga de archivos
21. Cargar a Cloudinary
22. Insertar registro de imágenes en base de datos
23. Server Action - Eliminar imagen
24. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
4. Continuación de proyecto
5. Revisión y corrección de Warnings y Errores
6. Aprovisionar base de datos
7. Preparación para despliegue
8. Desplegar a Vercel
1. Más información sobre nuestros otros cursos
2. Fin del curso

Acerca de este curso

$50.00
405 lecciones
36.5 horas de contenido en video
Fernando Herrera

{REQUISITOS}

• Conocimiento básico de React con Hooks es necesario
• NO es necesario saber TypeScript (pero será útil)
• NO es necesario saber Node (pero será útil)
• NO es necesario saber Next para empezar este curso

{DESCRIPCIÓN}

Next.js: El framework de React para producción (Versión de Next.js 13+, 14+)

Este curso está enfocado para las personas con conocimiento básico de React que desean aprender Next.js de forma completa e ir más allá.

Estos son algunos de los temas que aquí veremos:

• Next.js desde cero
• TypeScript + React + Next.js
• Migración de proyectos de Next.js de JavaScript a TypeScript
• Diferentes estrategias de renderizado
• Rutas dinámicas y segmentos
• Next.js restful API
• Autenticación personalizada
• Despliegues en varias plataformas
• Generación de imagen de docker optimizada
• Autenticación personalizada con JWT
• MongoDB
• PostgreSQL
• NextAuth
• Proveedores de autenticación
• Drag&Drop en React
• CRUD
• Zustand
• Material UI y Next UI
• Re-despliegues automáticos
• Pagos con PayPal y Tarjeta de crédito
• Diseño responsivo
• Sitio de venta de artículos con:
- Búsquedas
- Cookies
- ISR + SSR + SSG + CSR según la necesidad para optimizar tiempos de respuesta
- Manejo de usuarios
- Dashboard administrativo
- Carga de imágenes
- Validación de pagos
• React Hook Form
• Cookies
• Middlewares de Next.js (Nuevo en Next.js 12)
- Para autenticación
- Protección de rutas
- Redirecciones
- Respuestas, tanto para APIs como para solicitudes de páginas
• Y mucho más...

Este curso tiene por objetivo enseñarte Next.js de forma completa con muchas tareas y ejercicios. El curso es en 95% TypeScript, pero cuenta con las referencias propias para reforzar esta parte que es opcional, el curso se puede hacer en JavaScript, pero recomiendo que le den la oportunidad a TypeScript.

Se crean varios ejercicios dentro de este curso:

• Introducción a Next: Ejercicio pequeño para el manejo de generalidades de Next,js
• PokemonApp: Aplicación pequeña para el manejo de ISR y SSG
• OpenJira: Aplicación intermedia para el manejo de tareas y SSR
• CookieMaster: Aplicación pequeña para aprender sobre el manejo de Cookies
• TesloShop: Aplicación completa y bastante grande para el manejo y venta de productos

Al final del curso no solo aprenderás Next.js, si no, que también habrás desarrollado una tienda electrónica con cobros, mantenimientos, carga, optimizaciones para SEO, desplegarla y tenerla en tu portafolio de proyectos.

Es un curso enorme totalmente enfocado en Next.js para prepararte mejor como desarrollador de React.

{CURSOS QUE PODRÍAN INTERESARTE}

OFERTAS→ RECURSOS GRATUITOS→

{PAGO ÚNICO}

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos aplican.

COMPRAR AHORA

Suscripción
Devtalles PRO Mensual

^USD16

SABER MÁS

Suscripción
DevTalles PRO Trimestral

^USD48

SABER MÁS

Suscripción
DevTalles PRO Semestral

^USD96

SABER MÁS

Suscripción
DevTalles PRO Anual

^USD176

12 meses por el precio 11

SABER MÁS

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en React, te invitamos a seguir las Rutas de aprendizaje de React, diseñadas para que sigas aprendiendo.

Ver rutas