nextjs - 💡(How to fix) Fix 502: Bad Gateway [1 comments, 2 participants]

I'm facing the same problem. I'm using remote CDN images and have set remotePatterns in next.config.js, but I get the same error with some images. Also, 502 is random, sometimes image is served, sometimes not.

TL;DR

The issue with randomly failing image serving over a CDN might be related to URL encoding, specifically the conversion of %20 to %2520, which could be causing inconsistencies in image requests.

Guidance

• Verify if the issue persists when using a URL without spaces or special characters to isolate the encoding problem.
• Check the CDN configuration to ensure it correctly handles URL encoding, particularly for spaces represented as %20.
• Test if the problem occurs with images hosted locally or only with those served from the remote CDN to narrow down the cause.
• Consider encoding the URL differently or using a library to handle URL encoding to prevent the %20 to %2520 conversion.

Example

No specific code example can be provided without more context, but ensuring proper URL encoding might involve using a function like encodeURIComponent() in JavaScript to handle special characters.

Notes

The randomness of the 502 error and the image sometimes being served suggests an intermittent issue, possibly related to how the CDN handles requests or the specific images being requested. The conversion of %20 to %2520 could be a red herring or a symptom of a larger encoding issue.

Recommendation

Apply a workaround by ensuring consistent URL encoding for images, possibly by manually encoding URLs or using a library to handle this, as the root cause seems related to how URLs are interpreted by the CDN or the application.