2

I have this code to fetch Markdown blog posts from a local _posts folder, if I console log the posts I receive the data that I asked for in the console, so I know the fetch is working, however when I use the data in the return i.e. <h1>{post.title}</h1> nothing is returned into the h1.

Any idea why this is happening?

import {getPostBySlug, getAllPosts} from '../../comps/data/api'
import markdownToHtml from '../../comps/data/markdownToHtml'
export default function Post(post, morePosts, preview) {
    console.log(post) // This returns all of the post information.
    return (
        <Layout title={`${post.title}`} description={post.excerpt}>
            <h1>{post.title}</h1>
        </Layout>
    )   
}

export async function getStaticProps({params}) {
    const post = getPostBySlug(params.slug, [
        'title',
        'date',
        'slug',
        'author',
        'content',
        'ogImage',
        'coverImage',
    ])
    const content = await markdownToHtml(post.content || '')

    return {
        props: {
            post: {
                ...post,
                content,
            },
        },
    }
}

export async function getStaticPaths() {
    const posts = getAllPosts(['slug'])

    return {
        paths: posts.map((post) => {
            return {
                params: {
                    slug: post.slug,
                },
            }
        }),
        fallback: false,
    }
}
Mac Hooper
  • 103
  • 10

0 Answers0