-1

I would like to show 3 products from a JSON. I'm trying to do a NextJS web application. I'm just learning, and when I replicate the tutorial is everything correct, but I'm doing my own changes, and trying to create something different, but it doesn't work.

Thanks to all!

 [
  {
    "id": "price_1JDUeIIpi9NgmDuQlNYIwAlP",
    "title": "HarryPotter1",
    "category": "Cuento",
    "image": "/images/harrypotter1.jpeg",
    "price": 20
  },
  {
    "id": "price_1JDUe4Ipi9NgmDuQh9nA4B9E",
    "title": "Harry Potter2",
    "category": "Novela",
    "image": "/images/harrypotter2.jpeg",
    "price": 10
  },
  {
    "id": "price_1JDUdqIpi9NgmDuQGOQO9HGj",
    "title": "Harry Potter3",
    "category": "Ensayo",
    "image": "/images/harrypotter3.jpeg",
    "price": 25
  }
] 
]

In different routes with Link. This is my [productId].js file final part:

export async function getStaticProps({ params = {} }) {
  const product = products.find(({ id }) => `${id}` === `${params.productId}`);
  return {
    props: {
      product
    },
  };
}

export async function getStaticPaths() {
  const paths = products.map((product) => {
    const { id } = product;
    return {
      params: {
        productId: id,
      },
    };
  });

  return {
    paths,
    fallback: false
  };
}

I'm getting from Chrome: Error: A required parameter (productId) was not provided as a string in getStaticPaths for /products/[productId]

Pau March
  • 1
  • 1
  • 1
  • Where does the `products` variable come from in your `getStaticPaths`? Do all the items in that array have a valid `id`? You may want to filter out any items that don't before mapping them. – juliomalves Jul 30 '21 at 17:28

1 Answers1

2

I can only assume based on the error description, that:

const { id } = product;
    return {
      params: {
        productId: id,
      },
    };

In this part of the getStaticPaths function, you are supposed to provide the id for productId as a string (might be a number on its own). So you would want to try changing it to this:

const { id } = product;
    return {
      params: {
        productId: id.toString(),
      },
    };

Let me know if this is what you were looking for.

Kevin Haxhi
  • 498
  • 2
  • 6
  • Hi! Thanks. I know my questions are not so clearly, I'm just learning. This is what Chrome says: ` 124 | return { 125 | params: { > 126 | productId: id.toString(), | ^ 127 | }, 128 | }; 129 | });` – Pau March Jul 29 '21 at 15:07
  • 1
    @PauMarch Hi, please edit your question and add the screenshots of your console showing the error, instead of just copying a line from the whole thing. That way I will be able to help you figure out where the issue is. – Kevin Haxhi Jul 29 '21 at 17:28