Route Groups y rutas dinámicas con parámetros

Los grupos de rutas sirven para ordenar archivos sin agregar segmentos a la URL. Un segmento dinámico, en cambio, representa un valor real que debe validarse. En un catálogo, (publico) puede agrupar páginas visibles y [slug] puede identificar un producto; son decisiones diferentes.

Ejemplo resuelto

// app/(publico)/productos/[slug]/page.tsx
import { notFound } from 'next/navigation';
const nombres: Record<string, string> = {
  carbon: 'Lápiz de carbón', acuarela: 'Acuarela azul', papel: 'Papel algodón',
};
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  if (!Object.hasOwn(nombres, slug)) notFound();
  return <h1>{nombres[slug]}</h1>;
}

La carpeta entre paréntesis no aparece; carbon sí representa el parámetro.

Añade app/(publico)/productos/[slug]/not-found.tsx con un componente que muestre “Producto no encontrado”. Mostrar ese texto en un <h1> normal no equivale a llamar notFound(). En una respuesta ya iniciada por streaming, el estado HTTP puede conservar 200; comprueba también el contenido y los metadatos de no indexación.

Pruébalo

1. Define tres slugs válidos y sus nombres.

2. Crea el grupo sin incluirlo en la URL.

3. Resuelve el parámetro contra el conjunto permitido.

4. Decide el estado para un slug ausente.

Comprueba tu resultado

Error frecuente: enlazar a /(publico)/productos/carbon. Corrección: el grupo es organizativo y la URL correcta es /productos/carbon.

Ejercicio: con carbon, acuarela y papel, la ruta /productos/acuarela debe mostrar el nombre correspondiente y /productos/metal debe mostrar exactamente el estado definido para ausencia.