- 1

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados
01:38 - 2

Creación de Proyectos Next.js con TypeScript y App Router
10:22 - 3

Creación de Tienda Online con NextGIS y Shopify
06:42 - 4

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico
08:26 - 5

Implementación de Layouts en Next.js: Globales y Locales
06:58 - 6

Navegación Optimizada con Next.js Usando el Componente Link
04:46 - 7

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica
08:24 - 8

Uso de React Server Components en Next.js: Cliente vs Servidor
09:23 - 9

Arquitectura de Componentes para Landing Page en Next.js
09:13 Prueba tus conocimientos de los conceptos de Next.js
Creación de Tienda Online con NextGIS y Shopify
Clase 3 de 57 • Curso de Next.js 14
Contenido del curso
- 10

Implementación de CSS Modules en Next.js para Estilizar Componentes
06:46 - 11

Instalación y Configuración de Sass en Next.js
08:39 - 12

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web
04:41 - 13

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos
04:10 - 14

Optimización de Imágenes con Next.js: Uso de Next.Image
05:48 - 15

Optimización y Responsividad con NextImage en Next.js
09:33 - 16

Optimización de Fuentes de Google en Next.js con Roboto
04:39 - 17

Estilos Dinámicos en React con Classnames y useState
08:39 Confirma que ya sabes manejar estilos y estáticos en Next.js
- 18

Creación de Tienda en Shopify para Desarrollo con Next.js
04:18 - 19

Creación y uso de variables de entorno en Next.js
07:53 - 20

Consumo de APIs con Shopify y React Server Components
09:22 - 21

Implementación de Loader en Next.js para Carga de Productos
09:07 - 22

Implementación de Root Grouping en Next.js
06:34 - 23

Manejo de Errores en Next.js con React Error Boundary
08:19 Pon a prueba lo que aprendiste de data fetching en Next.js
- 24

Manejo de Errores y Páginas 404 en Next.js
09:17 - 25

React Server Components en Next.js: Renderizado y Optimización
10:12 - 26

Diferencias entre archivos Template y Layout en Next.js
05:57 - 27

Arquitectura Escalable para Aplicaciones de Software
08:23 - 28

Creación de APIs con Next.js y Road Handlers
07:54 - 29

Configuración y Creación de Colecciones en Shopify
05:53 - 30

Patrones de Fetching en Next.js: Secuencial y Paralelo
11:36 - 31

Filtrado Dinámico de Productos en Shopify mediante API Collections
10:36 - 32

Uso de searchParams y params en componentes React cliente-servidor
07:38 - 33

Implementación de la Vista de Producto en TypeScript y React
11:43 - 34

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas
10:31 - 35

Revalidación de Caché en Next.js: Endpoints por Tag y Path
11:20 - 36

Redirección en Next.js: Server y Client Components
06:34 - 37

Creación de un Componente React para Sanitizar HTML
10:26 - 38

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web
08:51 ¡Revisa los temas avanzados de Next.js en este quiz!
- 39

Implementación de API GraphQL en Shopify para Autenticación Segura
03:48 - 40

Uso de Server Actions en Next.js para Formularios React
06:22 - 41

Implementación de Signup con GraphQL y Shopify
12:56 - 42

Implementación de Cookies de Acceso en Shopify con Next.js
11:20 - 43

Implementación de Flujo de Login con Tokens y Cookies
07:50 - 44

Validación de Access Tokens en Next.js con GraphQL y Cookies
07:51 - 45

Implementación de Carrito de Compras con React Icons
11:37 - 46

Manejo de estado global con Sustant en Next.js 13
09:34 - 47

Implementación de Carrito de Compras en JavaScript y CSS
07:55 - 48

Solución de errores de hidratación en carritos con Next.js y Shopify
12:13 - 49

Implementación de Middlewares en Next.js para Control de Acceso
08:39
¿Cuál es el stack tecnológico para crear la tienda con Next.js?
Para desarrollar una tienda en línea usando Next.js, haremos uso de un stack tecnológico bien seleccionado que incluye Shopify, Postman y Vercel. Este conjunto de herramientas nos proporcionará un entorno completo para manejar tanto el front-end como el back-end de manera eficiente.
¿Qué es Shopify y cómo se utiliza?
Shopify es una plataforma de e-commerce que facilitará la creación y administración de nuestra tienda en línea. Nos permite gestionar productos, clientes y registrar ventas desde una interfaz intuitiva. Además, proporciona dos tipos de documentación esenciales:
- Administración: Ayuda a gestionar tu tienda, permitiéndote actualizar productos e interactuar con clientes.
- Storefront API: Usa GraphQL para conectar nuestro ecommerce con clientes externos. Está sumamente documentado para facilitar su uso.
¿Cómo se utilizará Postman en este curso?
Postman es una herramienta indispensable para realizar peticiones a APIs, tanto en GraphQL como en REST, lo que la convierte en una opción ideal para explorar y verificar las APIs de Shopify.
- Descarga y configuración: Puedes descargar Postman para Windows, Mac o Linux.
- Importación de configuraciones: Proporcionaremos archivos JSON que contienen las configuraciones necesarias para las colecciones y entornos en Postman.
¿Cuál es la función de Vercel en nuestro proyecto?
Vercel es la plataforma que utilizaremos para desplegar nuestra aplicación. Creada por la misma compañía que desarrolló Next.js, ofrece un proceso de despliegue simplificado que soporta Edge Functions, entre otros. Con solo un clic podremos desplegar nuestras aplicaciones Next.js.
¿Cómo configurar y usar Postman?
Postman será fundamental para interactuar con las APIs de Shopify y ejecutar nuestras consultas.
¿Cómo importar colecciones y entornos?
Para trabajar eficientemente, es crucial que importes las colecciones y entornos en Postman. Estos archivos JSON estarán disponibles para su descarga en la sección de recursos.
-
Importar colecciones:
- Navega a "Settings" > "Data" y selecciona "Import Data File".
- Importa el archivo de colecciones JSON provisto.
-
Importar entornos:
- Navega a "Environment" en Postman.
- Importa el archivo de entorno, como "FutureWord", que contiene variables clave como el token de autenticación y el nombre de la tienda.
Configuración de peticiones GraphQL en Postman
Para realizar consultas GraphQL con Postman, sigue estos pasos:
-
Crear una nueva colección:
- Renombra la colección, por ejemplo, "FutureWord GraphQL".
-
Configurar una nueva petición:
- Usa
Command-NoControl-Npara crear una petición. - Introduce el endpoint API de Shopify, por ejemplo,
https://tu-shopify-hostname/api/2023-04/graphql.json.
- Usa
-
Agregar headers necesarios:
- Incluye headers específicos de Shopify, especialmente el de autenticación, usando las variables de entorno configuradas.
-
Ejecutar queries:
- Redacta y ejecuta queries de GraphQL directamente desde Postman.
Estas configuraciones asegurarán una conexión eficaz con las APIs, permitiendo la exploración y manipulación de datos en Shopify.
¿Cómo opera el sistema de autenticación con Shopify?
El sistema de autenticación con Shopify es sencillo pero crucial para la ejecución de consultas. Aprende a gestionar tu Storefront Token para garantizar el acceso autorizado, y conoce cómo solucionar problemas comunes de autenticación durante la fase de testing, asegurando así que todas tus peticiones sean válidas y seguras.
Con este stack y herramientas bien configuradas, estaremos listos para crear y gestionar de forma exitosa nuestra tienda en línea. ¡Asegúrate de seguir cada paso y ver cómo nuestra tienda cobra vida!