[Next.js] Render "unoptimized" Next Image in component rendering mode (#2068)

Author: illiakovalenko

CHANGELOG.md

@@ -13,7 +13,7 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
-* `[nextjs][sitecore-jss-nextjs]` Support for Component Library feature in XMCloud ([#1987](https://github.com/Sitecore/jss/pull/1987))([#2000](https://github.com/Sitecore/jss/pull/2000))([#2002](https://github.com/Sitecore/jss/pull/2002))([#2005](https://github.com/Sitecore/jss/pull/2005))([#2024](https://github.com/Sitecore/jss/pull/2024))([#2053](https://github.com/Sitecore/jss/pull/2053))([#2059](https://github.com/Sitecore/jss/pull/2059))([#2064](https://github.com/Sitecore/jss/pull/2064))
+* `[nextjs][sitecore-jss-nextjs]` Support for Component Library in XMCloud ([#1987](https://github.com/Sitecore/jss/pull/1987))([#2000](https://github.com/Sitecore/jss/pull/2000))([#2002](https://github.com/Sitecore/jss/pull/2002))([#2005](https://github.com/Sitecore/jss/pull/2005))([#2024](https://github.com/Sitecore/jss/pull/2024))([#2053](https://github.com/Sitecore/jss/pull/2053))([#2059](https://github.com/Sitecore/jss/pull/2059))([#2064](https://github.com/Sitecore/jss/pull/2064))([#2068](https://github.com/Sitecore/jss/pull/2068))
 * `[create-sitecore-jss]` Create apps with exact jss dependency versions for canary and beta releases; all apps are now created with v0.1.0 instead of the version of JSS ([#2032](https://github.com/Sitecore/jss/pull/2032))
 
 ### 🐛 Bug Fixes

packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx

@@ -10,6 +10,7 @@ import {
   LayoutServicePageState,
   SitecoreContextReactContext,
 } from '@sitecore-jss/sitecore-jss-react';
+import { RenderingType } from '@sitecore-jss/sitecore-jss/src/layout';
 import Image, { ImageLoader } from 'next/image';
 import { spy, match } from 'sinon';
 import sinonChai from 'sinon-chai';
@@ -563,6 +564,22 @@ describe('<NextImage />', () => {
       expect(rendered.prop('unoptimized')).to.equal(true);
     });
 
+    it('should render unoptimized image in component rendering type', () => {
+      const testEditingContext = {
+        ...testContextProps,
+        context: {
+          ...testContextProps.context,
+          renderingType: RenderingType.Component,
+        },
+      };
+      const rendered = mount(
+        <SitecoreContextReactContext.Provider value={testEditingContext}>
+          <NextImage loader={mockLoader} {...props} />
+        </SitecoreContextReactContext.Provider>
+      ).find(Image);
+      expect(rendered.prop('unoptimized')).to.equal(true);
+    });
+
     it('should render respect original unoptimized value in normal mode', () => {
       const modifiedProps = {
         ...props,

packages/sitecore-jss-nextjs/src/components/NextImage.tsx

@@ -8,11 +8,15 @@ import {
   ImageFieldValue,
   withFieldMetadata,
   SitecoreContextReactContext,
+  DefaultEmptyFieldEditingComponentImage,
+  withEmptyFieldEditingComponent,
 } from '@sitecore-jss/sitecore-jss-react';
 import Image, { ImageProps as NextImageProperties } from 'next/image';
-import { withEmptyFieldEditingComponent } from '@sitecore-jss/sitecore-jss-react';
-import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-jss/sitecore-jss-react';
-import { isFieldValueEmpty, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import {
+  isFieldValueEmpty,
+  LayoutServicePageState,
+  RenderingType,
+} from '@sitecore-jss/sitecore-jss/layout';
 
 type NextImageProps = ImageProps & Partial<NextImageProperties>;
 export const NextImage: React.FC<NextImageProps> = withFieldMetadata<NextImageProps>(
@@ -51,9 +55,10 @@ export const NextImage: React.FC<NextImageProps> = withFieldMetadata<NextImagePr
         return null;
       }
 
-      // disable image optimization for Edit and Preview, but preserve original value if true
+      // disable image optimization for Edit / Preview / Component rendering, but preserve original value if true
       const unoptimized =
         otherProps.unoptimized ||
+        sitecoreContext.context?.renderingType === RenderingType.Component ||
         sitecoreContext.context?.pageState !== LayoutServicePageState.Normal;
 
       const attrs = {