Next.js Route Handlers 遭遇404错误，请求技术排查

1. 修正API路径（核心问题） #

你的Route Handler文件位于app/api/route.ts，根据Next.js App Router规则，这个文件对应的API路径是/api，而非表单中写的/app/api/ingresos。

方案一：调整表单路径
直接修改表单的action属性：

<form action="/api" method="POST">
  {/* 表单字段 */}
</form>

方案二：调整项目结构以匹配目标路径
如果需要保留/api/ingresos这个API路径，需修改项目结构：

app/
  api/
    ingresos/  // 新增该文件夹
      route.ts  // 将原route.ts移至此处

调整后表单的action="/api/ingresos"即可正常匹配。

2. 处理HTTP方法不匹配问题 #

错误日志显示请求为GET，但表单设置的是POST，这是因为浏览器默认表单提交会触发GET跳转。在客户端组件中添加提交处理函数，阻止默认行为并确保发送POST请求：

'use client'

import { useState } from 'react';

export default function EnviarIngresos() {
  const [fuente, setFuente] = useState('');
  const [cantidad, setCantidad] = useState('');
  const [fecha, setFecha] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault(); // 阻止默认GET跳转

    try {
      const res = await fetch('/api', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ fuente, cantidad, fecha }),
      });

      if (res.ok) {
        alert('Ingreso creado exitosamente');
        // 重置表单等后续逻辑
      } else {
        throw new Error('Error al crear ingreso');
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={fuente}
        onChange={(e) => setFuente(e.target.value)}
        placeholder="Fuente"
        required
      />
      {/* 其他表单字段 */}
      <button type="submit">Enviar</button>
    </form>
  );
}

3. 验证Route Handler与外部服务 #

• 确认PocketBase服务在http://127.0.0.1:8090正常运行
• 检查PocketBase中ingresos集合已创建，且fuente、cantidad、fecha字段配置正确
• 可在Route Handler中添加日志，验证是否接收到请求：

export async function POST(request: Request) {
  console.log('Received POST request'); // 查看控制台是否输出该日志
  // 原有逻辑...
}

4. 清除开发服务器缓存 #

Next.js开发服务器可能缓存旧路由配置，重启npm run dev可解决此类问题。

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