Next.js(TS)调用POST接口遇404及模块找不到问题求助

一、修复POST接口404错误 #

Next.js App Router的API路由有严格的结构和代码规范，你的当前实现不符合要求：

1. 调整文件结构：
   将app/api/addUser.ts重命名为app/api/addUser/route.ts（必须创建addUser文件夹，内部放置route.ts文件）
2. 修正API路由代码：
   App Router中API路由通过导出对应HTTP方法的函数处理请求，同时要正确返回响应、导入依赖：

import { NextRequest, NextResponse } from 'next/server';
import prisma from '@/lib/prisma'; // 确保已在lib目录初始化Prisma实例

export async function POST(req: NextRequest) {
  try {
    const { name, email } = await req.json(); // App Router中通过req.json()获取请求体

    const newUser = await prisma.user.create({
      data: {
        email,
        name,
      },
    });

    return NextResponse.json(newUser, { status: 200 }); // 返回成功响应
  } catch (error) {
    console.error(error);
    return NextResponse.json({ error: '创建用户失败' }, { status: 500 }); // 返回错误响应
  }
}

Prisma实例初始化示例（lib/prisma.ts）：

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default prisma;

二、修复"Module not found: Can't resolve 'debug'"错误 #

该错误由依赖包follow-redirects的导入异常导致，大概率是依赖缓存损坏，按以下步骤修复：

1. 删除项目根目录下的node_modules文件夹
2. 删除package-lock.json（npm用户）或yarn.lock（yarn用户）文件
3. 重新安装依赖：

npm install
# 或
yarn install

若问题仍存在，手动安装debug包：

npm install debug --save

三、表单代码优化（可选） #

完善类型定义和表单双向绑定：

import { useState } from 'react';
import axios from 'axios';

interface UserData {
  name?: string;
  email?: string;
}

const AddUser = () => {
  const [data, setData] = useState<UserData>({});

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      const response = await axios.post('/api/addUser', data);
      console.log('新用户:', response.data);
      setData({}); // 重置表单
    } catch (error) {
      console.error('错误:', error);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setData((prevData) => ({...prevData, [e.target.name]: e.target.value}));
  };

  return (
    <form className='flex flex-col gap-2' onSubmit={handleSubmit}>
        <div className='flex gap-2'>
            <label>Email</label>
            <input name="email" type="email" onChange={handleChange} value={data.email || ''} />
        </div>

        <div className='flex gap-2'>
            <label>Name</label>
            <input name="name" type="text" onChange={handleChange} value={data.name || ''} />
        </div>

        <button type="submit" className='border-2 bg-green-500 hover:bg-green-500/90 py-2 px-4'> Add </button>
    </form>
  );
};

export default AddUser;

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