Next.js项目调用/api/route接口时持续出现404错误求助

在Next.js项目中，使用CSVUploader组件调用/api/route接口时持续收到404错误，已确认目录结构符合Next.js配置规范，相关信息如下：

项目结构 #

根据截图整理的目录结构：

项目根目录/
├── components/
│   └── CSVUploader.js
├── pages/
│   └── api/
│       └── route.js
├── scripts/
│   └── process_csv.py
└── 其他配置文件（如next.config.js、package.json等）

组件代码（CSVUploader.js） #

'use client'

// components/CSVUploader.js
import { useState } from 'react';

export default function CSVUploader() {
    const [file, setFile] = useState(null);

    const handleFileChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleSubmit = async () => {
        const formData = new FormData();
        formData.append('file', file);

        const response = await fetch('/api/route', {
            method: 'POST',
            body: formData,
        });

        const data = await response.json();
        console.log(data);
    };

    return (
        <div>
            <input type="file" onChange={handleFileChange} />
            <button onClick={handleSubmit}>上传并处理</button>
        </div>
    );
}

API路由代码（pages/api/route.js） #

// pages/api/route.js
import { exec } from 'child_process';

export default async (req, res) => {
    if (req.method === 'POST') {
        // 假设请求体中发送的是CSV文本
        const csvData = req.body;

        // 将CSV数据保存到临时文件
        const tempFile = 'geofences_istak.csv';
        require('fs').writeFileSync(tempFile, csvData);

        // 运行Python脚本
        exec('python3 scripts/process_csv.py', (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`);
                return res.status(500).json({ error: '处理文件失败。' });
            }

            // 返回结果或处理后的文件路径
            res.status(200).json({ data: stdout });
        });
    } else {
        res.status(405).end();  // 不允许的请求方法
    }
};

错误情况 #

浏览器网络请求显示/api/route返回404 Not Found。

解决方法 #

1. 核对Next.js路由规则

   • 若使用Next.js 13+的App Router，API路由必须放在app/api/目录下，而非pages/api/。将pages/api/route.js迁移到app/api/route.js，并调整为App Router的导出格式：

     // app/api/route.js
     import { exec } from 'child_process';
     import fs from 'fs';
     
     export async function POST(req) {
         const formData = await req.formData();
         const file = formData.get('file');
         const csvData = await file.text();
     
         const tempFile = 'geofences_istak.csv';
         fs.writeFileSync(tempFile, csvData);
     
         return new Promise((resolve) => {
             exec('python3 scripts/process_csv.py', (error, stdout) => {
                 if (error) {
                     console.error(`exec error: ${error}`);
                     resolve(new Response(JSON.stringify({ error: '处理文件失败。' }), { status: 500 }));
                     return;
                 }
                 resolve(new Response(JSON.stringify({ data: stdout }), { status: 200 }));
             });
         });
     }
     

   • 若使用Pages Router，确保pages/api/目录结构正确，文件名无拼写错误，且开发服务器已重启。

2. 重启开发服务器
   终止当前Next.js服务（Ctrl+C），重新运行npm run dev，避免缓存导致的路由识别异常。

3. 修复FormData解析问题（404解决后必遇问题）
   当前API路由直接读取req.body无法正确解析FormData，需使用multer处理文件上传：

   • 安装依赖：npm install multer
   • 修改pages/api/route.js：

     // pages/api/route.js
     import { exec } from 'child_process';
     import multer from 'multer';
     import fs from 'fs';
     
     const upload = multer({ dest: 'uploads/' });
     const handler = async (req, res) => {
         if (req.method === 'POST') {
             const csvData = fs.readFileSync(req.file.path, 'utf8');
             const tempFile = 'geofences_istak.csv';
             fs.writeFileSync(tempFile, csvData);
     
             exec('python3 scripts/process_csv.py', (error, stdout) => {
                 if (error) {
                     console.error(`exec error: ${error}`);
                     return res.status(500).json({ error: '处理文件失败。' });
                 }
                 res.status(200).json({ data: stdout });
             });
         } else {
             res.status(405).end();
         }
     };
     
     export default upload.single('file')(handler);
     

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