Estoy creando un sitio web para exhibir productos usando NextJs. Necesito pasar datos de una página a una página dinámica. Todos los datos son una matriz json de objetos ubicados en una carpeta de datos dentro del proyecto. Quiero enumerar todos los objetos en pages/rolls/index.jsx, y cuando se hace clic en el botón de enlace "Más información" correspondiente a un objeto, me lleva a una versión más detallada de la página. No puedo hacer que funcione usando next/link y useRouter, así que esto es lo que hice. La estructura de mi proyecto es:

 - data - rollData.json - pages - rolls - [rolldetail].jsx - index.jsx

 // rollData.json [ { "name": "8\" x 0.080\" x 300'", "price": 300, "product_id": "PL8080300", "image": "/8flat.webp", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, { "name": "12\" x 0.080\" x 300'", "price": 450, "product_id": "PL12080300", "image": "/12flat.webp", "description": "Ac turpis egestas sed tempus urna et pharetra" } ]

 // rolls.jsx import rollsdata from '../../data/rollData.json' const Rolls = () => { return ( <main> {rolls.map((roll) => { return ( <div key={roll.product_id}> <h2>{roll.name}</h2> <h3> Description </h3> <p>{`${roll.description.slice(0, 163)}.`}</p> <div> <span>Price</span> <span>{`$${roll.price.toFixed( 2 )}`}</span> </div> <Link href={`/rolls/${encodeURIComponent(roll.product_id)}`}> <a>click</a> </Link> </div> ) })} </main> ) }

 // [rollDetail].js import { useRouter } from 'next/router' import rolls from '../../data/rolls.json' const RollDetail = () => { const router = useRouter() const roll = rolls[router.query.rolldetail] console.log(roll) return ( <div> <h2>Roll detail</h2> <p>{roll.name}</p> <p>{roll.description}</p> </div> ) } export default RollDetail

Y me da el error:

 Uncaught TypeError: roll is undefined

No entiendo cómo usar el enrutador para mostrar un objeto de rollo específico, ¿alguien puede decirme qué estoy haciendo mal y cómo lograrlo, por favor? ¿Debería usar getStaticProps y getStaticRoute?