Next.js 13.4服务端组件Fetch调用API路由失败问题排查

我正在练习Next.js 13.4的App Router实验特性与React Server Component，通过Node.js和gray-matter读取Markdown文件生成博客内容。为获取标记为isFeatured的文章，我在src/app/api/featuredPosts路径下编写了处理GET请求的API路由，但在服务端组件的getData函数中调用fetch时，使用'/api/featuredPosts'会提示无法解析URL，使用'http://localhost/api/featuredPosts'则提示fetch失败，请求排查代码问题并给出解决方案。

相关代码 #

src/lib/PostsGateway.js #

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsdir = path.join(process.cwd(),'src','data','Posts')

async function getPostData(filename) {
    const filePath = path.join(postsdir, filename)
    const postInfo = fs.readFileSync(filePath, 'utf-8')
    const postSlugName = filename.replace(/\.md$/,'')
    const { data, content } = matter(postInfo)
    const PostData = {
        slug: postSlugName,
        data: data, 
        content:content
    }
    return PostData
}

export async function getAllPosts() {
    const Posts = fs.readdirSync(postsdir)
    const AllPostsData = await Promise.all(Posts.map(async (post) => {
        return await getPostData(post)
    }))
    return AllPostsData.sort((postA, postB) => postA.date > postB.date ? -1 : 1)
}

export async function getFeaturedPosts(){
    const allPosts = await getAllPosts()
    const featuredPosts = allPosts.filter(post => post.data.isFeatured === true)
    return featuredPosts
}

src/app/api/featuredPosts/route.js #

import { getFeaturedPosts } from "@/lib/PostsGateway";
import { NextResponse } from "next/server";

export async function GET() {
    console.log('get method run')
    const featuredPosts = await getFeaturedPosts()
    console.log(featuredPosts)
    return NextResponse.json(featuredPosts)
}

src/app/page.js #

import Hero from "@/components/Home/Hero"
import FeaturedPosts from "@/components/Home/featuredPosts";
import { getFeaturedPosts } from "@/lib/PostsGateway";

async function getData() {
  "use server"
  const fPosts = await fetch('http://localhost/api/featuredPosts')
  return fPosts
}

export default async function HomePage() {
  const featuredPosts = await getData()
  console.log(featuredPosts)
  return (
    <>
      <Hero />
      <FeaturedPosts posts={featuredPosts} />
    </>
  )
}

问题分析 #

1. 服务端组件调用API路由的冗余性：你的page.js本身就是Server Component，完全可以直接调用数据逻辑函数，不需要通过API路由中转，这不仅绕路，还会引发URL解析问题。
2. fetch URL错误：
   • 服务端环境没有浏览器的base URL上下文，直接用相对路径'/api/featuredPosts'会导致URL解析失败。
   • 使用http://localhost/api/featuredPosts时，缺少Next.js默认的3000端口号，或者开发服务器未正常运行，导致请求失败。
3. 响应处理缺失：调用fetch后直接返回Response对象，没有解析成JSON数据，组件无法拿到可用的文章内容。

解决方案 #

最优方案：直接在Server Component中调用数据逻辑 #

这是Next.js App Router推荐的高效方式，无需API路由中转：
修改src/app/page.js：

import Hero from "@/components/Home/Hero"
import FeaturedPosts from "@/components/Home/featuredPosts";
import { getFeaturedPosts } from "@/lib/PostsGateway";

export default async function HomePage() {
  const featuredPosts = await getFeaturedPosts()
  console.log(featuredPosts)
  return (
    <>
      <Hero />
      <FeaturedPosts posts={featuredPosts} />
    </>
  )
}

保留API路由的解决方案 #

如果坚持使用API路由，需修正以下几点：

1. 使用包含正确端口的完整绝对URL（Next.js默认端口为3000）；
2. 解析fetch响应为JSON，并添加错误处理：
   修改src/app/page.js中的getData函数：

async function getData() {
  "use server"
  try {
    const response = await fetch('http://localhost:3000/api/featuredPosts')
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`)
    }
    const fPosts = await response.json()
    return fPosts
  } catch (error) {
    console.error('获取精选文章失败：', error)
    return [] // 返回空数组作为降级处理
  }
}

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