Загрузка файлов NextJs и Multer 405 Метод запрещен с использованием следующего подключения

Question

Я пытаюсь загрузить аудиофайлы с помощью своего приложения NextJs и отправить их на внешний API, откуда я хочу получить ответ, но получаю error: "Method 'POST' Not Allowed"

Это мой код внешнего интерфейса:

      const MediaUploader = () => {
  const [file, setFile] = useState(null);
  const fileInput = React.createRef();

  const chooseFileHandler = (e) => {
    fileInput.current.click();
  };

  const onFileChange = (e) => {
    console.log(e.target.files);
    setFile(e.target.files[0]);
  };

  const submit = (e) => {
    console.log("submited");
    const formData = new FormData();
    formData.append("mediaFile", file);

    fetch("/api/media", {
      method: "POST",
      body: formData,
      
    })
      .then((res) => res.json())
      .then((data) => {
        console.dir(data, " responsi pi te uploaderi");
      })
      .catch((err) => console.log(err, "error pi te uploaderi"));
  };

  return (
    <>
      <h1>{file ? file.name : "choose a fileee"}</h1>
      <input type="file" ref={fileInput} onChange={onFileChange} />
      <button onClick={chooseFileHandler}>Choose File</button>
      <button onClick={submit}>Submittt</button>
    </>
  );
};

export default MediaUploader;

И это мой маршрут API NextJs с использованием следующего подключения:

      import nc from "next-connect";
import multer from "multer";
//const multer = require("multer");

const { RevAiApiClient } = require("revai-node-sdk");

const access_token = process.env.NEXT_PUBLIC_REVAI_ACCESS_TOKEN;
const mediaPath = process.env.NEXT_PUBLIC_MEDIA_PATH || "public/media/";
const port = 3000;
const webhookBaseUrl =
  process.env.NEXT_PUBLIC_WEBHOOK_BASE_URL || `http://localhost${port}`;


const asyncClient = new RevAiApiClient(access_token);

export const config = {
  api: {
    bodyParser: false,
  },
};



const upload = multer({
  storage: multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, req.mediaPath);
    },
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

const apiRoute = nc({
  onError(error, req, res) {
    res
      .status(501)
      .json({ error: `Sorry something Happened! ${error.message}` });
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  },
});

apiRoute.use((req, res, next) => {
  req.asyncClient = asyncClient;
  req.mediaPath = mediaPath;
  req.webhookBaseUrl =
    process.env.WEBHOOK_BASE_URL || `http://localhost${port}`;
  next();
});

apiRoute.use("/media", mediaPath);

const sendFile = multer({ upload });


apiRoute.post("/", sendFile.single("mediaFile"), async (req, res) => {
  
  try {
    const media_url = `${req.webhookBaseUrl}/media/${req.file.filename}`;
    const webhook_url = `${req.webhookBaseUrl}/api/job`;
    console.log(`submit job: ${JSON.stringify({ media_url, webhook_url })}`);

    console.log("BODYYY", JSON.parse(JSON.stringify(req.body)));

    const job = await req.asyncClient.submitJobUrl(media_url, {
      callback_url: webhook_url,
    });

    

    res.json(job);
  } catch (error) {
    console.dir(`Error: ${error}`);
    res.status(500).json({ error });
  }
  //res.status(200).json({ data: "success" });

  return;
});

export default apiRoute;

Однако когда я делаю это в apiRoute.post() функция:

      const sendFile = multer({ upload });
apiRoute.use(sendFile.single("mediaFile"));

  apiRoute.post(async (req, res) => {
  try {
    const media_url = `${req.webhookBaseUrl}/media/${req.file.filename}`;
    const webhook_url = `${req.webhookBaseUrl}/api/job`;
    console.log(`submit job: ${JSON.stringify({ media_url, webhook_url })}`);

    console.log("BODYYY", JSON.parse(JSON.stringify(req.body)));

    const job = await req.asyncClient.submitJobUrl(media_url, {
      callback_url: webhook_url,
    });

    res.json(job);
  } catch (error) {
    console.dir(`Error: ${error}`);
    res.status(500).json({ error });
  }
  //res.status(200).json({ data: "success" });

  return;
});

я не понимаю 405 ошибка, он отправляет ответ API, но я получаю undefined для ${req.file.filename} в этой строке: const media_url =${req.webhookBaseUrl}/media/${req.file.filename}; потому что Multer вообще не загружает файл в указанную папку.

Любая помощь будет оценена.