Next.js中getStaticProps调用内部API传递分页参数获取数据的问题

核心解决思路 #

你已经把业务逻辑抽成了独立的getData方法，完全不需要绕一层调用API路由处理函数，直接在getStaticProps里导入该方法传参即可，完全符合官方的规范建议。

第一步：完善API路由的参数处理（供其他场景调用接口使用） #

如果有其他客户端侧需要调用这个API的场景，可以先把API路由的参数接收逻辑补全，支持从请求中取分页参数：

export const getData = async (page) => {
    const data = await fetch(
        `https://rickandmortyapi.com/api/character?page=${page}`
    );
    const response = await data.json();
    return response;
};

export default async function getCharactersAPI(req, res) {
    // GET请求从query取参数，POST请求从body取参数
    const page = req.method === 'GET' ? req.query.page : req.body.page
    const data = await getData(page || 1); // 不传参数默认取第一页
    res.status(200).json(data);
}

第二步：调整getStaticProps逻辑，直接调用业务方法 #

不需要调用getCharactersAPI处理函数，直接导入getData传你需要的页码即可，也不需要额外执行.json()解析，方法返回的就是已经处理好的响应数据：

// 先导入你抽好的getData方法，路径替换成你自己的API文件路径
import { getData } from './api/characters'

export const getStaticProps = async pageContext => {
    // 固定取第3页就直接传3
    // 如果是动态路由页码，比如页面是[page].js，可以从pageContext.params里取：
    // const page = Number(pageContext.params.page) || 1
    const response = await getData(3);

    return {
        props: { response },
    };
};

补充说明 #

这种方式既符合Next.js官方的最佳实践，避免了构建时额外的本地HTTP请求开销，参数传递也更直接，不需要模拟请求对象来给API路由传参。
如果确实有特殊场景必须调用API路由函数（非常不推荐），你也可以手动构造一个模拟的req对象传入getCharactersAPI，同时要自己处理res对象的回调，不过这种方式远不如直接调用业务方法简洁高效。

内容的提问来源于stack exchange，提问作者user12714160