Tenía una tarea que no pude hacer porque estaba ocupado, pero por curiosidad estoy tratando de hacerla. Tengo esta API https://dev-api.fitnessfuel360.com/app/home desde la que intento obtener los elementos y los datos presentes en ella. Actualmente estoy tratando de usar Nextjs en el que se usa axios. así es como se ve mi código a partir de ahora.

 //Index.js file where Base_url is the api const { items } = await axios.get(Base_URL); return { props: { items: items }, }; }

Luego estoy pasando elementos al componente donde quiero mostrar los datos presentes dentro de la matriz de elementos.

 //my productSection.js component <div> {items.map((items) => ( <h1>{items.slug}</h1> ))} </div>

Sin embargo, esto me da un error que dice Error: Error serializing `.items` returned from getServerSideProps in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

Entonces, ¿cómo accedo a la información dentro de esta matriz de elementos? También se mencionaron algunos puntos en la tarea, como que el object has 2 properties type and data. Type key decides which component to render and data will be passed to to the component y el Code should not throw error on invalid types in json . No he usado la clave para representar el componente antes, por lo que esto pasa por alto. Comprenda que todavía soy un principiante, así que sí, hágame saber qué hacer aquí y cómo lograrlo. Gracias por tu tiempo.