无法从 Next.js 中的 getStaticProps 传递数组

Question

When I pass a JSON array from getStaticProps in Next.js, I get the following error on accessing it.

TypeError: Cannot read property 'contentBody' of undefined
module.exports../pages/[author]/[article].js.__webpack_exports__.default
./pages/[author]/[article].js:17
 14 |     <img/>
 15 | </Center>
 16 | <Center className={Style.contentContainer}>question
> 17 |     <Content>
    | ^  18 |         {
 19 |             `${props.posts.contentBody}`
 20 |         }

The code: pages/[author]/[article].js

import Center from "../../components/Center/Center";
import Style from "../../modules/article.module.css"
import React from "react"
import CommonContainer from "../../components/CommonContainer/CommonContainer";
import Content from "../../components/Content/Content";
//static content
import fs from 'fs'
import path from 'path'

export default (props) => {
    return (
        <CommonContainer>
            <Center className={Style.mainImg}>
                <img/>
            </Center>
            <Center className={Style.contentContainer}>
                <Content>
                    {
                        `${props.posts.contentBody}`
                    }
                </Content>
            </Center>
        </CommonContainer>
    )
}

export async function getStaticProps({params}) {
    const articlePath = path.join(process.cwd(), `SampleArticles/${params.author}/${params.article}.json`);
    let posts = JSON.parse(fs.readFileSync(articlePath).toString());
    return {
        props: {
            posts,
        },
    }

}

export async function getStaticPaths() {
    return {
        paths: [],
        fallback: true
    };
}

JSON FILE

{
  "title": "rust",
  "author": "AniketFuryRocks",
  "image": {
    "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Norco_Range.jpg/2560px-Norco_Range.jpg"
  },
  "contentBody": [
    "as","asd"
  ]
}

Answer 1

Because your posts object is an array, I would recommend trying to use an index value to access the first value in your posts object.

Something like this:

`${props.posts[0].contentBody}`

Answer 2

you have to add curly brackets {} to wrap props (ln. 1 below), it should be:

export default ({ props }) => {
    return (
        <CommonContainer>
            <Center className={Style.mainImg}>
                <img/>
            </Center>
            <Center className={Style.contentContainer}>
                <Content>
                    {
                        `${props.posts.contentBody}`
                    }
                </Content>
            </Center>
        </CommonContainer>
    )
}