Next.js 13中POST方法调用API报错，如何解决？

根据你的代码和项目结构，需要做以下3处修改来正常访问API：

1. 修正API路由的访问路径 #

你的api/user.ts位于app目录下，按照Next.js 13 App Router的规则，API路由的访问路径是/api/user，而非/app/api/user。修改page.tsx中的fetch路径：

// 原代码
fetch('http://localhost:3000/app/api/user', { ... })
// 修改为
fetch('/api/user', { ... })

2. 让API路由的POST方法返回合法响应 #

你的user.ts中POST函数没有返回任何Response，前端fetch会因为未收到合法响应而报错。需要将GitHub API的请求结果封装成Response返回：

export async function POST(request: Request) {
    const token = process.env.TOKEN;
    const query = `
    query {
      user(login: "MenaiAla") {
          avatarUrl
    }
  `;

    try {
        const response = await fetch('https://api.github.com/graphql', {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${token}`,
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ query }),
        });
        const data = await response.json();
        // 返回JSON响应给前端
        return new Response(JSON.stringify(data), {
            headers: { 'Content-Type': 'application/json' },
        });
    } catch (error) {
        // 处理错误并返回错误响应
        return new Response(JSON.stringify({ error: 'Failed to fetch data' }), {
            status: 500,
            headers: { 'Content-Type': 'application/json' },
        });
    }
}

注：改用async/await替代then链，代码更清晰且符合Next.js API路由的异步处理规范。

3. 确保环境变量正确配置 #

你的TOKEN环境变量需要放在项目根目录的.env.local文件中（服务器端变量无需NEXT_PUBLIC_前缀）：

TOKEN=your_github_personal_access_token

修改后重启Next.js开发服务器，确保环境变量能被正确读取。

完成以上修改后，重新启动开发服务器，提交表单即可正常调用API并获取返回数据。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai