[FEAAS] Nextjs Image for FEAAS

[art-alexeyenko]

• This PR follows the Contribution Guide
• Changelog updated

Description / Motivation

This change will ensure nextjs's implementation for Image is used when img elements are rendered withing FEAAS Components (from Component Builder). It also adds remotePatterns presets for dev and prod in nextjs.config - to allow easier management of rules for editing/dev and live deployments.

Note: FEAAS call is put into a separate component so as to not bloat Scripts.tsx. The feaas logic also doesn't belong under /byoc folder - so we're not putting it in byoc/index either.

Testing Details

• Unit Test Added
• Manual Test/Other (Please elaborate) - editing, connected, production modes

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

[Inviz]

Good progress forward, but we need to ensure that we are not dropping the ball on non-whitelisted images. As we're building a foolproof drop-in solution, and we need to balance the security concerns... we at least need to do the best effort. In this case, it should be not discarding the image.

[art-alexeyenko]

Short update on implementation: we cannot match nextjs's matching logic without an extra dependency.
So the plan is this: we do limited matching for now. I will submit a PR for Vercel so images allow fallback to their unoptimized state if remotePatterns don't match. If and when it is released we revisit this implementation and simplify it.

[illiakovalenko]

I approved, looks good 👍
Wait for Adam's approve and feel free to merge

[ambrauer]

Looks great! 👍