"body exceeded 1mb limit" in nextjs api routes

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

v16.5.0

What browser are you using?

Brave

What operating system are you using?

Arch Linux

How are you deploying your application?

next

Describe the Bug

I am trying to build a react image uploader application with nextjs api routes.

The /api/upload api file:

import cloudinary from 'cloudinary'

export const uploadDir = 'cules-uploader/'

const handler = async ({ body, method }, res) => {
	try {
		if (method !== 'POST')
			return res.status(400).json({ message: 'Invalid method' })

		const cloudinaryV2 = cloudinary.v2

		cloudinaryV2.config({
			cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
			api_key: process.env.CLOUDINARY_API_KEY,
			api_secret: process.env.CLOUDINARY_API_SECRET,
		})

		const { src } = body

		const imageConfig = {
			width: 1920,
			height: 1080,
			crop: 'fit',
			quality: 80,
			folder: uploadDir,
		}

		const { public_id } = await cloudinaryV2.uploader.upload(src, imageConfig)

		return res.json({ success: true, public_id })
	} catch (e) {
		return res.status(400).send({ message: 'Error processing request' })
	}
}

export default handler

I try to send a request from my client side code with axios:

const handleUpload = async () => {
	  const { data } = await axios.post('/api/upload', {
		src: base64File,
	})
  }

It works fine if the file size is less than 1mb. But if file is more than 1mb, I get 413 error.

I also extend the body parser size limit on next.config.js file.

module.exports = {
	reactStrictMode: true,
	api: {
		bodyParser: {
			sizeLimit: '50mb',
		},
	},
}

But I still get 413 error. If I send a request with postman, then it works.

Expected Behavior

When I want to send request body more than 1mb, I don’t want to get the following 413 error.

To Reproduce

/api/upload file:

import cloudinary from 'cloudinary'

export const uploadDir = 'cules-uploader/'

const handler = async ({ body, method }, res) => {
	try {
		if (method !== 'POST')
			return res.status(400).json({ message: 'Invalid method' })

		const cloudinaryV2 = cloudinary.v2

		cloudinaryV2.config({
			cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
			api_key: process.env.CLOUDINARY_API_KEY,
			api_secret: process.env.CLOUDINARY_API_SECRET,
		})

		const { src } = body

		const imageConfig = {
			width: 1920,
			height: 1080,
			crop: 'fit',
			quality: 80,
			folder: uploadDir,
		}

		const { public_id } = await cloudinaryV2.uploader.upload(src, imageConfig)

		return res.json({ success: true, public_id })
	} catch (e) {
		return res.status(400).send({ message: 'Error processing request' })
	}
}

export default handler

Client side code:

const handleUpload = async () => {
	  const { data } = await axios.post('/api/upload', {
		src: base64File,
	})
  }