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

Question

中进行的 API 调用getStaticProps似乎会导致错误 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;

我想提一下，在 a 中进行相同的 API 调用useEffect，以及将硬编码对象传递到propsin 中getStaticProps。只有内部的 API 调用getStaticProps似乎会导致问题。

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

Answer 1

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

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