I have a single Next.js application deployed with two domains pointing to the same service. However, I need to serve static assets (JS, CSS, etc.) from different CDNs based on the incoming domain. For example, if the request comes from domain1.com, assets should load from https://cdn1.mydomain.com; if from domain2.com, they should load from https://cdn2.mydomain.com.

The challenge is that the assetPrefix in next.config.js is set at build time and applies globally, making it static. I’ve considered using dynamic rewriting techniques—such as Next.js middleware to handle this, but I’m looking for guidance on the best approach to implement this dynamic behavior.

Key Points:
• Single Deployment, Multiple Domains: One application instance is accessed via two different domain names.
• Different CDN URLs: Each domain should serve assets from its respective CDN.
• Static Build-Time Configuration: assetPrefix in next.config.js is static and cannot change based on runtime host.
• Potential Solutions Explored:
• Building separate deployments per domain.
• Using Next.js middleware to rewrite asset requests.

I’m seeking community input on the best practices and potential solutions to dynamically set the CDN URL based on the incoming request’s host. Any advice or examples would be greatly appreciated!