[FEAAS] Nextjs Image for FEAAS

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json

@@ -2,6 +2,6 @@
   "dependencies": {
     "@sitecore/components": "^1.1.3",
     "@sitecore-cloudsdk/events": "^0.1.1",
-    "@sitecore-feaas/clientside": "^0.5.0"
+    "@sitecore-feaas/clientside": "^0.5.17"
   }
 }

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Scripts.tsx

@@ -1,12 +1,14 @@
 // The BYOC bundle imports external (BYOC) components into the app and makes sure they are ready to be used
 import BYOC from 'src/byoc';
 import CdpPageView from 'components/CdpPageView';
+import FEAASScripts from 'components/FEAASScripts';
 
 const Scripts = (): JSX.Element => {
   return (
     <>
       <BYOC />
       <CdpPageView />
+      <FEAASScripts />
     </>
   );
 };

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts

@@ -22,4 +22,5 @@ import './index.hybrid';
 // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available
 // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout
 FEAAS.enableNextClientsideComponents(dynamic, ClientBundle);
+
 export default FEAAS.ExternalComponentBundle;

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/FEAASScripts.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import nextConfig from 'next.config';
+// Element implementations for Sitecore Component Builder can be overriden here
+
+const FEAASScripts = (): JSX.Element => {
+  // we cannot use nextjs's logic for remotePatterns matching without extra dependencies
+  // so we use a limited approach for now - which will be replaced once nextjs allows to fall back to unoptimized OOB
+  const shouldOptimize = (src: string) => {
+    if (src.startsWith('http')) {
+      const url = new URL(src);
+      const domains: string[] = nextConfig().images?.domains || [];
+      return (
+        domains.some((domain) => url.hostname === domain) ||
+        url.hostname.match(/feaas\S*\.blob\.core\.windows\.net/)
+      );
+    }
+    return true;
+  };
+
+  // Register next Image to be used in Component Builder.
+  // Nextjs image implementation will be used when img is rendered in component from Component Builder
+  FEAAS.setElementImplementation('img', (attributes: Record<string, string>) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, src, alt, ...imgAttributes } = attributes;
+    return (
+      <Image
+        height={1920}
+        width={1200}
+        unoptimized={!shouldOptimize(src)}
+        src={src}
+        alt={alt}
+        {...imgAttributes}
+      />
+    );
+  });
+
+  return <></>;
+};
+
+export default FEAASScripts;

packages/create-sitecore-jss/src/templates/nextjs/next.config.js

@@ -45,7 +45,7 @@ const nextConfig = {
         hostname: 'feaas*.blob.core.windows.net',
         port: '',
       },
-    ],
+    ]
   },
 
   async rewrites() {