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 '../../ponents/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 piling 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
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 '../../ponents/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 piling 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
- could you provide the error log? – Quang Thái Commented Dec 11, 2020 at 8:57
- @nickwarters de-structuring is incorrect .. should be getStaticProps({params}){ const {slug} = params;} – Nilesh Patel Commented Dec 11, 2020 at 9:02
- @NileshPatel Changing this did not fix the issue. The returned props are still not passed to the page template. – nickwarters Commented Dec 11, 2020 at 9:09
- @QuangThái I have updated with the error log – nickwarters Commented Dec 11, 2020 at 9:12
- @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 Commented Dec 11, 2020 at 9:16
1 Answer
Reset to default 9Issue 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 piles correctly:
import '../styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}