Issue with uploading images and videos in next.js with nginx

General
1

I’m currently facing an issue with uploading images and videos in my Next.js application hosted on a VPS. Despite modifying the permissions for the necessary directories, I’m still unable to upload any media files. Here are the details of my setup: nextjs 14, nginx, PM2 and VPS Ubuntu

I have set the permissions for the public directory:

sudo chown -R ubuntu:ubuntu /var/www/nextjs/Project/public
sudo chmod -R 755 /var/www/nextjs/Project/public

nginx configuration:

server {
    listen 80;
    server_name (mydomain);

    client_max_body_size 100M;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /_next/static/ {
        alias /var/www/nextjs/Project/.next/static/;
    expires 365d;
        access_log off;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
       access_log off;
       log_not_found off;
       expires 365d;
       add_header Cache-Control "public, max-age=31536000, immutable";
    }


    location /recipe_img/ {
        alias /var/www/nextjs/Project/public/recipe_img/;
        access_log off;
        expires max;
    }

    
    location /tips_img/ {
        alias /var/www/nextjs/Project/public/tips_img/;
        access_log off;
        expires max;
    }
  
    location /recipe_video/ {
        alias /var/www/nextjs/Project/public/recipe_video/;
        access_log off;
        expires max;
    }

    location /tips_video/ {
        alias /var/www/nextjs/Project/public/tips_video/;
        access_log off;
        expires max;
    }
}
2

1. Check File Upload Limits:

  • You’ve already added client_max_body_size 100M; in your Nginx configuration, which allows file uploads up to 100 MB. Ensure that this directive is correctly placed inside the http, server, or location block.
  • Verify that other configurations are not overriding this value. For example, check /etc/nginx/nginx.conf or any included files to make sure no lower limit is set elsewhere.

2. Check PM2 Permissions:

Since PM2 is running your application, make sure PM2 has the correct user permissions. If your app is being run by a different user, PM2 might not have the correct access to the directories.

You can try restarting PM2 under the same user that owns the project files (in your case, ubuntu):

pm2 stop all
pm2 start all --user ubuntu

3. Verify Directory Permissions:

The following permissions should be set for the directories where you are saving uploaded files:

sudo chown -R ubuntu:ubuntu /var/www/nextjs/Project/public
sudo chmod -R 755 /var/www/nextjs/Project/public

Since you’ve already done this, double-check that the directory permissions allow writing by running:

ls -ld /var/www/nextjs/Project/public

Also, make sure that the Next.js application writes the uploaded media files to the correct location. The public directory should be accessible by the server, and the path to which the files are uploaded should be correctly configured in your Next.js application.

4. Check Nginx Proxy Configuration:

Your Nginx configuration looks mostly fine, but ensure that the proxy_pass block is correctly passing requests to the Next.js server.

Add proxy_buffers to avoid potential issues with large uploads:

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_buffers 8 16k;
    proxy_buffer_size 32k;
}

5. Check for Next.js Static File Behavior:

Next.js treats the public directory as a static file directory. Ensure that any uploaded files are being stored in a different directory if they are dynamic or user-generated, as modifying files in the public directory can cause problems.

You could save uploaded files to a separate directory, e.g., /var/www/nextjs/Project/uploads, and configure Nginx to serve those files:

location /uploads/ {
alias /var/www/nextjs/Project/uploads/;
}

6. Next.js API Route Configuration:

If you’re handling file uploads through an API route, ensure that the logic for handling file uploads is correctly implemented in your Next.js application. Use libraries like multer to handle file uploads and ensure that the file paths are correctly referenced.

If these steps don’t resolve the issue, please share any error messages from the Nginx error logs (/var/log/nginx/error.log) or the Next.js application logs, and I can assist further!