Handling file uploads in a Next.js App Router backend-only API — Multer doesn’t work, what’s the best approach?

I’m building a backend-only Next.js API project (npx create-next-app@latest --api) that serves a frontend hosted on another platform (React Native, web app, etc.).

I need to handle file uploads (multipart/form-data), but I’m running into some issues.

Current approach

I tried using Multer, which works perfectly in Express or Pages Router, like this:

import multer from 'multer' import { v4 as uuidv4 } from 'uuid' const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './public/temp') }, filename: function (req, file, cb) { cb(null, `${uuidv4()}-${file.originalname}`) } }) export const upload = multer({ storage })

But this doesn’t work in Next.js App Router (app/api) because:

API routes in App Router use standard Web Request objects, not Express req/res.

Middleware like next-connect and upload.single('file') are not compatible.

req.cookies and req.body don’t exist in the same way, causing TypeScript/runtime errors.