NextJS getStaticProps not passing returned props to page

Question

I am having some issues getting my getStaticProps function to pass the returned props into template pages in NextJS.

Here is the code I currently have for the dynamic page template.

// 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,
    }
}

When running the site, the page just doesn't load, and throws the same console logged error in the main window.

I have another site set up in exactly the same way and I have absolutely no issues, so I am struggling to understand why the props being returned from getStaticProps are not being passed into the function to build the page.

Any assistance would be greatly appreciated!

Update

This is the error log when compiling the site.

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)

Update #2

Here is the contents of the markdown file.

// src/posts/first-post.md

---
title: first post

---

This is a basic first post

Answer 1

Issue seemed to be due to not passing {...pageProps} in the _app.js file. See code below:

Previous code:

import '../styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component />
}

New code which compiles correctly:

import '../styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}