[Nextjs] New NextImage component

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

@@ -1,4 +1,4 @@
-import { Image, ImageField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { NextImage, ImageField, withDatasourceCheck } 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';
@@ -17,40 +17,46 @@ type StyleguideFieldUsageImageProps = ComponentProps &
  */
 const StyleguideFieldUsageImage = (props: StyleguideFieldUsageImageProps): JSX.Element => (
   <StyleguideSpecimen {...props} e2eId="styleguide-fieldusage-image">
+    {/*
+      You can use any of the props available in the next/image.
+      E.g. we have used 'priority' to demonstrate how an image could be considered high priority and preload.
+      Lazy loading is automatically disabled for images using priority.
+      See here for all the features provided by next/image: https://nextjs.org/docs/api-reference/next/image
+    */}
     <p>Plain image</p>
-    <Image media={props.fields.sample1} />
+    <NextImage field={props.fields.sample1} priority height="51" width="204" />
 
     {/*
       Advanced image usage example
       editable: controls whether image can be edited in Sitecore Experience Editor
-      imageParams: parameters that are passed to Sitecore to perform server-side resizing of the image.
+      unoptimized: disables next/image source optimization in favor of imageParams
+      imageParams: parameters that are passed to Sitecore to perform server-side resizing of the image
         Sample rescales image to max 100x50 dimensions on the server, respecting aspect ratio
         IMPORTANT: imageParams must be whitelisted for resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
       any other attributes: pass through to img tag
     */}
     <p>Advanced image (not editable)</p>
-    <Image
+    <NextImage
       field={props.fields.sample2}
       editable={false}
+      unoptimized={true}
       imageParams={{ mw: 100, mh: 50 }}
       height="50"
       width="94"
       data-sample="other-attributes-pass-through"
     />
 
     {/*
-      Srcset adaptive image usage example
-      Adaptive srcsets are supported using Sitecore server-side resizing.
-      The `srcSet` can use Sitecore image resizing parameters (i.e. w, h, mw, mh).
-      Sample create a srcset using two sizes (server resizing), 300 and 100px max widths, respecting aspect ratio.
-      IMPORTANT: srcSet params must be whitelisted for adaptive resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams')
+      next/image generates responsive srcSet automatically based on layout. See https://nextjs.org/docs/api-reference/next/image#layout.
+      IMPORTANT: The generated sizes should match your Sitecore server-side allowlist. See /sitecore/config/*.config (search for 'allowedMediaParams')
     */}
     <p>Srcset responsive image</p>
-    <Image
+    <NextImage
       field={props.fields.sample2}
-      srcSet={[{ mw: 300 }, { mw: 100 }]}
-      sizes="(min-width: 960px) 300px, 100px"
-      className="img-fluid"
+      height="105"
+      width="200"
+      sizes="50vw"
+      layout="responsive"
     />
   </StyleguideSpecimen>
 );

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts

@@ -3,7 +3,7 @@ import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
 /**
  * Shared styleguide specimen fields
  */
- export type StyleguideSpecimenFields = {
+export type StyleguideSpecimenFields = {
   fields: {
     description: Field<string>;
     heading: Field<string>;

packages/create-sitecore-jss/src/templates/nextjs/sitecore/config/{{appName}}.config

@@ -100,7 +100,7 @@
       </apps>
       <!--
         IMAGE RESIZING WHITELIST
-        Using Sitecore server-side media resizing (i.e. the `imageParams` or `srcSet` props on the `<Image/>` helper component)
+        Using Sitecore server-side media resizing (i.e. the `imageParams` or `srcSet` props on the `<Image/>` helper component or the `<NextImage/>` helper component)
         could expose your Sitecore server to a denial-of-service attack by rescaling an image with many arbitrary dimensions.
         In JSS resizing param sets that are unknown are rejected by a whitelist.
 
@@ -115,10 +115,24 @@
         <styleguide-image-sample>
           mw=100,mh=50
         </styleguide-image-sample>
-        <styleguide-image-sample-adaptive>
-          mw=300
-          mw=100
-        </styleguide-image-sample-adaptive>
+        <next-image-default>
+          mw=16
+          mw=32
+          mw=48
+          mw=64
+          mw=96
+          mw=128
+          mw=256
+          mw=384
+          mw=640
+          mw=750
+          mw=828
+          mw=1080
+          mw=1200
+          mw=1920
+          mw=2048
+          mw=3840
+        </next-image-default>
       </allowedMediaParams>
     </javaScriptServices>
     <!--

packages/create-sitecore-jss/src/templates/nextjs/src/pages/[[...path]].tsx

@@ -78,12 +78,12 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   return {
     props,
-    <% if (prerender === 'SSG') { -%>
+<% if (prerender === 'SSG') { -%>
     // Next.js will attempt to re-generate the page:
     // - When a request comes in
     // - At most once every 5 seconds
     revalidate: 5, // In seconds
-    <% } -%>
+<% } -%>
     notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
   };
 };

packages/sitecore-jss-nextjs/package.json

@@ -44,6 +44,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
+    "chai-string": "^1.5.0",
     "chalk": "^4.1.2",
     "del-cli": "^3.0.1",
     "enzyme": "^3.10.0",