'getStaticProps returns undefined when exporting | NextJS
I'm working on a blog with nextjs. I want to export it as a static website.
My problem is that I want to make a dynamic routing (for multiple posts) so I created a [post].js file under a blog page (which contains only getStaticProps but works correctly).
When building my app, everything is Ok, when running the app (yarn next) everything is also Ok. But when I try to yarn export in order to deploy the website, I get this error :
Error: Error serializing `.title` returned from `getStaticProps` in "/blog/[post]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
... etc
Error: Export encountered errors on following paths:
/blog/[post]
I tried to simplify my code as much as possible. All I do is to show the message I pass on props, but even like this, it does not work. All the other components are just esthetical components, so I really don't understand what's the problem. Here's the code of [post].js:
const Post = props => {
const [enableParticles, setEnableParticles] = React.useState(true);
return (
<div className="App">
<Header blog />
<Layout>
<SocialMediaNav />
<ParticlesNetwork enableParticles={enableParticles} />
<ToggleButton
checked={enableParticles}
onClick={() => setEnableParticles(!enableParticles)}
/>
<SectionWrapper id="blog-homepage" offset={0} minHeight="90vh">
{props.title}
</SectionWrapper>
</Layout>
<Footer />
</div>
);
};
export async function getStaticPaths() {
return {
paths: [
{ params: { post: 'mes_notes_en_probabilites' } }
],
fallback: false,
};
}
export async function getStaticProps(context) {
return {
props: {
title: context.params.post
},
};
}
export default Post;
note: i tried to do as it was said on this tutorial: https://dev.to/akuks/what-is-getstaticpaths-in-nextjs-5ee5
Do you have an idea?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
