Next.js: El framework de React

Next.js - 12: Traditional Pages Router

NextJS lleva React al servidor para generar contenido renderizado estático, híbrido y granular, el cuál es perfecto para SEO, CMS, commerce y más.

Descubre una versión actualizada de este curso aquí mismo

Adquirir Ahora Vista previa gratis

Contenido del curso

1. Introducción
  PRUEBA GRATIS
2. ¿Cómo funcionará el curso?
  PRUEBA GRATIS
3. ¿Cómo hacer preguntas?
  PRUEBA GRATIS
4. Instalaciones recomendadas
  PRUEBA GRATIS
5. ¡Únete a Nuestra Comunidad de DevTalles en Discord!
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación del proyecto - Demo Inicial
4. Migrar proyecto de JavaScript a TypeScript
5. Archivos de JavaScript a TypeScript
6. Migrando _app.jsx a _app.tsx
7. Desplegando nuestra aplicación
8. Desplegando en Vercel
9. Generando imagen de Docker
10. Levantar la imagen de Docker
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. Inicio de sección - PokemonStatic
5. Eliminando todo lo innecesario de mi proyecto
6. NextUI - React UI Library
7. Next.js _document
8. Implementando el tema Dark
9. Layout principal
10. Creando una barra de navegación
11. Next - GetStaticProps
12. Cargar de forma estática los Pokemons
13. Colocar el tipo de respuesta de Axios
14. Tarea - Mostrar nombre y número del pokémon
15. Mostrar tarjetas de Pokémons
16. Componente para las tarjetas
17. Recibir argumentos por URL y navegación
18. Next - getStaticPaths
19. Generando las 151 páginas de Pokémons
20. Diseño de la página de Pokémon
21. Tarea - Navegación y página de favoritos
22. Resumen de la sección
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
  PRUEBA GRATIS
4. Continuación de la sección
5. Guardar en LocalStorage
6. Grabar en localStorage un arreglo de Pokémons
7. Leer y verificar si existe en favoritos
8. Pantalla de Favoritos
9. Construir el listado de Pokémons favoritos
10. Tarea - Mejorar la lectura de nuestra página
11. Librerías externas - Canvas-Confetti
12. Tarea - Pokémon por nombre
13. Resolución de la Tarea - Pokémon por nombre
14. Optimizar la data necesaria del pokémon
15. Centralizar la lectura de la data del pokémon
16. Open Graph Meta Tags
17. Desplegando en Vercel
18. Actualizando sitio web en Vercel
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
  PRUEBA GRATIS
4. Continuación de proyecto
5. Incremental Static Regeneration (ISR)
6. Incremental Static Generation (ISG)
7. Tarea - ISG por nombre de Pokémon
8. 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 resultado final
  PRUEBA GRATIS
4. Inicio de proyecto - OpenJira
5. Instalación de Material-UI
6. Creando temas en Material-UI
7. Layout y Navbar
8. Resolución de la tarea
9. Implementar un Sidebar
10. UI Context
11. Context Provider
12. Pulir nuestro snippet
13. uiReducer + Snippet
14. Pulir el snippet del reducer
15. Usar el UI Context en nuestra aplicación
16. Resolución de la tarea - Sidebar
17. 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 proyecto - OpenJira
4. Diseño de la pantalla principal - index.tsx
5. EntriesContext - Contexto de las entradas
6. Interface Entry
7. EntryList y EntryCard - Componentes para mostrar entradas
8. Mostrar tarjetas basado en el estado de la entrada
9. Agregar entradas
10. Trabajar con nuestro formulario y estado
11. Insertar entrada en el estado global
12. Tarea - isAdding
13. Habilitar Drag and Drop - Manualmente
14. Cambiar aspecto visual cuando hacemos drag
15. Cambiar el estado del Entry
16. Cierre de la sección
17. 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. Docker-compose - Crear imagen de base de datos
5. Next.js - Restful API
6. Conectarnos a MongoDB con Mongoose
7. Variables de entorno en Next.js
8. Conectarnos a MongoDB desde el Restful API
9. Creando un esquema de Mongoose
10. Llenando la base de datos
11. Endpoint - Obtener todas las entradas
12. Leer las entradas desde el Backend
13. Crear una nueva entrada - Backend
14. Crear entrada desde el Frontend
15. Actualizar una entrada en particular - Backend
16. Terminar nuestro endpoint de actualización
17. Actualizar entrada desde el Frontend
18. Obtener entrada por ID
19. Middlewares - Breaking changes
20. Next.js Middleware
21. Middleware - Verificar que sea un MongoID
22. Nota de actualización
23. ARCHIVADO - Next.js _Middlewares
24. ARCHIVADO - Middleware - Verifica el ID de Mongo
25. ARCHIVADO - Middleware a sólo para ciertas rutas
26. Cierre 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 - FinOpenJira
4. Pantalla para editar una entrada
5. Pantalla de editar y agregar - Segunda Parte
6. Manejo del formulario
7. Validaciones del formulario
8. SSR - getServerSideProps
9. Navegar y cargar la entrada mediante SSR
10. Cargar información de la entrada
11. Guardar información de la entrada
12. Calcular tiempo desde la publicación
13. 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 - Cookie Master
4. Instalación de MaterialUI
5. Layout y Páginas adicionales
6. Página para cambiar el tema
7. LocalStorage vs Cookies
8. Leer las cookies
9. Leer cookies desde el Restful API
10. Cambiar el tema basado en la cookie
11. Generar la página con el tema solicitado
12. Establecer el theme usando la cookie - Frontend
13. Código fuente de la sección
1. Inicio de sección
2. Temas puntuales de la sección
3. Demostración de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - TesloShop
5. Nota informativa
6. Instalación y configuración de Material UI
  PRUEBA GRATIS
