javascript - NextJS getStaticProps が返された小道具をページに渡さない

Question

getStaticProps 関数を取得して、返された小道具を NextJS のテンプレート ページに渡すという問題が発生しています。

動的ページ テンプレート用に現在持っているコードを次に示します。

// src/pages/blog/[slug].js
import React from 'react';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';

import Layout from '../../components/layout';

export default function BlogPost ({frontmatter, markdownBody}){
    console.log(`in template Layout: ${frontmatter.title}`)
    // Output: TypeError: Cannot read property 'title' of undefined
    return (
        <Layout>
            <h1>{frontmatter.title}</h1>
            <span>{JSON.stringify(markdownBody)}</span>
        </Layout>
    )
}

export async function getStaticProps({...ctx}){

    const {slug} = ctx.params;
    console.log(slug)
    // output: first post (this is correct)
    const content = await import(`../../posts/${slug}.md`)
    const data = matter(content.default)
    console.log(`In getStaticProps: ${data.data.title}`)    
    // output: In getStaticProps: first post (this is correct too)
    return {
        props: {
            frontmatter: data.data,
            markdownBody: data.content
        },
    };
}

export async function getStaticPaths(){
    const postSlugs = ((context) => {
        const keys = context.keys()
        const data = keys.map((key, index) => {
            let postSlug = key.replace(/^.*[\\/]/, "").slice(0,-3)
            return postSlug
        })
        return data
    })(require.context("../../posts/", true, /\.md$/))
    const paths = postSlugs.map((postSlug) => `/blog/${postSlug}`)

    return{
    paths,
        fallback: false,
    }
}

サイトを実行すると、ページが読み込まれず、メイン ウィンドウに同じコンソール ログ エラーがスローされます。

まったく同じ方法で別のサイトをセットアップしましたが、まったく問題はありません。そのため、getStaticProps から返される小道具がページを構築する関数に渡されない理由を理解するのに苦労しています。

どんな援助でも大歓迎です！

アップデート

サイトコンパイル時のエラーログです。

TypeError: Cannot read property 'title' of undefined
    at BlogPost (webpack-internal:///./src/pages/blog/[slug].js:24:50)
    at processChild (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/next/dist/next-server/server/render.js:53:851)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:135:19)
    at loadGetInitialProps (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/next/dist/next-server/server/render.js:53:1142)

アップデート #2

マークダウン ファイルの内容は次のとおりです。

// src/posts/first-post.md

---
title: first post

---

This is a basic first post