For some reason when working through Nginx, jpg images are not loading. Although svg images work fine. Everything works via HTTP (127.0.0.1:3000), so the problem is in NGINX. I have no idea how to fix that. Im using Node v20, npm, nginx, nextjs v13.5.4
Nginx configuration:
server {
server_name ylous.keenetic.link www.ylous.keenetic.link;
server_tokens off;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
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 / {
proxy_pass http://127.0.0.1:3000;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/ylous.keenetic.link/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/ylous.keenetic.link/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.ylous.keenetic.link) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = ylous.keenetic.link) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name ylous.keenetic.link www.ylous.keenetic.link;
return 404; # managed by Certbot
}
Next Image usage:
<Image src={Snicker} alt="Sniker" width={200} height={80} className="rounded-xl" priority/>
Example request: https://ylous.keenetic.link/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsnicker.2ee2553c.jpg&w=640&q=75
Code: 500
Response: "url" parameter is valid but upstream response is invalid
All images are expected to load normally. Found someone on DigitalOcean with the same problem, he solved it but didn't provide the solution itself LOL
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 / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Url-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
}
Everything works. I will leave the question so that other people who encounter this problem can find a solution