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. Caché y caché components
10. Revalidar e invalidar caché
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. 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

$60.00
405 lecciones
37 horas de contenido en video
Fernando Herrera

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.

$60.00

Promociones y descuentos aplican.

COMPRAR AHORA

¿Listo para explorar sin límites?

✦— Elige tu suscripción DevTalles PRO

Devtalles PRO Mensual

^USD18

¡Empieza hoy!

SABER MÁS

DevTalles PRO Trimestral

^USD54

3 meses para subir de nivel.

SABER MÁS

DevTalles PRO Semestral

^USD108

Especializate en 6 meses.

SABER MÁS

DevTalles PRO Anual

✦ El mejor valor

^USD198

12 meses por el precio de 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

Sección 1: Introducción

Sección 2: Introducción a Next.js

Sección 3: Despliegues a Vercel y Docker Images

Sección 4: Server Side + Cliente Side Rendering

Sección 5: Generación dinámica - SSR

Sección 6: Incremental & Static Generation

Sección 7: Global State - Redux y LocalStorage

Sección 8: Estado Global - Favoritos

Sección 9: Next API Routes - RESTful Api Handlers

Sección 10: Next + RestAPI - AdminTodos

Sección 11: Server Actions - Optimistic Updates - Next 14+

Sección 12: Cookies - Server y Client Side

Sección 13: Auth.js - Autenticación de protección de rutas

Sección 14 - E-Commerce - Diseño - TesloShop

Sección 15 - E-Commerce - Diseño parte 2

Sección 16 - Preparación de base de datos

Sección 17 - Paginación del lado del servidor

Sección 18 - Pantalla de Producto

Sección 19 - Carrito de compras

Sección 20 - NextAuth

Sección 21 - Dirección de entrega

Sección 22 - Creación de Ordenes

Sección 23 - Pagos - PayPal

Sección 24 - Mantenimientos administrativos

Sección 25 - Desplegar Tienda

Sección 26 - Cierre del curso

Acerca de este curso

Node.Js: De cero a experto

Nest: Desarrollo backend escalable con Node

Docker - Guía práctica de uso para desarrolladores

$60.00

Devtalles PRO Mensual

DevTalles PRO Trimestral

DevTalles PRO Semestral

DevTalles PRO Anual