Image optimization for external domains doesn't support dynamic subdomains

[0xjessel]

What version of Next.js are you using?

v10.2.1

What version of Node.js are you using?

v15.12.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

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.

Expected Behavior

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'],
  },
}  

or if next.js can not require subdomains and only require the domain to match.

To Reproduce

Personal callsite that repros: https://github.com/0xjessel/jessechen.net/blob/main/pages/index.js#L50

1. Call IG Graph API on localhost and whitelist URL (e.g. scontent.cdninstagram.com) to enable image optimization
2. Verify IG thumbnails load on localhost
3. Deploy to vercel
4. Observe that IG thumbnails fail to load
5. Observe build logs to find that IG Graph API returns a different subdomain (e.g. scontent-iad3-2.cdninstagram.com) based on region and/or other factors.

[0xjessel]

@timneutkens saw you moved this into a discussion - thanks for triaging it to the proper place.

do you know or can you tag someone that can advise 1) whether this is a legitimate issue and 2) if there are any known ways to navigate around this issue? thanks

[GodGardensGuns]

I came here because of the exact same issue with the exact same image source 😂 so +1 from me.

The Instagram CDN subdomain seems to change on a whim. This proposed solution is much better than trying to main a huge array of subdomain strings.

[studiogram]

+1 here