[Nextjs] New NextImage component (#978)

* Implement Nextjs Image nextjs package and styleguide * WIP: Implement nextjs image in nextjs package and styleguide * Refactored image loader * Refactor way in which EE markup is applied in react image component to be reused in next image component. * WIP: Start refactoring test for nextjs image also refactor nextjs-styleguide template to use new image component * added tests and completed todos * removed unwanted code and added line to end of file * addressed review comments * fixed unit tests * removed dublicate code * removed extra comments * updated yarn.lock * updated yarn.lock, removed dubplicate interface * removed changes in yarn.lock * updated yarn.lock * updated yarn.lock * fixed linting error * updated deviceSizes comment in next.config * improved comments, added utility to get hostname * removed path and loader from config * added relative path to loader function * added comment for path variable * updated error message, removed extra interface * fixed undefined path variable issue * added test cases for the loader function * renamed next-setup file * updated next.config comments, refactored redundant code * added the fix from vercel regarding access to config in loader function * removed blurDataUrl, made loader function more customizable, fixed tests * Delete yarn.lock * added yarn.lock * updated yarn.lock * changed next version in template * removed redundant comments and files , changed error message * added test case for user custom loader function * added another test case fro custom loader * added test for absolute url, mock loader function * added test for user sent custom loader * removed params object, added afterEach * updated the afterEach call * refactored mock loader tests * created two describes for next image tests * updated tests description * updated the order of tests and describes in next image tests * Simplified loader which does not depend on 'config' (not to be used according to Vercel: vercel/next.js#35115). Added whitelisting config for default next/image sizes. * updated image url, fixed classname bug for EE in next/image * added unit test * remove console.log * resolved merge conflicts in yarn.lock file * refactored util fucntions, removed redundant code * updated yarn.lock, refactored utils * removed url-parse Co-authored-by: CobyPear <coby.sher@sitecore.com> Co-authored-by: Adam Brauer <400763+ambrauer@users.noreply.github.com>
Sitecore · Apr 14, 2022 · 2c759c1 · 2c759c1
1 parent 61941c3
commit 2c759c1
Show file tree

Hide file tree

Showing 15 changed files with 535 additions and 65 deletions.
diff --git a/...jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx b/...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>
 );

diff --git a/...create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts b/...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>;

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/sitecore/config/{{appName}}.config b/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>
     <!--

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/pages/[[...path]].tsx b/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
   };
 };

diff --git a/packages/sitecore-jss-nextjs/package.json b/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",