Content on the Page:
import { useRouter } from "next/router";
export default function Daily({ data }) {
let router = useRouter()
const { slug } = router.query;
return slug;
}
And display on the page 60d6180ea9284106a4fd8441 (https://.../gunluk/60d6180ea9284106a4fd8441 id in URL)
I can retrieve the ID but I am unsure how to pass it to the API.
export async function getStaticProps(context) {
const res = await fetch(`http://localhost:3000/api/books-i-have`)
const data = await res.json()
if (!data) {
return {
notFound: true,
}
}
return {
props: { data }, // will be passed to the page component as props
}
}
Usually, I use this method but it didn't work with the slug. I attempted other methods as well but they were unsuccessful (https://nextjs.org/docs/basic-features/data-fetching).
In essence, how do you establish a connection to the API from the Slug page?
File directory:
pages/
gunluk/
[...slug].js
index.js