Image Optimization for External Domains: Support URL patterns for subdomains

[0xjessel]

Describe the feature you'd like to request

Request: The ability to support multiple subdomains via regex/patterns for Next.js default image optimization.

Problem

I'm building out a blog/personal website. I would like to use next/image to render my Instagram photos but Instagram's API serves thumbnail URLs like this where the hostname is scontent.cdninstagram.com. Great, so I add this hostname to my next.config.js to whitelist this external domain for image optimization.

However, Instagram has CDNs with different subdomains depending on region and so when I push my deployment on vercel, it's fetching my Instagram photos from here where the hostname is scontent-iad3-2.cdninstagram.com.

Therein lies the problem, the whitelist external domains in my next.config.js cannot possibly enumerate all the possible CDNs that Instagram has. A quick google search shows at least 20+ which is bound to change over time and is not exhaustive.

This problem arises in any situation (not just IG) where you're trying to render images on Next.js from a global CDN service that have different subdomains.

Describe the solution you'd like

Some ability to patternize URL matching. In the example above, I could whitelist all of Instagram's CDN with something like:

module.exports = {
  images: {
    domains: ['*.cdninstagram.com'],
  },
}  

Describe alternatives you've considered

I can consider not using next/image for my img component - but was hoping to take advantage of the image optimization that Next.js provides.

I can also consider using the loader functionality to have a third-party service handle it - most services cost money though and that'd be a heavy lift just to display some Instagram photos.

Hopefully I'm not missing something obvious!

[TomAstley]

I'm having the same issue. Until another solution becomes available, I am aware of the following sub-domains for Instagram. Hope this helps others. I'm sure there many more sub-domains I am missing!

scontent-ams3-1.cdninstagram.com
scontent-amt2-1.cdninstagram.com
scontent-arn2-1.cdninstagram.com
scontent-atl3-1.cdninstagram.com
scontent-dft4-1.cdninstagram.com
scontent-dft4-2.cdninstagram.com
scontent-dfw5-1.cdninstagram.com
scontent-dfw5-2.cdninstagram.com
scontent-frt3-1.cdninstagram.com
scontent-frx5-1.cdninstagram.com
scontent-iad3-1.cdninstagram.com
scontent-iad3-2.cdninstagram.com
scontent-hou1-1.cdninstagram.com
scontent-kul1-1.cdninstagram.com
scontent-lga3-2.cdninstagram.com
scontent-mia1-1.cdninstagram.com
scontent-mia3-1.cdninstagram.com
scontent-mia3-2.cdninstagram.com
scontent-msp1-1.cdninstagram.com
scontent-ort2-1.cdninstagram.com
scontent-ort2-2.cdninstagram.com
scontent-sea1-1.cdninstagram.com
scontent-sit4-1.cdninstagram.com
scontent-sjc2-1.cdninstagram.com
scontent-syd2-1.cdninstagram.com
scontent.cdninstagram.com

[shonsirsha]

Thanks a lot!!

[florianbepunkt]

Has this been solved?

[Pablo-Conte]

Hey guys! the problem was been solved?

[CarrettaRiccardo]

Seems like the * wildcard is working now, not sure from which version of nexjs. I am testing with [email protected]:

  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*.cdninstagram.com",
        port: "",
      },
    ],
  },