params y searchParams en Next.js

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:37

params y searchParams en Next.js

Curso de Next.js 14

Clase 32 de 57

Clase 32 / 57

Recursos

Trabajar con rutas dinámicas en Next.js implica saber leer dos tipos de datos distintos: los params que viajan en la URL y los searchParams que llegan como query string. Aprender a extraerlos correctamente, tanto en componentes de servidor como de cliente, te permite construir vistas individuales de producto, filtros y experimentos sin fricción.

¿Cómo creo una ruta dinámica para un producto en Next.js?

Dentro de la carpeta app se crea una nueva carpeta llamada product y, dentro, otra carpeta envuelta en corchetes con el nombre del parámetro dinámico, por ejemplo [handle]. Ahí adentro vive un archivo page.tsx que exporta una función asíncrona como ProductPage. Con eso, una URL del tipo /product/vehiculo-volador ya renderiza la vista individual del producto [01:00].

Esta convención de carpetas con corchetes es la forma estándar en la que Next.js identifica segmentos dinámicos en el App Router. El valor que el usuario escriba en esa parte de la URL viajará como handle dentro del objeto params.

¿Cómo accedo a params desde un Server Component?

En un componente de servidor, los parámetros llegan directamente como props. Se define una interfaz, por ejemplo ProductPageProps, y se tipa el argumento de la página. Después, basta con leer props.params.handle o props.searchParams.id para usarlos.

Es importante separar mentalmente las dos fuentes de datos:

params contiene el segmento dinámico definido en el nombre de la carpeta, como handle.
searchParams contiene los pares clave-valor que vienen después del signo ? en la URL, como ?id=123456.
Ambos están disponibles como props únicamente en componentes de servidor [02:30].

Este flujo funciona perfecto cuando la página es un React Server Component, que es el comportamiento por defecto.

¿Cómo obtengo los parámetros en un Client Component?

Cuando agregas la directiva use client al inicio del archivo, las props de params y searchParams dejan de ser la vía recomendada. En su lugar, Next.js expone hooks que puedes usar en cualquier nivel del árbol de componentes, incluso en uno profundamente anidado.

¿Qué es el hook useParams? Es un hook de Next.js que devuelve los parámetros dinámicos de la ruta actual, como handle, sin necesidad de pasarlos como props. Solo funciona en componentes de cliente.

El flujo es el siguiente: importas useParams desde next/navigation, lo invocas dentro del componente y obtienes un objeto con las claves definidas en tus carpetas dinámicas. Si intentas usarlo en una función async, verás el error Hooks are not supported in async components, porque los hooks no conviven con componentes asíncronos [03:45].

¿Cómo leo searchParams con useSearchParams?

A diferencia de useParams, el hook useSearchParams no devuelve un diccionario plano. Devuelve una instancia tipo Read entry searchParams sobre la que tienes que llamar al método .get() con la clave que buscas.

El patrón se ve así: declaras const searchParams = useSearchParams() y luego const id = searchParams.get('id'). Con eso recuperas el valor que llegó en la URL, por ejemplo 123456, desde cualquier componente cliente del árbol [05:10].

¿Cuál es la diferencia entre useParams y useSearchParams? useParams lee los segmentos dinámicos definidos en carpetas con corchetes. useSearchParams lee los valores que viajan en el query string después del ?. Los dos requieren use client.

¿Cuándo conviene usar params y cuándo searchParams?

La decisión no es estética, es semántica. Cada uno comunica una intención distinta sobre el recurso que estás mostrando.

Usa params cuando ya sabes qué recurso vas a renderizar y necesitas identificarlo de forma única, como el handle o el ID de un producto. Es la forma natural de modelar vistas individuales y URLs limpias.

Usa searchParams para datos secundarios o configurables, por ejemplo:

Parámetros extra de configuración de la página.
Tokens de búsqueda o filtros aplicados.
Identificadores de campañas y analíticas.
Variantes para experimentos de A/B testing y feature flags [07:20].

¿Puedo usar searchParams para A/B testing? Sí. Los searchParams son ideales para activar variantes de una vista o mostrar features nuevos solo a un segmento de usuarios, porque puedes leerlos y bifurcar la lógica de render sin tocar la ruta.

Dominar esta separación te ayuda a diseñar URLs más expresivas y a decidir con claridad qué información merece estar en la estructura de la ruta y cuál debe viajar como parámetro de consulta. ¿En qué parte de tu proyecto vas a aplicar primero useSearchParams? Cuéntalo en los comentarios.

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

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

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

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

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

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

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

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

params y searchParams en Next.js