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

这是markdown文件的内容。

// src/posts/first-post.md
---
title: first post
---
This is a basic first post

Answer 1

问题似乎是由于未在_app.js文件中传递｛…pageProps｝。参见以下代码：

上一个代码：

import '../styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component />
}

正确编译的新代码：

import '../styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}