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

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 调用有效，并且将硬编码对象传递给getStaticProps 中的props。只有getStaticProps 中的 API 调用似乎会导致问题。

有谁知道错误可能来自哪里以及如何解决？

Answer 1

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

您可以直接执行 DB 查询或从 getStaticProps 内部的文件系统读取，而无需进行 API 调用。