I am trying to make detailed individual page for each of my product using nextjs whereby on click of any of the product, it will bring a detailed page about that particular product.

The tutorial I was using for this project did not do that, but i am trying to add nextjs dynamic page feature to mine, hence finding it difficult to implement for the past three days now.

so, I came accross netninja tutorial about implementation of dynamic pages with nextjs getStaticProps and getStaticPaths function, in this case a detailed individual product page, I was following till i got stuck not knowing where to attach my id const because i am using a different fetch URL.

I will be grateful if i can get assistance on how to go about it, either to adopt a different method entirely or to help me fix this to get individual details for each product.

My codes are below

individual product page product/[id].js

import React from 'react'
import Butter from "buttercms";

const details = (product) => {
  return (
    <>
    <h1>{product.name}</h1> 
    </>
  )
}

export default details


export const getStaticPaths = async () => {
  const butter =Butter(process.env.REACT_APP_BUTTER_ECOMMERCE);
const res = await butter.content.retrieve(["products"], {
  order: "name",
});
const { data } = await res.data;
const products = data.products;

  // map data to an array of path objects with params (id)
  const paths = products.map(product => {
    return {
      params: { id: product.id.toString() }
    }
  })

  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps(context) {
  const butter =Butter(process.env.REACT_APP_BUTTER_ECOMMERCE);

  const id = context.params.id;

  const res = await butter.content.retrieve(["products"] + id, {
    order: "name",
  });
  const { data } = await res.data;
  const product = data.products ;
  return {
    props: {
      product,
    },
  }
}

when i ran the above code it returned "TypeError: keys.join is not a function" screenshot of the result

I have also uploaded the code to github for better clarification https://github.com/Onome15/Onome/blob/main/pages/product/%5Bid%5D.js

Screenshot of my code alongside the netninja tutorial's code i am using