TypeError：无法在 getStaticProps 和数据获取中解析 URL

Question

我在 NextJS 中的 getStaticProps 有问题，我尝试从 API Route 加载专家，但我得到一个错误。

export const getStaticProps = async () => {
    const specialists = await loadSpecialists();

    return {
        props: { specialists },
    };
};

export const loadSpecialists = async () => {
    const response = await fetch('/api/specialists.js');
    const data = await response.json();

    return data;
};

if (req.method === 'GET') {
        const specialists = await database
            .collection('specialists')
            .find()
            .toArray();

        res.status(200).json({ specialists });
    }

我尝试使用 useEffect 进行客户端渲染，这很有效，但我需要预渲染此页面。

Answer 1

你的网址在这里

const response = await fetch('/api/specialists.js');

应该是绝对网址。您的客户端代码有效，因为浏览器可以处理相对 url

默认情况下，浏览器通过在链接中添加相对 URL 来处理 正确的方案（协议）、服务器名称和目录信息 （包括联结）到相对 URL。浏览器导出 来自页面位置信息的前置信息 链接所在的位置。

当你在服务器上时，服务器无法知道来源。你要么硬编码绝对 url

export const loadSpecialists = async () => {
    // or you couldnt set in env variable
    const response = await fetch(“http://localhost:3000/api/specialists.js”);
    const data = await response.json();
    return data;
};

Answer 2

看起来您正在尝试使用 getStaticProps() 从 Next.js 中的 API 路由加载数据，但您遇到了错误。您的代码存在的一个问题是您正在使用 fetch() 从 API 路由加载数据，这在构建过程中调用 getStaticProps() 时不起作用。相反，您可以使用 require() 函数直接从文件加载数据。

这是您的代码的更新版本，它在构建过程中使用 require() 从 API 路由加载数据：

import { loadSpecialists } from '../lib/api';

export const getStaticProps = async () => {
    const specialists = await loadSpecialists();

    return {
        props: { specialists },
    };
};