Next.js: getStaticPaths for nested dynamic routes data structure error

Question

I have a page [categories][price].js and im trying to achieve the data structure in getStaticPaths e.g cat1/10 cat1/20 cat1/30 cat1/40 cat2/10 cat/20 etc

I have looked at this post: Next.js: getStaticPaths for nested dynamic routes as it's the same error but as their data structure is a bit different I'm not sure how to translate this to my example

It looks like im mapping the data incorrectly as I get the following error when trying to create my dynamic routes.

Error: Additional keys were returned from `getStaticPaths` in page "/[catSlug]/[price]". URL Parameters intended for this dynamic route must be nested under the `params` key, i.e.:

    return { params: { catSlug: ..., price: ... } }

Keys that need to be moved: 0, 1.

How can I correctly map my data?

[categories][price].js

export async function getStaticPaths() {
   const prices = [' 10', ' 20', ' 30']
  const categories = [{ name: 'cat' }, { name: 'cat2' }, { name: 'cat3' }]
  const paths = categories.map(({ slug }) =>
    prices.map((price) => ({ params: { catSlug: slug, price: price } }))
  )
  return {
    paths,

    fallback: false
  }
}

evgeni fotia evgeni fotia · Accepted Answer · 2020-11-20T14:09:56

flatten the array

const paths = categories.map(({ name }) =>
  prices.map((price) => ({ params: { catSlug: name, price: price } }))
).flat()

Next.js: getStaticPaths for nested dynamic routes data structure error

1 Answers