API 在 NextJS getStaticProps 中调用导致错误 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 服务器不是运行.

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

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

API call in NextJS getStaticProps causes error 500

server-side-rendering

next.js