Estoy tratando de hacer una página individual detallada para cada uno de mis productos usando nextjs, por lo que al hacer clic en cualquiera de los productos, aparecerá una página detallada sobre ese producto en particular.

El tutorial que estaba usando para este proyecto no hizo eso, pero estoy tratando de agregar la función de página dinámica de nextjs a la mía, por lo que me resulta difícil implementarlo durante los últimos tres días.

entonces, me encontré con un tutorial de netninja sobre la implementación de páginas dinámicas con la función getStaticProps y getStaticPaths de nextjs, en este caso, una página detallada del producto individual, que estaba siguiendo hasta que me quedé atascado sin saber dónde adjuntar mi id const porque estoy usando una búsqueda diferente URL

Estaré agradecido si puedo obtener ayuda sobre cómo hacerlo, ya sea para adoptar un método completamente diferente o para ayudarme a solucionar esto para obtener detalles individuales para cada producto.

mis codigos estan abajo

página de producto individual producto /[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, }, } }

cuando ejecuté el código anterior, devolvió "TypeError: keys.join is not a function" captura de pantalla del resultado

También subí el código a github para una mejor aclaración https://github.com/Onome15/Onome/blob/main/pages/product/%5Bid%5D.js

Captura de pantalla de mi código junto con el código del tutorial de netninja que estoy usando