Next.js 14 App Router: API route returns 405 Method Not Allowed for POST request, but identical route structure works elsewhere

Question

I have two similar API routes in my Next.js 14 app using the App Router:

Running locally both run fine. However, when I deploy to Vercel the vision one works but the mini returns a 405 error.

/api/vision/describe-image/route.ts (works correctly) /api/mini/describe-image/route.ts (returns 405 error)

Both files export a POST function and handle requests similarly. The working route processes image data with OpenAI's API, while the non-working route attempts to do the same.

I'm calling the non-working route like this:

javascriptCopyconst response = await fetch("/api/mini/describe-image", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    message: "Image uploaded by user",
    image: imageData,
    conversation,
    visitorId: user?.sub ?? visitorId,
    conversationId,
  }),
});

I've verified that the file structure is correct and that I'm sending a POST request. What could be causing this 405 error, and how can I troubleshoot it?

Any ideas?

Answer 1

I had a code with Pages Router that was facing the same error:

import * as admin from 'firebase-admin';

// Problem was here out of the backend handler.
if (!admin.apps.length)
  admin.initializeApp({
  // ...
  });

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
// ...
}

Turns out the error was happening outside the handler, while I was initializing the firebase-admin (It was a missing variable on Vercel).

Vercel assumes you couldn't handle this request if the error was thrown outside the route handlers, so it returns the 405 HTTP status.

I recommend you check your function logs into Vercel to make sure the same is happening with you. You can do that by going to your project on Vercel and clicking 'Logs' on the top.