Hey, I've been caught on this for the last two days.

I have an api route that takes in an image for uploading to my supabase storage bucket. When run on localhost everything works perfectly, but when the API route gets hit on the vercel host I get an error 405 (Method Not Found).

I believe this may be an issue with Sharp + NextJS working together as I had to downgrade sharp already to avoid another bug (https://github.com/orgs/vercel/discussions/5449#discussioncomment-8118778).

Here is my api route:

import { NextRequest, NextResponse } from "next/server";

import { cookies } from "next/headers";
import { createServerClient } from "@supabase/ssr";
import { getUser } from "@/lib/utils";
import sharp from "sharp";

export async function POST(request: NextRequest) {
  // Check if environment variables are set
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
  if (!supabaseUrl || !supabaseAnonKey) {
    return NextResponse.json(
      { error: "Server configuration error." },
      { status: 500 }
    );
  }

  const cookieStore = cookies();
  const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
    cookies: {
      get(name: string) {
        return cookieStore.get(name)?.value;
      },
    },
  });

  try {
    const formData = await request.formData();
    const file = formData.get("file");
    const fileName = formData.get("fileName");

    if (!file || typeof file !== "object" || !(file instanceof Blob)) {
      return NextResponse.json(
        { error: "Invalid file provided." },
        { status: 400 }
      );
    }

    if (!fileName || typeof fileName !== "string") {
      return NextResponse.json(
        { error: "Invalid file name provided." },
        { status: 400 }
      );
    }

    const reformattedFileName = fileName
      .replace(/\s/g, "_")
      .replace(/[^\w.-]/g, "");

    const convertedImage = await sharp(Buffer.from(await file.arrayBuffer()))
      .resize(750, 750, { fit: "cover", position: "center" })
      .webp()
      .toBuffer();

    const user = await getUser(cookieStore);
    if (!user) {
      return NextResponse.json(
        { error: "User authentication failed." },
        { status: 401 }
      );
    }

    const { data, error: selectError } = await supabase
      .from("restaurants")
      .select("id")
      .eq("client", user.id)
      .single();

    if (selectError) {
      throw selectError;
    }

    const { error: uploadError } = await supabase.storage
      .from("f3ast-client-menu-assets")
      .upload(`${data.id}/${reformattedFileName}.webp`, convertedImage, {
        contentType: "image/webp",
      });

    if (uploadError) {
      throw uploadError;
    }

    return NextResponse.json({ Message: "Success", status: 201 });
  } catch (error: any) {
    console.error("Error occurred: ", error);
    return NextResponse.json({
      Message: "Failed",
      status: 500,
      error: error.message,
    });
  }
}