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

Question

我目前正在开发 Next.js 项目，并且遇到了新的路由处理程序功能的问题。我尝试在客户端组件中处理来自表单的 POST 请求，但不断收到 404 错误。

这是我的项目的结构:

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(未找到)。

我已经检查了 Next.js 文档，据我所知，我正确遵循了路由处理程序的约定。但我一定错过了一些东西，因为它不起作用。

有人知道可能出了什么问题吗？任何帮助将不胜感激!

Answer 1

import { useState } from 'react';

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

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