Question

在getStaticProps中进行的API调用似乎导致错误500。

这是我组件的代码：

import React from "react";
import API from "services/api";

const ArtistListPage = (props) => {
    return (
        <>
            {props.artists.map((artist) => (
                <div key={artist.id}>{artist.first_name}</div>
            ))}
        </>
    );
};

export async function getStaticProps() {
    // Get external data from the file system, API, DB, etc.
    const res = await API.get("/get_artists");
    const artists = await res.data.json();
    return {
        props: { artists },
    };
}

export default ArtistListPage;

我想提到useEffect中相同的API调用是有效的，并且将硬编码对象传递到props中的getStaticProps。仅getStaticProps内部的API调用似乎会引起问题。

有人知道错误可能来自何处以及如何解决吗？

Answer 1

getStaticProps是在构建时执行的，由于Next.js服务器未运行，因此您无法调用自己的API。

您可以直接执行数据库查询或直接在getStaticProps中读取文件系统，而无需进行API调用。

NextJS getStaticProps中的API调用导致错误500

1 个答案: