Javascript Next.js 路由处理程序出现 404 错误

我目前正在做一个Next.js项目，我遇到了一个新的路由处理程序功能的问题.我试图在客户端组件中处理来自表单的POST请求，但一直收到404错误.

以下是我的项目的 struct :

app/
  api/
    route.ts
  Ingresos/
    page.tsx
  favicon.ico
  globals.css
  layout.tsx
  page.tsx
components/
  enviarIngresosCliente.tsx
  navbar.tsx
  obtenerIngresosServer.tsx
pocketbase_0.16.10_windows_amd64/
  pb_data/
    data.db
    logs.db
  pb_migrations/
    1690143617_created_ingresos.js
    1690143631_updated_ingresos.js
  CHANGELOG.md
  LICENSE.md
  pocketbase.exe
public/
  next.svg
  vercel.svg
.gitignore
next-env.d.ts
next.config.js
package-lock.json
package.json
postcss.config.js
README.md
tailwind.config.js
tsconfig.json

在我的客户端组件(enviarIngresosCliente.tsx)中，我有一个向/app/api/ingresos发送POST请求的表单:

'use client'

import { useState } from 'react';

export default function EnviarIngresos() {
  // ...state setup...

  return (
    <form action="/app/api/ingresos" method="POST">
      {/* form fields... */}
    </form>
  );
}

在我的路由处理程序(app/api/route.ts)中，我按如下方式处理POST请求:

import PocketBase from 'pocketbase';

export async function POST(request: Request) {
  const { fuente, cantidad, fecha } = await request.json();

  const pb = new PocketBase('http://127.0.0.1:8090');
  await pb.collection('ingresos').create({
    fuente,
    cantidad,
    fecha,
  });

  return new Response('Ingreso created successfully', { status: 200 });
}

但每当我提交表单时，我都会收到404错误.错误消息为GET http://localhost:3000/app/api/ingresos 404 (Not Found).

我已经判断了Next.js文档，据我所知，我正确地遵循了路由处理程序的约定.但我一定错过了什么，因为它不起作用.

有谁知道可能出了什么问题吗？如有任何帮助，将不胜感激！