Recently, while working on my project with Next.js, I encountered an issue where I was trying to access data but kept getting undefined. Below is the code snippet that I was working with:
function Home({books}) {
console.log(books)
return <div>Home</div>
}
export default Home
export const getStaticProps = async () => {
let books = await getAllBooks();
return ({
props: {
books
}
}
)
}
export const getAllBooks = async() => {
const res = await axios.get("http://localhost:3000/api/v1/books", {headers: {'Access-Control-Allow-Origin': 'http://localhost:5173/'}});
if (res.status !== 200) {
return new Error("Internal Server error");
}
const data = await res.data.books;
return data
}
Despite my efforts to fetch and store the data in props, when passing it into the JavaScript component and logging it, the output always turned out to be undefined.