me parece a mi o el curso es demasiado relleno de otras tecnologias y poco Next?
Conceptos básicos de Next.js 14
¿Qué es Next.js y por qué aprenderlo si quieres ser frontend senior?
Arquitectura de un proyecto de Next.js
Herramientas y stack utilizado en el curso
Cómo crear rutas en Next.js
Cómo crear Layout en Next.js
Cómo funciona la navegación en Next.js
Manejo de parámetros en rutas en Next.js
React Server Components en Next.js: notación "use Client"
Creación de arquitectura de landing page en Next.js
Quiz: Conceptos básicos de Next.js 14
Manejo de estilos y estáticos en Next.js 14
CSS Modules en Next.js 13
Uso de Sass en Next.js
Cómo utilizar estilos globales en Next.js
Cómo agregar archivos estáticos en Next.js
Manejo y optimización de imágenes con Next Image
Optimización del componente image en Next.js
Optimización de fuentes con Next.js
Creando estilos dinámicos aplicando condicionales en Next.js
Quiz: Manejo de estilos y estáticos en Next.js 14
Data Fetching en Next.js
Creación de tienda de Shopify para un proyecto en Next.js
Manejo de variables de entorno en Next.js
Cómo obtener información de una API con Next.js
Manejo de estado de carga con el archivo loading.tsx
Route Grouping en Next.js
Manejo de errores en la UI con el archivo error.tsx
Quiz: Data Fetching en Next.js
Next.js Avanzado
Implementando páginas de Not Found y error global
Cómo impactan los React Server Components en un proyecto en Next.js
Cuándo utilizar layout o template en Next.js
Arquitectura profesional para data fetching en un proyecto en Next.js
Next.js para backend: manejando rutas con archivos Route Handlers
Proyecto: implementando la página de tienda
Patrones de data fetching en Next.js
Proyecto: filtrando categorías de productos
Data fetching de parámetros en el servidor y cliente
Proyecto: página de producto y arreglos en el sitio
Cómo funciona el Fetch y el Caché de Next.js
Revalidando cache con revalidateTag y revalidatePath en Next.js
Cómo hacer redirects en Next.js
Proyecto: HTML dinámico en la descripción del producto
Mejorando SEO de una página en Next.js
Quiz: Next.js Avanzado
Autenticación y autorización
Manejando autenticación y autorización con Storefront APÏ de Shopify
Server Actions en Next.js
Proyecto: proceso de Sign-Up con GraphQL
Manejo de cookies para colocar un token de acceso de un proyecto en Next.js
Cómo implementar un flujo de login en un proyecto en Next.js
Validando token de acceso de usuario en un proyecto en Next.js
Proyecto: implementando el carrito de compras
Manejo de estado global con zustand en Next.js
Proyecto: agregando items al carrito de compras
Cómo integrar el checkout de Shopify a un proyecto en Next.js
Implementar middleware en proyecto en Next.js para protección de rutas
Inteligencia Artificial
Creando componente de chatbot de ventas con la SDK IA de Vercel
Implementación de un bot de ventas en una app Next.js
Performance
Optimización de carga con parallel routing en Next.js
Análisis de bundle para Next.js 14
Quiz: Performance
Frontend Ops
Edge runtime
Despliegue de un proyecto Next.js en Vercel
Mejores prácticas en arquitecturas empresariales
Quiz: Frontend Ops
Next.js es parte de tu nuevo stack
¡Has creado un proyecto en Next.js!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Proyecto: filtrando categorías de productos
31/57Recursos
Aportes 9
Preguntas 1
Ordenar por:
Mmmm no veo muy bien que se complete una linea de código con Copilot y se explique poco o nada de lo que hace, se que este curso requiere un nivel comprensible de Javascript pero sería bueno entender que está haciendo el profesor y no solo un copy-past
Hola, propongo esta manera:
Desde la etiqueta `Link` mandar el id como searchParams así:
`
No se si es mania... pero porque se salta tanto error de tipado ? jeje
Los precios no salen despues de filtrar por categoria no pude solucionarlo a pesar de que puse en fields:variants Si alguien pudo que nos ayude.
Estaba bien como hizo la primera vez para que haga la búsqueda de todo, si no habia coincidencia
![]()```js
export default async function Category(props: CategoryProps) {
const { categories } = props.params;
let products = [];
const collections = await getCollections();
const selectedCollectionId = collections.find(
(collection: any) => collection.handle === categories[0]
)?.id;
if (selectedCollectionId) {
products = await getCollectionProducts(selectedCollectionId);
} else {
products = await getProducts();
}
return <ProductsWrapper products={products} />;
}
```
como se le hace para ver el params pero en javascript porque ese props.params me imagino es para typescrip
Tu resumen está excelente, y con esos puntos clave capturas el funcionamiento de las rutas dinámicas en Next.js y cómo interactúan con `props.params`. Te hago unas pequeñas sugerencias para ajustar la redacción y agregar algo de claridad:
**En este punto, me costó un poco de trabajo entender en profundidad todo el código y el funcionamiento detrás para que esto funcione.** (Recomiendo repasar el tema de las rutas dinámicas e investigar un poco más sobre cómo funciona `props.params` en Next.js antes de ver esta clase).
Comparto por acá mi resumen por si le sirve a alguien más:
1. **Al acceder a** `/store`, Next.js monta automáticamente el *layout* porque estamos trabajando con el *app directory*. En esta carpeta se incluye un archivo `layout.tsx`, por lo que es lo primero que se monta. Este archivo incluye la barra de navegación de categorías y, además, el *children*, que en este caso es el archivo `page.tsx`, el cual contiene el listado completo de productos o categorías, definido en la carpeta `[[categories]]`.
2. **Recordar que en Next.js las rutas dinámicas se manejan con corchetes dobles** `[[categories]]`. Esto le indica a Next.js que puede recibir uno o más segmentos de la URL como un array, lo que nos permite capturar dinámicamente las categorías desde la URL.
3. **Cuando se carga la página**, Next.js utiliza `props.params` para capturar esos segmentos dinámicos de la URL. Pero en nuestro caso, al cargar inicialmente, se mostrarán todos los productos porque no se ha aplicado ningún filtrado aún (no se ha enviado ningún parámetro en la URL).
4. **Next.js verifica** `props.params` **no solo al cargar la página**, sino también cuando cambian los parámetros en la URL. Entonces, cada vez que hacemos clic en alguna de las categorías desde la barra de navegación, la URL cambia, lo que actualiza los `params` y provoca que Next.js vuelva a renderizar el componente con los nuevos parámetros.
5. **El enrutamiento dinámico de Next.js detecta automáticamente los cambios en la URL**, y en función de eso, vuelve a renderizar el componente con los parámetros actualizados, filtrando los productos correspondientes a la categoría seleccionada.
Hola!, propongo esta manera:
mandar el collectionId como un searchParam desde `store/layout.tsx`:
`
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?