I am attempting to learn Next.js by expanding upon Brad Traversy's Next.js code. There is already one API route that returns a JSON object with all articles.

I am attempting to add "category" and "subcategory" attributes to the items in the data and create a series of routes that look like root.com/category/[category]/subcategory/[subcategory], but they all pull from the same dataset. To do this, I've tried to slugs that look like this under the API folder:

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

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

Each of the index.js files looks like this:

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])
}

The [slug].js files look like this:

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])
}

(so the same, I understand this might be redundant but I am throwing spaghetti at the wall). The intent of this is to only pull items where the category or subcategory matches the query.

In the pages, I have a structure like this (if this could be collapsed into one, that'd be great):

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

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

Where each of the index.js files looks like this:

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

However, the list of items is always the same on the front end. Could someone please help me understand what is happening, or a better approach to nested routing in Next?