Route workin in Dev and not Prod? | Next.js | Page 1

tender hatch Jul 7, 2024, 5:26 PM

#

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


```js
// /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();
  }
}

distant crowBOT Jul 7, 2024, 5:26 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tender hatch Jul 8, 2024, 3:16 PM

#

Bump sobskull

young sparrow Jul 8, 2024, 3:19 PM

#

is likely due to how Vercel handles API routes

#

Sometimes, Vercel’s serverless environment has slight differences compared to local environments

#

try this

#

WAIT

#

@tender hatch u using typescript?

tender hatch Jul 8, 2024, 3:21 PM

#

Yeah

young sparrow Jul 8, 2024, 3:21 PM

#

bro

#

then why u doing your API with JS

#

API routes should always be like

api/cats/route.ts```

tender hatch Jul 8, 2024, 3:22 PM

#

Its TS, weird typo in my comments

#

My bad

young sparrow Jul 8, 2024, 3:22 PM

#

tender hatch Its TS, weird typo in my comments

u following the API route structure?

#

or you doing

api/cats.ts```

tender hatch Jul 8, 2024, 3:24 PM

#

/api/defendants/route.ts

#

Yeah, Im no pro but I made many NextJS app and never had this issue

#

young sparrow Jul 8, 2024, 3:25 PM

#

tender hatch

oh nice, then its okay

#

well then yeah try this;

tender hatch Jul 8, 2024, 3:25 PM

#

Super weird

young sparrow Jul 8, 2024, 3:26 PM

#

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

#

@tender hatch ^^^^^^^^^^^^^^^^^^^^

tender hatch Jul 8, 2024, 3:27 PM

#

Hmm so the point of this is to catch if we calling unsupported call?

young sparrow Jul 8, 2024, 3:28 PM

#

tender hatch Hmm so the point of this is to catch if we calling unsupported call?

ye, basically

tender hatch Jul 8, 2024, 3:28 PM

#

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?

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```

young sparrow Jul 8, 2024, 3:29 PM

#

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

tender hatch Jul 8, 2024, 3:30 PM

#

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 🙂

young sparrow Jul 8, 2024, 3:31 PM

#

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

tender hatch Jul 8, 2024, 3:32 PM

#

Ok appreciate it anyways, will lyk what happens after its built

young sparrow Jul 8, 2024, 3:32 PM

#

but wish u a goodluck

#Route workin in Dev and not Prod?