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

@nickwarters de-structuring is incorrect .. should be getStaticProps({params}){ const {slug} = params;} — Nilesh Patel, Dec 11 '20 at 09:02
@NileshPatel Changing this did not fix the issue. The returned props are still not passed to the page template. — nickwarters, Dec 11 '20 at 09:09
@nickwarters this is different issue now.. const data = matter(content.default) is not returning title property.. please check md file posts/${slug}.md — Nilesh Patel, Dec 11 '20 at 09:16
@NileshPatel this is the same error. I solely pasted the error. The two lines printed to the console above the error are the name of the markdown file and the title IN the markdown file. The console.log for the title is AFTER const data = matter(content.default), and refers to "data" as you can see in the code in the post. — nickwarters, Dec 11 '20 at 09:26
@nickwarters ok..As per the error **data.data.title** is undefined. seems your md file does not title — Nilesh Patel, Dec 11 '20 at 09:31
@NileshPatel I have updated the post with the markdown file which as you can see, contains a title in the frontmatter. — nickwarters, Dec 11 '20 at 09:39
To confirm, I do not have trouble getting the title or content of the file. I am able to log it to the console inside the getStaticProps function. What I am not able to do is pass the props into the page in order to render them. — nickwarters, Dec 11 '20 at 09:40

score 9 · Answer 1 · answered Dec 11 '20 at 11:14

9

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

answered Dec 11 '20 at 11:14

nickwarters

143
1
7

1

your answer helped, but my problem was passing PageProps instead of pageProps :) – Rok Sprogar Jan 14 '23 at 18:43

NextJS getStaticProps not passing returned props to page

Update

Update #2

1 Answers1