javascript - Får 404-fel med Next.js-rout-hanterare

Jag arbetar för närvarande på ett Next.js-projekt och jag stöter på ett problem med den nya Route Handlers-funktionen. Jag försöker hantera en POST-begäran från ett formulär i en klientkomponent, men jag får hela tiden ett 404-fel.

Här är strukturen för mitt projekt:

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

I min klientkomponent (enviarIngresosCliente.tsx) har jag ett formulär som skickar en POST-förfrågan till /app/api/ingresos:

'use client'

import { useState } from 'react';

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

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

Och i min Route Handler (app/api/route.ts) hanterar jag POST-förfrågan på detta sätt:

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 });
}

Men varje gång jag skickar in formuläret får jag ett 404-fel. Felmeddelandet är GET http://localhost:3000/app/api/ingresos 404 (Not Found).

Jag har kollat Next.js-dokumentationen och så vitt jag kan bedöma följer jag konventionerna för Route Handlers korrekt. Men jag måste missa något eftersom det inte fungerar.

Har någon någon aning om vad som kan gå fel? All hjälp skulle uppskattas mycket!

Svar #1

import { useState } from 'react';

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

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