Estoy trabajando en un blog en Nextjs y quiero que obtenga todas las publicaciones del blog de un directorio en la compilación. Pero no importa lo que devuelva con getStaticProps, siempre devuelve undefined en el componente principal. Lo he probado tanto en next dev como en next build.
//import Markdown from "react-markdown"; import styles from "./post.module.css"; import { promises as fs } from "fs"; import matter from "gray-matter"; const Post = ({ post, title, date, summary, image, test }) => { console.log(post) //returns undefined return ( <div id={ styles.postcontainer }> <div id={ styles.post }> </div> </div> ); }; export default Post; export const getStaticPaths = async() => { return { paths: [...(await fs.readdir("assets/markdown")).map(file => { return { params: { id: file.replace(".md", "") } } }) ], fallback: false } }; export const getStaticProps = async(context) => { const post = await fs.readFile(`assets/markdown/${ context.params.id }.md`, "utf8"); console.log(post) //success return { props: { post : matter(post).content, title : matter(post).data.title, date : matter(post).data.date, summary : matter(post).data.summery, image : `../assets/${ matter(post).data.image }`, } } };El archivo de rebajas se ve así
--- title : test slug : test date : 3-9-22 summery : some summery of the post... image : test.png --- # Header 1Estoy bastante seguro de que el problema no es con los datos == indefinidos, porque cuando lo registro en la terminal (dentro de getStaticProps) responde con los valores correctos.
console.log(post)
--- title : test slug : test date : 3-9-22 summery : lorem ipsum image : test.png --- # Header 1He intentado
props: { test : "testvalue123" }pero aún devuelve indefinido en el componente principal. ¡Gracias por adelantado!
Editar: el problema estaba en mi archivo _app.js (no en el código anterior). Olvidé agregar pageProps al componente devuelto en _app.js.
Probar:
const post = await fs.readFile(`assets/markdown/${ context.params.id }.md`, "utf8"); const result = await post.json(); return { props: { post : result.content, title : result.data.title, date : result.data.date, summary : result.data.summery, image : `../assets/${ result.data.image }`, } }