无法从我的 next.js 应用程序获取我的strapi 数据答案

【问题标题】：cannot get my strapi data from my next.js app无法从我的 next.js 应用程序获取我的strapi 数据
【发布时间】：2021-09-23 22:38:30
【问题描述】：

我正在尝试使用 Next.js 和 Strapi 构建一个投资组合网站，但我很难将关于页面的数据放到屏幕上。我在邮递员中获取数据。这是我的代码...

import {API_URL} from "../config";
import Layout from "../components/Layout";

export default function AboutPage({about}) {
    return (
        <Layout>
            <main className="container relative">
                <div className="p-4 md:p-12 md:w-3/4 mx-auto relative">
                    <section className="bg-brown text-white text-center md:text-left rounded-lg lg:flex p-12 md:p-20">
                        <img
                            src={about.image.url}
                            className="h-60 w-48 lg:w-64 lg:h-80 mx-auto md:mr-12"
                            alt={about.name} id="about-img"/>
                        <div className="text-lg flex flex-col justify-center">
                            <h1 className="mono text-xl my-8">Hi! My name is {" "}
                                <span>{about.name}</span>
                            </h1>
                            <div className="prose lg:prose-xl text-base">
                                {about.description}
                            </div>
                        </div>
                    </section>
                </div>
            </main>
        </Layout>
    )
}

export async function getStaticProps() {
    const res = await fetch(`${API_URL}/abouts`)
    const about = await res.json()

    return {
        props: {about}
    }
}

我是新手，谁能帮帮我

【问题讨论】：

您有任何错误吗？如果您将about 数据记录到getStaticProps 内的控制台，您会在终端中获得预期的输出吗？

标签： reactjs next.js

【解决方案1】：

你应该得到道具

import {API_URL} from "../config";
import Layout from "../components/Layout";

export default function AboutPage({props}) {
    return (
        <Layout>
            <main className="container relative">
                <div className="p-4 md:p-12 md:w-3/4 mx-auto relative">
                    <section className="bg-brown text-white text-center md:text-left rounded-lg lg:flex p-12 md:p-20">
                        <img
                            src={props.about.image.url}
                            className="h-60 w-48 lg:w-64 lg:h-80 mx-auto md:mr-12"
                            alt={props.about.name} id="about-img"/>
                        <div className="text-lg flex flex-col justify-center">
                            <h1 className="mono text-xl my-8">Hi! My name is {" "}
                                <span>{props.about.name}</span>
                            </h1>
                            <div className="prose lg:prose-xl text-base">
                                {props.about.description}
                            </div>
                        </div>
                    </section>
                </div>
            </main>
        </Layout>
    )
}

export async function getStaticProps() {
    const res = await fetch(`${API_URL}/abouts`)
    const about = await res.json()

    return {
        props: {about}
    }
}

【讨论】：

还是不行TypeError: Cannot read property 'about' of undefined