I am running in to an error and i'm not sure why? within my pages directory I have a folder called contentslug within this contains the [slug.js].
I am following this tutorial - https://www.youtube.com/watch?v=Mdx3ywlnzk8
This is the code in slug.js
import Image from 'next/image'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
export default function BlogPosts({ posts}) {
const {featuredImage, title , information } = posts.fields
return (
<div>
<div>
<Image
src={'https:' + featuredImage.fields.file.url}
width={featuredImage.fields.file.details.image.width}
height={featuredImage.fields.file.details.image.height}
/>
</div>
<div>
{documentToReactComponents(information)}
</div>
</div>
)
}
export async function getStaticProps({params}) {
const {items} = await client.getEntries({
content_type: 'posts',
'fields.slug': params.slug
})
return {
props: {posts: items[0], fallback: 'blocking'}
}
}
and this is the component that links to it
import Link from 'next/link'
export default function BlogPosts({post }) {
const {title, information, slug, thumbnail} = post.fields
return (
<div className="container text-center ">
<div>
<div>
<h4 className=''>{title}</h4>
<Link href={'/contentslug/' + slug}>
<a className='btn btn-primary text-white'>Read more</a>
</Link>
</div>
</div>
)
}
Any ideas?
If you are following this tutorial and you are on episode 5 that you linked then you should not be editing [slug] page yet, it only happens in episode 7 https://www.youtube.com/watch?v=DRF1KBTH15k&list=PL4cUxeGkcC9jClk8wl1yJcN3Zlrr8YSA1&index=7
But if you already want to handle that page then you need to add getStaticPaths function to generate paths that getStaticProps will get:
export const getStaticPaths = async () => {
const res = await client.getEntries({
content_type: "recipe"
})
const paths = res.items.map(item => {
return {
params: { slug: item.fields.slug }
}
})
return {
paths,
fallback: false
}
}