CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
Vladimirzb
Vladimirzb

Reputation: 497

Getting 404 Error with Next.js Route Handlers

I'm currently working on a Next.js project and I'm encountering an issue with the new Route Handlers feature. I'm trying to handle a POST request from a form in a client component, but I keep getting a 404 error.

Here's the structure of my project:

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

In my client component (enviarIngresosCliente.tsx), I have a form that sends a POST request to /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>
  );
}

And in my Route Handler (app/api/route.ts), I'm handling the POST request like this:

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

But whenever I submit the form, I get a 404 error. The error message is GET http://localhost:3000/app/api/ingresos 404 (Not Found).

I've checked the Next.js documentation and as far as I can tell, I'm following the conventions for Route Handlers correctly. But I must be missing something because it's not working.

Does anyone have any idea what might be going wrong? Any help would be greatly appreciated!

Upvotes: 2

Views: 1173

Answers (1)

Emir
Emir

Reputation: 36

import { useState } from 'react';

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

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

Upvotes: 2

Related Questions