Next.js Discord

Discord Forum

Route workin in Dev and not Prod?

Unanswered
oz posted this in #help-forum
Open in Discord
ozOP
Hey guys I have a route defined (code below) that in dev works fine, I call it with PUT and it does just that fine. I am using latest NextJS 14 and am hosgting prod env in Vercel. In prod I get: 
Request URL:
https://xxxxxx/api/defendants?id=13
Request Method:
PUT
Status Code:
405 Method Not Allowed
Remote Address:
xxxxxxx
Referrer Policy:
strict-origin-when-cross-origin


But the same call works perfectly fine in dev
Request URL:
http://localhost:3000/api/defendants?id=210
Request Method:
PUT
Status Code:
200 OK
Remote Address:
[::1]:3000
Referrer Policy:
strict-origin-when-cross-origin


// /api/defendants.js
import { NextRequest, NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export async function GET() {
  try {
    const defendants = await prisma.defendant.findMany({
      select: {
        id: true,
        companyName: true,
        companyAddress: true,
        ownerName: true,
        ownerAddress: true,
        ownerPhone: true,
        ownerEmail: true,
      },
    });

    return NextResponse.json({ defendants });
  } catch (error) {
    console.error("Error fetching defendants:", error);
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 },
    );
  } finally {
    await prisma.$disconnect();
  }
}

export async function PUT(request: NextRequest) {
  try {
    const data = await request.json();
    const updatedDefendant = await prisma.defendant.update({
      where: { id: data.id },
      data: {
        companyName: data.companyName,
        companyAddress: data.companyAddress,
        ownerName: data.ownerName,
        ownerAddress: data.ownerAddress,
        ownerPhone: data.ownerPhone,
        ownerEmail: data.ownerEmail,
      },
    });

    return NextResponse.json({ defendant: updatedDefendant });
  } catch (error) {
    console.error("Error updating defendant:", error);
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 },
    );
  } finally {
    await prisma.$disconnect();
  }
}

37 Replies

ozOP
Bump :sobskull:
Masai Lion
is likely due to how Vercel handles API routes
Sometimes, Vercel’s serverless environment has slight differences compared to local environments
try this
WAIT
@oz u using typescript?
ozOP
Yeah
Masai Lion
bro
then why u doing your API with JS
API routes should always be like

api/cats/route.ts
ozOP
Its TS, weird typo in my comments
My bad
@oz Its TS, weird typo in my comments
Masai Lion
u following the API route structure?
or you doing 
api/cats.ts
ozOP
/api/defendants/route.ts
Yeah, Im no pro but I made many NextJS app and never had this issue
@oz Click to see attachment
Masai Lion
oh nice, then its okay
well then yeah try this;
ozOP
Super weird
Masai Lion
// /app/api/defendants/route.ts
import { NextRequest, NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export async function GET() {
  try {
    const defendants = await prisma.defendant.findMany({
      select: {
        id: true,
        companyName: true,
        companyAddress: true,
        ownerName: true,
        ownerAddress: true,
        ownerPhone: true,
        ownerEmail: true,
      },
    });
    return NextResponse.json({ defendants });
  } catch (error) {
    console.error("Error fetching defendants:", error);
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  } finally {
    await prisma.$disconnect();
  }
}

export async function PUT(request) {
  try {
    const data = await request.json();
    const updatedDefendant = await prisma.defendant.update({
      where: { id: data.id },
      data: {
        companyName: data.companyName,
        companyAddress: data.companyAddress,
        ownerName: data.ownerName,
        ownerAddress: data.ownerAddress,
        ownerPhone: data.ownerPhone,
        ownerEmail: data.ownerEmail,
      },
    });
    return NextResponse.json({ defendant: updatedDefendant });
  } catch (error) {
    console.error("Error updating defendant:", error);
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  } finally {
    await prisma.$disconnect();
  }
}

export async function ANY() {
  return NextResponse.json({ error: "Method Not Allowed" }, { status: 405 });
}
@oz ^^^^^^^^^^^^^^^^^^^^
ozOP
Hmm so the point of this is to catch if we calling unsupported call?
ozOP
Will try but weird as I shared the request (attached below for convenience) and it seems I am calling it correctly but maybe its not since it is not passing a NextRequest object somehow?

Request URL:
https://xxxxxx/api/defendants?id=13
Request Method:
PUT
Status Code:
405 Method Not Allowed
Remote Address:
xxxxxxx
Referrer Policy:
strict-origin-when-cross-origin
Masai Lion
mmmm
how about this?
// Ensure the file is named route.js and placed correctly under /app/api/defendants/
import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// Handle GET requests
export async function GET() {
  try {
    const defendants = await prisma.defendant.findMany({
      select: {
        id: true,
        companyName: true,
        companyAddress: true,
        ownerName: true,
        ownerAddress: true,
        ownerPhone: true,
        ownerEmail: true,
      },
    });
    return NextResponse.json({ defendants });
  } catch (error) {
    console.error("Error fetching defendants:", error);
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  } finally {
    await prisma.$disconnect();
  }
}

// Handle PUT requests
export async function PUT(request) {
  try {
    const data = await request.json();
    const updatedDefendant = await prisma.defendant.update({
      where: { id: data.id },
      data: {
        companyName: data.companyName,
        companyAddress: data.companyAddress,
        ownerName: data.ownerName,
        ownerAddress: data.ownerAddress,
        ownerPhone: data.ownerPhone,
        ownerEmail: data.ownerEmail,
      },
    });
    return NextResponse.json({ defendant: updatedDefendant });
  } catch (error) {
    console.error("Error updating defendant:", error);
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  } finally {
    await prisma.$disconnect();
  }
}

// Handle unsupported methods
export async function ANY() {
  return NextResponse.json({ error: "Method Not Allowed" }, { status: 405 });
}
ozOP
Whats the difference here? and I added badck the type nextRequest for the PUT params if thats okay
Also thank you for your help debugging this 🙂
Masai Lion
tbh its a rare case
ive never had this issues before
i think i will leave it to other member cuz I gotta do something
sorry
ozOP
Ok appreciate it anyways, will lyk what happens after its built
Masai Lion
but wish u a goodluck
ozOP
No worries 🙂 you helped a bunch already proving I am not crazy