Deseo construir un aplicativo tipo catalogo para el api de los simpson para sus personajes tengo el siguiente endpoint
https://thesimpsonsapi.com/api/characters
con la siguiente respuesta
y de cada persona tengo el siguiente endpoint https://thesimpsonsapi.com/api/characters/5 con la siguiente respuesta
¡Perfecto! Voy a construir un catálogo de personajes de Los Simpson usando esa API. Déjame primero entender la estructura del proyecto y generar un diseño atractivo para el catálogo.
¡Perfecto! Voy a crear un catálogo vibrante y divertido para los personajes de Los Simpson, inspirado en el diseño moderno y colorido que veo en las referencias. Usaré colores icónicos de la serie y un diseño limpio con cards interactivas.
He creado un catálogo completo y vibrante para los personajes de Los Simpson con un diseño moderno inspirado en los colores icónicos de la serie. La aplicación incluye una página principal con grid de personajes paginado, páginas de detalle individuales con toda la información (frases famosas, primera aparición, estadísticas), y usa SWR para un fetching eficiente de datos. El tema visual usa amarillo Simpson como color primario, azul cielo y rosa como acentos, creando una experiencia visual divertida y nostálgica.
The code returns the following error:
An unsupported type was passed to use(): [object Object]
at CharacterPage (/app/characters/[id]/page)
Revise the code to address the error.
I was previewing: /characters/1
Let me read the character detail page to see the exact issue with the use() hook.
I see the issue. The params is a Promise in Next.js 15, but I'm trying to use it with React's use() hook in a client component. I'll fix this by making the page a server component that awaits the params, then passes the id to a client component for data fetching.
Fixed the error by separating concerns: the page component is now an async server component that properly awaits the params Promise, then passes the id to a client component that handles the SWR data fetching. This resolves the "unsupported type" error that occurred when trying to use React's use() hook with the params Promise.