Next.js App API route returning 404 even though route is present

[mikr13]

Summary

I have a POST:/api/github route in my next.js app.
Path to file: src/app/api/github/route.ts

When I try calling the API from postman, it returns 404 error, when I open up browser to just check in case, that also returns 404 error. I also don't have any conflicting paths in app router

PFA the screenshots for more details:

Directory ss:

Ngrok API Response ss:

Next.js logs:

Code SS:

Please help. Thanks!

Additional information

"next": "15.1.2",
"react": "^19.0.0",

Example

No response

[eric-mxrtin]

I had a similar issue, try a full server restart and clearing your .next build folder.

Also, could be an issue with your Nextjs version?

[mikr13]

I did that, I deleted the .next & node_modules folder & tried. Still nothing. Let me see about downgrading to 14

[mikr13]

Downgrading to 14 didn't help either. Still getting POST 404 error

[mikr13]

I noticed something, so when I have some logic inside my route handler, it goes 404, but when I do something like:

import type { NextApiRequest } from 'next';

export async function POST(
  req: NextApiRequest,
) {
  return Response.json({ message: 'Hello from Next.js!' })
}

Then it works fine. Not sure what this behaviour is though.

[kuldip-dev]

@mikr13 Try below test code hope this will work.

// app/api/post/route.js

import { NextResponse } from 'next/server';

export async function POST(request) {
  try {
    // Parse the request body
    const body = await request.json();

    // Validate required fields
    if (!body.name || !body.email) {
      return NextResponse.json({ error: 'Name and email are required' }, { status: 400 });
    }

    // Example data processing
    const processedData = {
      id: Math.random().toString(36).substr(2, 9),
      name: body.name,
      email: body.email,
      timestamp: new Date().toISOString(),
      // Add any additional fields from body
      ...body
    };

    // Here you would typically save to a database
    // For this example, we'll just return the processed data
    return NextResponse.json(
      {
        message: 'Data received successfully',
        data: processedData
      },
      { status: 201 }
    );
  } catch (error) {
    console.error('POST request error:', error);
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

You can test this API using:

1. cURL:

curl -X POST http://localhost:3000/api/post \
-H "Content-Type: application/json" \
-d '{"name": "John Doe", "email": "john@example.com"}'

2. Thunder Client or Postman:

URL: http://localhost:3000/api/post
Method: POST
Headers: 
  Content-Type: application/json
Body:
{
  "name": "John Doe",
  "email": "john@example.com"
}