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

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

Answer 1

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

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