Next.js 13服务端组件调用API路由遇URL解析错误求助

在Next.js 13的App Router服务端组件中，直接使用相对路径/api/users调用本地API会报错，原因是服务端运行环境没有浏览器的URL上下文，无法自动解析相对路径。以下是两种可行的解决方式：

方式一：直接调用API路由的处理函数（推荐） #

App Router的API路由文件（如app/api/users/route.js）中导出的GET/POST等函数可以直接在服务端组件中导入调用，无需通过网络请求，性能更优。

假设你的app/api/users/route.js代码如下：

export async function GET() {
  // 模拟获取用户数据
  const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
  return Response.json(users);
}

修改服务端组件代码：

import { GET as getUsersApi } from './api/users/route';

export default async function IndexPage() {
  const response = await getUsersApi();
  const users = await response.json();
  return <h1>Users: {users.length}</h1>;
}

方式二：使用绝对URL发起fetch请求 #

如果坚持使用fetch，需要拼接完整的绝对URL。可以通过环境变量配置基础URL，适配开发和生产环境：

1. 在项目根目录的.env文件中添加：

NEXT_PUBLIC_APP_URL=http://localhost:3000 # 开发环境
# 生产环境可设置为你的域名，如NEXT_PUBLIC_APP_URL=https://yourdomain.com

2. 修改服务端组件中的fetch逻辑：

const getUsers = async () => {
  const baseUrl = process.env.NEXT_PUBLIC_APP_URL;
  const result = await fetch(`${baseUrl}/api/users`, { method: 'GET' });
  if (result.ok) {
    return result.json();
  }
  return [];
};

export default async function IndexPage() {
  const users = await getUsers();
  return <h1>Users: {users.length}</h1>;
}

注：客户端组件可以使用相对路径是因为浏览器会自动基于当前页面的URL补全路径，而服务端组件运行在服务器端，缺少这个上下文，因此必须明确指定绝对URL或直接调用API函数。

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