Estoy intentando aprender Next.js ampliando el código Next.js de Brad Traversy. Ya existe una ruta API que devuelve un objeto JSON con todos los artículos.

Estoy tratando de agregar atributos de "categoría" y "subcategoría" a los elementos en los datos y crear una serie de rutas que se parecen a root.com/category/[category]/subcategory/[subcategory], pero todas extraen de la mismo conjunto de datos. Para hacer esto, he intentado con slugs que se ven así en la carpeta API:

 > category >> index.js >> [category].js > subcategory >> index.js >> [subcategory].js

Cada uno de los archivos index.js tiene este aspecto:

 import { items } from '../../../data' export default function handler({ query: { category } }, res) { const filtered = items.filter((item) => item.category === category) res.status(200).json(filtered[0]) }

Los archivos [slug].js se ven así:

 import { items } from '../../../data' export default function handler({ query: { category } }, res) { const filtered = items.filter((item) => item.category === category) res.status(200).json(filtered[0]) }

(lo mismo, entiendo que esto puede ser redundante, pero estoy tirando espaguetis a la pared). La intención de esto es solo extraer elementos donde la categoría o subcategoría coincida con la consulta.

En las páginas, tengo una estructura como esta (si esto pudiera colapsarse en uno, sería genial):

 > category >> [category] >>> index.js > subcategory >> [subcategory] >>> index.js

Donde cada uno de los archivos index.js se ve así:

 const category = ({ items }) => { return ( <> <Meta title={items.category} description={items.category} /> <div> <ItemList items={items}/> </div> <Link href='/'>Go Back</Link> </> ) } export const getStaticProps = async (context) => { const res = await fetch(`${server}/api/category/${context.params.category}`) const item = await res.json() return { props: { items, }, } } export const getStaticPaths = async () => { const res = await fetch(`${server}/api/items`) const items = await res.json() const categories = items.map((item) => item.category) const paths = categories.map((category) => ({ params: { category: category.toString() } })) return { paths, fallback: false, } } export default category

Sin embargo, la lista de elementos es siempre la misma en la parte delantera. ¿Podría alguien ayudarme a comprender lo que está sucediendo o un mejor enfoque para el enrutamiento anidado en Siguiente?