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