I am working on a project with a backend in NestJS and a frontend in Next.js. I'm sending videos to the NestJS backend via server actions of Next.js, but I'm encountering a "413 Payload Too Large" error.

I found that there is a limit on the body size in the server action, and I bypassed it locally with the following configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: {
      bodySizeLimit: '100mb',
    },
  },
  images: {
    remotePatterns: [
      // S3 configuration
      {
        protocol: 'https',
        hostname: 'muuve.s3.eu-west-1.amazonaws.com',
        pathname: '/**',
      },
      {
        protocol: 'http',
        hostname: '54.74.143.212',
        pathname: '/images/users/**',
      },
    ],
  },
};

export default nextConfig;

This configuration works fine locally. However, after deploying to Vercel, I discovered that there is a 4.4 MB limit on Vercel.

I am using S3 in the NestJS backend. What possible solutions can I use to handle larger video uploads in the deployed environment?

This is what i got after researching :
1):
I am considering uploading the file directly to S3. Before uploading, I can compress the video, which I am currently doing in NestJS. After the file is uploaded to S3, I plan to send a request to the NestJS backend to perform any additional processing. But this apprach includes a lot of security concerns
2):
Another good approach is using streaming functions. This means instead of using server actions, I can use API endpoints in the Next.js 14 app router. However, in this approach, I would first need to upload the video to the Next.js API, and then send that video to the NestJS backend, which is a time-consuming process.

Please let me know which apprach should i use and Do you have an better alternative apprach