es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

getStaticPaths es necesario para las páginas dinámicas SSG y está faltando para ‘/contentslug/[slug]’.

Me encuentro con un error y no estoy seguro(a) de por qué. Dentro de mi directorio de páginas tengo una carpeta llamada “contentslug” que contiene el código “[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}"></image>
        </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 se vincula a él:

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'>Leer más</a>

            </div>
        </div>
    </div>
)

}

¿Alguna idea?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Sin conocer el mensaje de error específico o el comportamiento, es difícil determinar el problema exacto. Sin embargo, según los fragmentos de código proporcionados, hay algunas áreas potenciales de preocupación:

    1. En slug.js, el componente se llama BlogPosts, pero el archivo se llama slug.js. Asegúrese de que el nombre del archivo coincida con el nombre del componente para evitar confusiones.

    2. En slug.js, la función getStaticProps utiliza params.slug para consultar el tipo de contenido posts. Sin embargo, params no está definido en este archivo, debería pasarse como parámetro al componente cuando se renderice. Verifique que slug.js se esté invocando correctamente con params incluido.

    3. En el componente BlogPosts que enlaza a slug.js, la propiedad que se pasa es post, pero la clave del objeto en la asignación por destructuración es posts.fields. Asegúrese de que el nombre de la propiedad coincida entre los dos componentes.

    4. Por último, vale la pena verificar que todos los paquetes (como @contentful/rich-text-react-renderer) se hayan instalado e importado correctamente, y que la estructura general del archivo coincida con el formato esperado.

Comments are closed.