Next.js中使用getStaticProps预渲染页面时出现URL解析错误的求助

嘿，我看你遇到了getStaticProps调用API路由的问题，这其实是个挺常见的坑——毕竟getStaticProps是在**服务器端（构建阶段）**运行的，和客户端浏览器的环境完全不一样！

问题根源 #

你在客户端用useEffect调用API时没问题，是因为浏览器会自动把相对路径/api/specialists.js补全成当前域名的完整URL（比如http://localhost:3000/api/specialists.js）。但getStaticProps是在服务器构建页面时执行的，这时候没有浏览器的上下文，直接用相对路径的话，服务器根本不知道该往哪个域名发请求，自然就会报错。

另外还有个小细节：Next.js的API路由访问时不需要加.js后缀，你的API文件是pages/api/specialists.js，正确的访问路径应该是/api/specialists，加.js反而会找不到对应的路由。

两种解决方案 #

方案一：直接在getStaticProps中调用数据库逻辑（推荐）

既然API路由本身也是服务器端代码，那完全可以把数据库查询的逻辑抽出来，让getStaticProps和API路由共用，这样既避免了不必要的网络请求，还能提升代码复用性。

1. 先把数据库查询逻辑抽成单独的工具函数，比如创建lib/specialists.js：

// lib/specialists.js
export async function getSpecialistsFromDB() {
  const specialists = await database
    .collection('specialists')
    .find()
    .toArray();
  return specialists;
}

2. 在页面的getStaticProps中直接调用这个函数：

import { getSpecialistsFromDB } from '../lib/specialists';

export const getStaticProps = async () => {
  const specialists = await getSpecialistsFromDB();
  return {
    props: { specialists },
  };
};

3. 你的API路由也可以复用这个函数，保持逻辑一致：

// pages/api/specialists.js
import { getSpecialistsFromDB } from '../../lib/specialists';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const specialists = await getSpecialistsFromDB();
    res.status(200).json({ specialists });
  }
}

方案二：使用绝对路径调用API路由

如果你一定要通过API路由获取数据，那必须给fetch传入完整的绝对URL。可以通过环境变量来配置域名，避免硬编码：

export const loadSpecialists = async () => {
  // 从环境变量获取基础域名，本地开发默认用localhost:3000
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
  // 注意去掉URL里的.js后缀
  const response = await fetch(`${baseUrl}/api/specialists`);

  // 记得处理请求失败的情况
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }

  const data = await response.json();
  // API返回的是{ specialists }，所以要取出里面的数组
  return data.specialists;
};

总结 #

方案一的性能更好，也更符合Next.js预渲染的设计思路，推荐优先使用。方案二适合一些必须通过API路由处理权限、中间件逻辑的场景。

备注：内容来源于stack exchange，提问作者abrzezinski