I have a basic webapp where a user uploads a PDF on the client, the pdf is sent to my API endpoint (on the server) and then a JSON object is returned. File structure:

src/app
api
parse-pdf.ts
page.tsx

# page.txt
'use client'
...
  const sendFile = async (file: File) => {
      // Convert the file to ArrayBuffer
      const arrayBuffer = await fileToArrayBuffer(file);

      const response = await fetch('/api/parse-pdf', {
        method: 'POST',
        headers: { 'Content-Type': 'application/pdf'},        
        body: arrayBuffer
      });
      if (response.ok) {
        const json = await response.json();
      } else {
        console.error('Failed to process PDF.');
      }
  };

# parse-pdf.ts
import { NextResponse } from 'next/server';
 
export async function Post(request: Request) {

  const pdfBuffer = await request.arrayBuffer();  

  // Do something with the PDF buffer here...

  const result = {message: "PDF processed successfully."};
 
  return NextResponse.json(
    { result },
    {
      status: 200,
    },
  );
}

I am using

npm run dev

to run this locally. When I upload a PDF, I get the errors shown in the photo. It looks like its not even locating the endpoint? What am I doing wrong? Thank you!