Sanity CDN images not loading in Safari (production only) with next/image

This is most likely a Next.js configuration issue where cdn.sanity.io hasn't been properly added to your allowed image domains. The fact that it works on localhost but fails in production on Safari is a strong indicator of missing Next.js image optimization configuration.

When you use next/image with external image sources like Sanity's CDN, Next.js requires explicit configuration to allow those domains. Without this configuration, Next.js won't optimize the images properly, and browsers (particularly Safari) may fail to render them.

The primary solution is to configure your next.config.js:

For Next.js 12.3+ (recommended):

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.sanity.io',
      },
    ],
  },
}

For older Next.js versions:

module.exports = {
  images: {
    domains: ['cdn.sanity.io'],
  },
}

After adding this configuration, you'll need to rebuild and redeploy your application.

Why this affects Safari specifically:

Safari tends to be more strict about content types and security policies than other browsers. When Next.js can't properly optimize the image due to missing domain configuration, it may serve the image in a way that Safari's security policies reject, while Chrome or Firefox might be more lenient. The localhost environment often bypasses some of these optimization checks, which is why you see different behavior between development and production.

Additional troubleshooting steps:

1. Verify the image is accessible - Test the direct Sanity CDN URL (without Next.js's /_next/image wrapper) in Safari: https://cdn.sanity.io/images/ebplvzey/production/89d3576237a2b8840362eb811207e9d336137ed5-1200x630.jpg. If this loads fine, it confirms the issue is with Next.js configuration, not Sanity's CDN.

2. Check your browser console - Look for any specific error messages in Safari's developer console that might provide more details about why the image isn't loading.

3. Use Sanity's image URL builder - If you're not already using it, the @sanity/image-url helper library makes it easier to construct properly formatted Sanity image URLs. According to Sanity's Image Pipeline documentation, these URLs are designed to work seamlessly with modern frameworks like Next.js.

The remotePatterns (or domains) configuration is the standard requirement for using external image sources with Next.js Image component, and adding this should resolve your Safari loading issue in production.