[Next.js][Image] Exclude width/height when fill prop is provided

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx

@@ -1,4 +1,9 @@
-import { NextImage, ImageField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  NextImage,
+  ImageField,
+  withDatasourceCheck,
+  getFieldValue,
+} from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
@@ -51,12 +56,18 @@ const StyleguideFieldUsageImage = (props: StyleguideFieldUsageImageProps): JSX.E
       IMPORTANT: The generated sizes should match your Sitecore server-side allowlist. See /sitecore/config/*.config (search for 'allowedMediaParams')
     */}
     <p>Srcset responsive image</p>
-    <div style={{ position: 'relative', height: 160, width: 300 }}>
+    <div
+      style={{
+        position: 'relative',
+        height: +getFieldValue(props.fields, 'sample2').height || 160,
+        width: +getFieldValue(props.fields, 'sample2').width || 300,
+      }}
+    >
       <NextImage
         field={props.fields.sample2}
         sizes="(min-width: 960px) 300px, 100px"
-        fill
-        priority
+        fill={true}
+        priority={true}
       />
     </div>
   </StyleguideSpecimen>

packages/create-sitecore-jss/src/templates/nextjs/tsconfig.json

@@ -28,7 +28,8 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "incremental": true
+    "incremental": true,
+    "forceConsistentCasingInFileNames": false
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

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

@@ -124,6 +124,25 @@ describe('<NextImage />', () => {
     it('should render image with className prop', () => {
       expect(rendered.prop('className')).to.eql(props.className);
     });
+
+    it('should render image without width/height when "fill" prop is provided', () => {
+      const field = {
+        value: { src: '/assets/img/test0.png', alt: 'my image', width: 200, height: 400 },
+      };
+      const rendered = mount(<NextImage loader={mockLoader} {...props} field={field} fill />).find(
+        'img'
+      );
+
+      expect(rendered).to.have.length(1);
+      expect(rendered.prop('src')).to.equal(`${HOSTNAME}${props.field.value.src}?w=${props.width}`);
+      expect(rendered.prop('sizes')).to.equal('(min-width: 960px) 300px, 100px');
+      expect(rendered.prop('height')).to.equal(undefined);
+      expect(rendered.prop('width')).to.equal(undefined);
+      expect(mockLoader.called).to.be.true;
+      expect(mockLoader).to.have.been.calledWith(
+        match({ src: props.field.value.src, width: props.width })
+      );
+    });
   });
 
   describe('with "value" property value', () => {

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

@@ -82,6 +82,12 @@ export const NextImage: React.FC<NextImageProps> = ({
     src: mediaApi.replaceMediaUrlPrefix(attrs.src, mediaUrlPrefix as RegExp),
   };
 
+  // Exclude `width`, `height` in case image is responsive, `fill` is used
+  if (imageProps.fill) {
+    delete imageProps.width;
+    delete imageProps.height;
+  }
+
   const loader = (otherProps.loader ? otherProps.loader : sitecoreLoader) as ImageLoader;
 
   if (attrs) {