7. Nota de actualización - Next13 Link
8. Estructura de directorios y ShopLayout
9. Navbar
10. Página 404 personalizada
11. Home Page - Temporal
12. SideMenu - Menú lateral
13. Componente para mostrar productos
14. Terminar el Product Card
15. Pantalla de producto
16. Slideshow de las imágenes
17. Contador para agregar al carrito
18. Selector de tallas
19. Página de carrito de compras vacío
20. Página de carrito de compras
21. Mostrar productos del carrito de compras
22. Resumen de la Orden
23. Formulario de dirección
24. Resumen de la orden
25. Página de pago
26. Historial de ordenes
27. AuthLayout
28. Página de registro
29. 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 - Teslo Store
5. Preparar la base de datos local
6. Mongoose y Modelo de Producto
7. Llenar base de datos y Conexión a Mongo
8. REST - Obtener todos los productos
9. REST - Aplicar filtros a la consulta
10. REST - Obtener producto por Slug
11. REST - Búsqueda de productos
12. Cierre de la sección
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
  PRUEBA GRATIS
4. Continuación de la sección -TesloShop
5. SWR - React Hooks for Data Fetching
6. Custom Hooks y configuración Global SWR
7. Mostrar una pantalla de carga
8. Mostrar textos cuando la imagen está cargada
9. Pantalla de productos de hombres, mujeres y niños
10. Mostrar en el menú la página activa
11. UI Context
12. Tarea - Mostrar y navegar
13. Pantalla de un producto
14. getServerSideProps - Producto
15. Resolver el inconveniente de llaves duplicadas
16. GetStaticPaths y GetStaticProps
17. Resolución de la tarea - GetStaticPaths y GetStaticProps
18. Página de búsquedas
19. Realizar la búsqueda mediante SSR
20. Mejorar la experiencia de usuario en la búsqueda
21. Solución a la tarea
22. Mostrar y ocultar texto de búsqueda (Desktop)
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 la sección
5. Cart Context e interfaces
6. Producto no disponible
7. Validar que seleccione una talla
8. Contador de productos
9. Resolución de la tarea
10. Tarea - Agregar al carrito
11. Soluciones a la tarea
12. Solución final
13. Almacenar el carrito en cookies
14. Mostrar productos del carrito de compras
15. Actualizar cantidad desde el carrito
16. Remover productos del carrito de compras
17. Calcular montos a pagar
18. Colocar montos en pantalla
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. Modelo de Usuario
6. Insertar usuarios de prueba
7. REST - Login
8. Crear JWT - JsonWebToken
9. REST - Registro de un usuario
10. Validar correo electrónico
11. Validar y renovar JWT
12. Formulario de Login - React Hook Form
13. Validaciones del formulario
14. Realizar validación contra el backend
15. Mostrar mensaje de error en pantalla
16. Pantalla de registro
17. AuthContext
18. Disparar acciones de Login
19. Disparar acciones de Registro
20. Recuperar el estado de autenticación del usuario
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 proyecto
5. Estilo condicional en el menú lateral
6. Logout y redirección a la última página vista
7. Mantener el query parameter después de crear un usuario
8. Mostrar página de carrito vacío
9. Verificar autenticación Server Side
10. Middleware de autenticación
11. Datos de la dirección
12. Resolución de la tarea - Dirección
13. Recargar la dirección de la persona
14. Actualizar dirección del contexto
15. Mostrar la dirección en pantalla
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
  PRUEBA GRATIS
