Next.js App目录API路由读取文件失败，请求技术帮助

问题根源 #

1. API路由结构不符合规范：App Router要求API路由必须放在app/api/[路由名]/route.js，你的app/api/myapi.js不符合结构要求，直接导致404错误。
2. 文件读取逻辑错误：相对路径在Node.js执行环境中不可靠，且未指定编码会返回Buffer对象，引发JSON序列化异常，导致Unexpected end of JSON input。
3. 请求格式不匹配：前端fetch未正确设置请求头和请求体格式，可能导致后端无法正确解析req.body。

修复步骤 #

1. 调整API路由结构 #

将原文件app/api/myapi.js移动到app/api/myapi/route.js，最终目录结构如下：

app/
└── api/
    └── myapi/
        └── route.js

2. 修正API路由代码 #

使用绝对路径读取文件，指定编码并添加错误处理：

import fs from 'fs';
import path from 'path';

export async function POST(req) {
  // 解析纯文本格式的请求体
  const requestBody = await req.text();
  // 构建文件绝对路径（mydata.txt放在项目根目录）
  const filePath = path.join(process.cwd(), 'mydata.txt');
  
  try {
    // 指定utf8编码读取，避免返回Buffer
    const msg = fs.readFileSync(filePath, 'utf8').trim();
    if (requestBody === "Me") {
      return Response.json({ message: 'Logged in' }, { status: 200 });
    } else {
      return Response.json({ message: `Error ${msg}` }, { status: 200 });
    }
  } catch (err) {
    // 捕获文件读取异常，避免服务崩溃
    return Response.json({ message: 'Failed to read file' }, { status: 500 });
  }
}

注：App Router的API路由推荐按请求方法导出函数（如POST），而非默认导出handler，同时需手动解析请求体。

3. 修正前端fetch代码 #

确保请求方法、请求头与后端逻辑匹配：

// 示例：在app/page.js中调用API
async function fetchAPI() {
  try {
    const response = await fetch('/api/myapi', {
      method: 'POST',
      headers: {
        'Content-Type': 'text/plain', // 对应后端解析纯文本的逻辑
      },
      body: "Me"
    });
    const data = await response.json();
    alert(data.message);
  } catch (err) {
    console.error(err);
    alert('请求失败');
  }
}

若使用JSON格式传递请求体，需改为body: JSON.stringify({ content: "Me" })，后端对应使用const { content } = await req.json()解析。

4. 确认文件位置 #

将mydata.txt放在项目根目录（与app目录同级），确保process.cwd()能正确定位到文件。

验证 #

本地运行或部署后，触发fetch请求：

• 请求体为"Me"时，弹窗显示Logged in
• 其他请求体时，弹窗显示Error Not logged in

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