Me encuentro con un error y no estoy seguro de por qué. dentro de mi directorio de páginas tengo una carpeta llamada contentlug dentro de este contiene el [slug.js] .
Estoy siguiendo este tutorial: https://www.youtube.com/watch?v=Mdx3ywlnzk8
Este es el código en 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'} } }y este es el componente que lo vincula
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> ) }¿Algunas ideas?
Si está siguiendo este tutorial y está en el episodio 5 que vinculó, entonces no debería editar la página [slug] todavía, solo sucede en el episodio 7 https://www.youtube.com/watch?v=DRF1KBTH15k&list=PL4cUxeGkcC9jClk8wl1yJcN3Zlrr8YSA1&index =7
Pero si ya desea manejar esa página, debe agregar la función getStaticPaths para generar rutas que obtendrá getStaticProps :
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 } }