4. Continuación de la aplicación
5. Instalación de NextAuth
6. Configuración de NextAuth + GitHub
7. Obtener información de la session
8. Proveedor - Credenciales
9. NextAuth Callbacks
10. Verificar correo y contraseña - Credentials
11. NextAuth - Signout
12. Crear usuario basado en OAuth
13. NextAuth - Login Personalizado
14. Especificar la duración de la sesión
15. Proveedores en nuestro login
16. Next 13 - Middleware con Next Auth
17. Asegurarnos que tenemos una dirección
18. Código fuente de la sección
19. Archivado - NextJs Middlewares con Next Auth
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. Modelo e Interfaz de Órdenes
6. Order Model
7. Rest - Crear una orden
8. Crear una nueva orden - Body
9. Nota de actualización
10. Crear orden - Backend
11. Crear orden - Backend Parte 2
12. Breve resumen del proceso anterior
13. Prevenir doble posteo y detalles finales del resumen
14. Orden incorrecta y limpiar estado
15. Obtener una orden por ID
16. Mostrar orden en pantalla
17. Solución de la tarea - Valores de la orden
18. Historial de ordenes
19. Solución de la tarea
20. 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
  PRUEBA GRATIS
4. Continuación de sección
5. Modificaciones adicionales en la orden
6. Paypal developer dashboard
7. Botones de Paypal
8. Verificar pago desde el Backend
9. Paypal OAuth Token
10. Confirmar orden pagada mediante PayPal
11. Actualizar la pantalla de pagos
12. Mejorar la experiencia del usuario
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
  PRUEBA GRATIS
4. Continuación de la aplicación
5. Admin Dashboard
6. Página principal del Dashboard Administrativo
7. Tarea - Rest API - Información estadística
8. Resolución de la tarea
9. Mostrar estadísticas en el dashboard
10. Middlewares para validar autenticación
11. REST - Mantenimiento de usuarios
12. Mostrar listado con todos los usuarios
13. Cambiar el rol del usuario
14. Mostrar cambio en tiempo real
15. REST - Obtener todas las ordenes
16. Mostrar todas las órdenes
17. Ver detalle de la orden
18. Corregir la interfaz
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
  PRUEBA GRATIS
4. Continuación de la sección
5. REST - GetProductos
6. Listado de productos
7. Diseño de página de producto administrativo
8. Conectar los campos con React Hook Form
9. Llenar radio buttons
10. Trabajar los check de tallas
11. Sugerir un SLUG automático
12. Manejo de las etiquetas de producto
13. REST - Actualizar Producto
14. Actualizar Producto
15. REST - Crear Producto
16. Crear Producto
17. Preparar selección de archivos
18. REST - Subir archivo
19. NO HACER - Almacenar imágenes el file system
20. Preparar claves de Cloudinary
21. Subir imagen a Cloudinary
22. Actualizar imagen del producto
23. Mostrar imágenes de FileSystem y Cloudinary
24. Revisar los lugares donde tenemos nuestras imágenes
25. 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. Preparar base de datos
6. Desplegar aplicación en Heroku
7. Desplegar en Heroku - Parte 2
8. Arreglar redirecciones de autenticación
1. Nota de actualización: Next.JS 13
2. Más información sobre nuestros otros cursos
3. Despedida del curso

Acerca de este curso

401 lecciones
46 horas de contenido en video
USD 50.00

Descripción del Curso

Bienvenidos a nuestro curso Next.js - 12: Traditional Pages Router

Este curso se puede seguir en las últimas versiones de Next, pero es específicamente para personas que quieran trabajar con la versión de Pages Router, usar getServerSideProps, getStaticPaths (etc), en lugar de las nuevas características introducidas en Next 13+,... si estás empezando con NextJS, te recomendamos el curso nuevo, ya que este es para una forma de trabajar en Next específica.

Cursos que podrían interesarte

+DevTalles

