interface CategoriesProps {
params: {
categories: string[];
};
searchParams: {
search?: string;
};
}
export default function Category(props: CategoriesProps) {...}
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,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
15 Días
1 Hrs
56 Min
19 Seg
Manejo de parámetros en rutas en Next.js
7/57Recursos
Aportes 12
Preguntas 0
Ordenar por:
Gente creo que la interface CategoryProps no estaba bien planteada y no podía imprimir en pantalla los searchParams. A continuación os pongo el código de lo que he hecho para solucionar esto y cómo hacerlo.
```js
interface CategoryProps {
params: {
category: string[]
},
searchParams?: { [key: string]: string }
}
export default function Category(props: CategoryProps) {
console.log(props);
const {category} = props.params;
const searchParams = props.searchParams;
return(
<header>
La categoria es: {category}
-
{searchParams && Object.entries(searchParams).map(([key, value]) => (
- {key}: {value} ))}
La categoria es: {category}\
\- {searchParams && Object.entries(searchParams).map((\[key, value]) => ( \
- {key}: {value}\ ))} \
Si les sale un error al utilizar \[\[...categories]]... es porque necesitan eliminar el page.tsx que esta a nivel de la carpeta store.
Esto sucede porque si tenemos dos page.tsx, se crearan dos paginas distintas tratando de acceder a la misma ruta store.
Aquí un detalle, `searchParams` y `params`, están al mismo nivel. El profe no tuvo problemas para acceder al primero porque hizo directamente a `props`.
```js
interface CategoriesProps {
params: {
categories: string[],
}
searchParams: {
social?: string;
}
}
```Funciona, pero en si, no está typeando nada respecto a `searchParams`.
CLASE7 01/03/2024
Los segmentos dinámicos pueden ampliarse para abarcar todos los segmentos posteriores añadiendo una elipsis dentro de los brackets […nombrecarpeta].
- Por ejemplo:
Route Example URL params app/shop/[...slug]/page.js /shop/a { slug: ['a'] } app/shop/[...slug]/page.js /shop/a/b { slug: ['a', 'b'] } app/shop/[...slug]/page.js /shop/a/b/c { slug: ['a', 'b', 'c'] }
Los segmentos Catch-all pueden hacerse opcionales incluyendo el parámetro entre brackets dobles: [[…nombrecarpeta]].
-
Por ejemplo:
Route Example URL params app/shop/[[...slug]]/page.js /shop {} app/shop/[[...slug]]/page.js /shop/a { slug: ['a'] } app/shop/[[...slug]]/page.js /shop/a/b { slug: ['a', 'b'] } app/shop/[[...slug]]/page.js /shop/a/b/c { slug: ['a', 'b', 'c'] }Al utilizar TypeScript, puede añadir Types para los “Params” en función del segmento de ruta configurado.
-
Por ejemplo:
Route params - Type Definition app/blog/[slug]/page.js { slug: string } app/shop/[...slug]/page.js { slug: string[] } app/shop/[[...slug]]/page.js { slug?: string[] } app/[categoryId]/[itemId]/page.js { categoryId: string, itemId: string }
Unicamente el archivo Page.tsx puede recibir el searchParams, el layout no puede dado que no se renderiza a diferencia del Page.
URL searchParams
/shop?a=1 { a: '1' }
/shop?a=1&b=2 { a: '1', b: '2' }
/shop?a=1&a=2 { a: ['1', '2'] }
Hola, a mi no me funcionó searchParams, además me aparecía un warning, por lo tanto cambié el código de la siguiente manera y me funcionó, quedo atento a cualquier observación:
interface CategoryProps { params: { categories: string\[] }, searchParams: { tab?: string } }
export default async function Category({params, searchParams}: CategoryProps){ const {categories} = await params console.log(categories)
const {tab} = await searchParams console.log(tab) return( \
Categoria dinámica: {categories}\
) }
Otra opción que podemos manejar para las rutas:
Vamos a descomponer el código y explicar cada parte:
`Object.keys(searchParams || {}).map((key) => (...))`
Este código utiliza dos métodos de JavaScript: `Object.keys()` y `map()`.
`Object.keys()`
`Object.keys()`**** es un método que devuelve un arreglo de strings que representan las claves (o propiedades) de un objeto. En este caso, estamos pasando `searchParams` como parámetro.
`searchParams` es un objeto que contiene pares clave-valor, donde las claves son strings y los valores también son strings. Por ejemplo:
{
"color": "red",
"size": "large",
"material": "cotton"
}
Cuando se llama a**** `Object.keys(searchParams)`, se devuelve un arreglo con las claves del objeto:
\["color", "size", "material"]
`|| {}`
La expresión `searchParams || {}`**** es un truco para asegurarse de que `searchParams` no sea `null` o `undefined`.
Si `searchParams` **es** `null` **o** `undefined`, el operador `||` devuelve un objeto vacío `{}` en su lugar. Esto evita que se produzca un error al intentar llamar a `Object.keys()` en un objeto nulo o undefined.
`map((key) => (...))`
Una vez que se tiene el arreglo de claves, se utiliza el método `map()` para transformar cada clave en un elemento ``.
La función de callback de `map()`**** recibe cada clave como parámetro `key`. Dentro de la función, se devuelve un elemento ` ` con la clave como texto y el valor asociado a esa clave en `searchParams`.
` {key}: `
`{searchParams?.[key]} `
Este es el elemento `` que se devuelve para cada clave. Hay dos partes importantes:
* `key={key}`**:** se asigna la clave como valor de la propiedad `key` del elemento ` `. Esto es importante para que React pueda identificar de forma única cada elemento de la lista.
* `{key}: {searchParams?.[key]}`**:** se muestra el texto de la clave y su valor asociado en `searchParams`. La sintaxis `searchParams?.[key]`**** es llamada "optional chaining" y se utiliza para evitar errores si `searchParams` es**** `null` **o** `undefined`**.** Si `searchParams` es `null` **o** `undefined`, el valor de `searchParams?.[key]` será `undefined`**.**
En resumen, este código itera sobre las claves de `searchParams`, crea un elemento ` ` para cada clave y muestra el texto de la clave y su valor asociado.
Para usar searchParams tenéis que usar:
<https://nextjs.org/docs/app/api-reference/functions/use-search-params>
Un link a la documentación por si quieres revisar a detalle lo que se habló en esta clase:
<https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes>
¿A alguien le sucedió que al cambiar la carpeta \[...category] a \[\[...category]], el archivo tsconfig.json arrojó un error de que no encuentra la ruta \[...category]? No logro resolverlo
no comprendo algo, se modifica el nombre de la carpeta \[category] por \[...category] y automaticamente next crea las carpetas => \[...categories] and \[category]. O esto cuando creo estas carpetas no comprendo
Veo que es un objeto, entonces pienso porque no es {}, o string{} object
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?