Why am I getting undefined when attempting to loop over data in next js page (using getStaticProps)?
Question
Having difficulty working with outputting the page meta data in next just when I run:
npm run build
I get the following error:
Error occurred prerendering page "/blog/[...slug]". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot read property 'map' of undefined
This is the page I'm having an issue with:
//pages/blog/[...slug].js
import Head from 'next/head'
import Layout, { siteTitle } from '../../components/layout'
import axios from 'axios';
export default function About({ meta, title }) {
return (
<Layout home>
<Head>
<title>{title} | {siteTitle}</title>
{meta.map(meta_value => {
return (
<meta name={meta_value.name || meta_value.property} content={meta_value.content} />
);
})}
</Head>
</Layout>
)
}
export async function getStaticProps(context) {
const res = await axios.get(`https://example.com/api/posts?url=/${context.params.slug.join('/')}`);
const post = await res.data;
return {
props: {
title: post.title,
meta: post.meta
},
}
}
export async function getStaticPaths() {
const res = await axios.get('https://example.com/api/posts?categories=3');
const posts = await res.data;
const slugs = posts.map(post => post.permalink.replace(/^\/|\/$/g, '').split("/") );
const paths = slugs.map(slug => ({params: { slug } } ));
return {
paths,
fallback: true,
}
}
Sample response from api:
{
"title" : "test",
"meta": [
{
"property": "og:locale",
"content": "en_GB"
},
{
"property": "og:type",
"content": "article"
},
{
"property": "og:title",
"content": "Test Post"
},
{
"property": "og:description",
"content": "testing"
},
{
"property": "og:url",
"content": "https://example.com/blog/2021/01/test/"
},
{
"property": "og:site_name",
"content": "Test Site"
},
{
"property": "article:published_time",
"content": "2021-01-30T13:32:26+00:00"
},
{
"property": "article:modified_time",
"content": "2021-01-30T13:58:00+00:00"
},
{
"name": "twitter:card",
"content": "summary_large_image"
},
{
"name": "twitter:label1",
"content": "Estimated reading time"
},
{
"name": "twitter:data1",
"content": "1 minute"
}
]
}
1 answers
solution1
0 2021-02-14 17:54:53
"getStaticProps" only runs at build time, which means that the context parameter won't contain "params" which comes from the url. Which i'm guessing will result in an response with undefined data.
Try to replace GetStaticProps with getServerSideProps , which prerenders the page with new data on each request instead of at build time.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.