NextJS 14.2.7服务端组件调用API报无效URL错误求助

错误根源 #

服务端组件运行在Node.js环境中，Node的fetch实现（基于undici）要求必须传入带协议的完整绝对URL：

• 相对路径/api/posts?page=1&limit=20不符合URL规范，会触发解析错误；
• 就算写localhost:3000/api/posts也不行，因为缺少http://或https://协议头，Node的URL构造器无法识别。

另外，服务端组件直接通过fetch调用自身API路由是低效的——相当于服务端内部发起一次HTTP请求，完全没必要绕这个圈子。

正确解决方案：复用业务逻辑 #

把API路由里的数据处理逻辑抽成独立函数，在服务端组件和API路由里直接调用，避免重复代码和多余请求：

1. 抽离核心逻辑 #

新建src/lib/posts.ts文件，把原来route.ts里的查询逻辑移过来：

// src/lib/posts.ts
export async function getPosts(page: number, limit: number) {
  // 这里写实际的数据获取逻辑，比如从数据库查询
  // 示例：
  // const posts = await prisma.post.findMany({
  //   skip: (page - 1) * limit,
  //   take: limit,
  // });
  // return posts;
}

2. 修改API路由 #

让API路由调用抽离后的函数：

// src/app/api/posts/route.ts
import { NextResponse } from 'next/server';
import { getPosts } from '@/lib/posts';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const page = parseInt(searchParams.get('page') || '1');
  const limit = parseInt(searchParams.get('limit') || '20');
  
  const posts = await getPosts(page, limit);
  return NextResponse.json(posts);
}

3. 服务端组件直接调用函数 #

不再用fetch，直接调用getPosts：

// src/components/PostDetails.tsx
import { notFound } from 'next/navigation';
import { getPosts } from '@/lib/posts';

const PostDetails = async ({ slug }: { slug: string }) => {
  const posts = await getPosts(1, 20);

  if (!posts) {
    notFound();
  }

  return (
    <div className='container mx-auto p-4'>
        Hello
    </div>
  );
};

export default PostDetails;

不推荐的临时方案（仅作了解） #

如果非要用fetch调用API，必须传入完整绝对URL：

const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
const res = await fetch(`${baseUrl}/api/posts?page=1&limit=20`);

但这种方式会增加服务端内部请求开销，不建议在生产环境使用。

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