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