Este segmento es exclusivo para sesiones en vivo con Fernando Herrera. Durante estas podrás realizar preguntas relacionadas al contenido de sus cursos y participar de forma interactiva con los panelistas. Se incluyen grabaciones de sesiones pasadas.

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 pueden aplicar.

Comprar ahora

Suscripción
Devtalles PRO Mensual

^USD16

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante el mes de vigencia.

Suscripción
DevTalles PRO Trimestral

^USD48

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante 3 meses de vigencia.

Suscripción
DevTalles PRO Semestral

^USD96

Suscribirme ahora

Acceso ilimitado a toda la plataforma, cursos, clases en vivo, acceso anticipado a cursos durante los 6 meses de vigencia.

Suscripción
DevTalles PRO Anual

^USD176

El mejor precio disponible

Suscribirme ahora

Adquiere 1 año entero de suscripción al precio de 11 meses. Obtienes acceso ilimitado a toda la plataforma, comunidades, cursos, clases en vivo, acceso anticipado a una comunidad exclusiva y cursos en construcción.

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en React, te invitamos a seguir el Programa React Expert diseñado para que sigas aprendiendo.

Ver programas

Next.js - 12: Traditional Pages Router

Contenido del curso

Sección 1: Introducción

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

Sección 3: TypeScript - Despliegues y Docker

Sección 4: Static Generated App - Pokemon Static

Sección 5: Pokemon Static - Continuación

Sección 6: Incremental Static Regeneration (ISR) e Incremental Static Generation (ISG)

Sección 7: OpenJira - Ejercicio con MaterialUI

Sección 8: OpenJira - Manejo de entradas

Sección 9: OpenJira - Next.js API

Sección 10: Server Side Props - Fin de OpenJira

Sección 11: Cookies - CookieMaster App

Sección 12: Teslo-shop - Tienda en Next.js

Sección 13: Teslo Store - Database y RestFul

Sección 14: SWR - React Hooks for Data Fetching

Sección 15: Carrito de compras

Sección 16: Autenticación personalizada mediante JWT - Json Web Token

Sección 17: Estilos condicionales Admin - Cliente

Sección 18: Next Auth

Sección 19: Manejo y creación de órdenes

Sección 20: Pagos con PayPal y tarjeta de crédito

Sección 21: Panel de administración

Sección 22: Mantenimiento de productos

Sección 23: Desplegar Teslo Shop en producción

Sección 24: Cierre del curso

Acerca de este curso

Descripción del Curso

Cursos que podrían interesarte

+DevTalles

React: De cero a experto ( Hooks y MERN )

React Native CLI: Aplicaciones nativas para IOS y Android

TypeScript: Tu completa guía y manual de mano.

Pago único

$50.00

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual

¿Cuál es el siguiente paso?

Sección 1: Introducción

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

Sección 3: TypeScript - Despliegues y Docker

Sección 4: Static Generated App - Pokemon Static

Sección 5: Pokemon Static - Continuación

Sección 6: Incremental Static Regeneration (ISR) e Incremental Static Generation (ISG)

Sección 7: OpenJira - Ejercicio con MaterialUI

Sección 8: OpenJira - Manejo de entradas

Sección 9: OpenJira - Next.js API

Sección 10: Server Side Props - Fin de OpenJira

Sección 11: Cookies - CookieMaster App

Sección 12: Teslo-shop - Tienda en Next.js

Sección 13: Teslo Store - Database y RestFul

Sección 14: SWR - React Hooks for Data Fetching

Sección 15: Carrito de compras

Sección 16: Autenticación personalizada mediante JWT - Json Web Token

Sección 17: Estilos condicionales Admin - Cliente

Sección 18: Next Auth

Sección 19: Manejo y creación de órdenes

Sección 20: Pagos con PayPal y tarjeta de crédito

Sección 21: Panel de administración

Sección 22: Mantenimiento de productos

Sección 23: Desplegar Teslo Shop en producción

Sección 24: Cierre del curso

Acerca de este curso

+DevTalles

React: De cero a experto ( Hooks y MERN )

React Native CLI: Aplicaciones nativas para IOS y Android

TypeScript: Tu completa guía y manual de mano.

$50.00

Suscripción Devtalles PRO Mensual

Suscripción DevTalles PRO Trimestral

Suscripción DevTalles PRO Semestral

Suscripción DevTalles PRO Anual

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual