From 2c759c103197a24e4f449e70fbe0eba8d418b39c Mon Sep 17 00:00:00 2001
From: Addy Pathania <89087450+sc-addypathania@users.noreply.github.com>
Date: Thu, 14 Apr 2022 16:32:03 -0400
Subject: [PATCH] [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: https://github.com/vercel/next.js/issues/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>
---
 .../fields/Styleguide-FieldUsage-Image.tsx    |  32 ++-
 .../src/lib/component-props/styleguide.ts     |   2 +-
 .../nextjs/sitecore/config/{{appName}}.config |  24 +-
 .../nextjs/src/pages/[[...path]].tsx          |   4 +-
 packages/sitecore-jss-nextjs/package.json     |   1 +
 .../src/components/NextImage.test.tsx         | 269 ++++++++++++++++++
 .../src/components/NextImage.tsx              | 115 ++++++++
 packages/sitecore-jss-nextjs/src/index.ts     |   1 +
 .../src/testData/ee-data.ts                   |   3 +
 .../src/components/Image.tsx                  |  71 ++---
 packages/sitecore-jss-react/src/index.ts      |   2 +-
 packages/sitecore-jss-react/src/utils.ts      |  19 ++
 .../sitecore-jss/src/media/media-api.test.ts  |  24 +-
 packages/sitecore-jss/src/media/media-api.ts  |  32 ++-
 yarn.lock                                     |   1 +
 15 files changed, 535 insertions(+), 65 deletions(-)
 create mode 100644 packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx
 create mode 100644 packages/sitecore-jss-nextjs/src/components/NextImage.tsx

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx
index d80bb9c618..3c199decf2 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx
+++ b/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,21 +17,29 @@ 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"
@@ -39,18 +47,16 @@ const StyleguideFieldUsageImage = (props: StyleguideFieldUsageImageProps): JSX.E
     />
 
     {/*
-      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/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts
index a0a059bec8..446b54e9bc 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts
+++ b/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>;
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
index b0049e0241..e943130b83 100644
--- 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
index a428ef257c..8755ce09ae 100644
--- 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
index d4f0534564..a652c35832 100644
--- 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",
diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx
new file mode 100644
index 0000000000..710d49a45e
--- /dev/null
+++ b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx
@@ -0,0 +1,269 @@
+/* eslint-disable no-unused-expressions */
+import chai, { use } from 'chai';
+import chaiString from 'chai-string';
+import { mount } from 'enzyme';
+import React from 'react';
+import { NextImage, sitecoreLoader } from './NextImage';
+import { ImageField } from '@sitecore-jss/sitecore-jss-react';
+import { ImageLoader, ImageLoaderProps } from 'next/image';
+import { spy, match } from 'sinon';
+import sinonChai from 'sinon-chai';
+import { SinonSpy } from 'sinon';
+
+use(sinonChai);
+const expect = chai.use(chaiString).expect;
+describe('sitecoreLoader', () => {
+  [
+    {
+      description: 'relative URL',
+      root: '/assets/img/test0.png',
+    },
+    {
+      description: 'absolute URL',
+      root: 'https://cm.jss.localhost/assets/img/test0.png',
+    },
+  ].forEach((value) => {
+    describe(value.description, () => {
+      it('should append mw query string param', () => {
+        const params: Partial<ImageLoaderProps> = {
+          src: value.root,
+          width: 100,
+        };
+        const result = sitecoreLoader(params as ImageLoaderProps);
+        expect(result).to.be.a('string');
+        expect(result).to.equal(`${value.root}?mw=100`);
+      });
+
+      it('should override existing mw query string param', () => {
+        const params: Partial<ImageLoaderProps> = {
+          src: `${value.root}?mw=400`,
+          width: 100,
+        };
+        const result = sitecoreLoader(params as ImageLoaderProps);
+        expect(result).to.be.a('string');
+        expect(result).to.equal(`${value.root}?mw=100`);
+      });
+
+      it('should preserve existing query string params', () => {
+        const params: Partial<ImageLoaderProps> = {
+          src: `${value.root}?mw=400&mh=100&q=50`,
+          width: 100,
+        };
+        const result = sitecoreLoader(params as ImageLoaderProps);
+        expect(result).to.be.a('string');
+        expect(result).to.equal(`${value.root}?mw=100&mh=100&q=50`);
+      });
+    });
+  });
+});
+
+describe('<NextImage />', () => {
+  type MockLoaderType = ImageLoader extends SinonSpy ? SinonSpy : SinonSpy<any, any>;
+  const customLoader = ({ src }) => new URL(`https://cm.jss.localhost${src}`).href;
+  const mockLoader = (spy(customLoader) as unknown) as MockLoaderType;
+  afterEach(() => {
+    () => mockLoader.resetHistory();
+  });
+
+  describe('with direct image object, no value/editable', () => {
+    const props = {
+      field: {
+        src: '/assets/img/test0.png',
+      },
+      width: 8,
+      height: 10,
+    };
+
+    const rendered = mount(<NextImage loader={mockLoader} {...props} />).find('Image');
+    it('should render image with url', () => {
+      expect(rendered).to.have.lengthOf(1);
+      expect(rendered.prop('src')).to.equal(props.field.src);
+      expect(rendered.prop('width')).to.equal(props.width);
+      expect(rendered.prop('height')).to.equal(props.height);
+
+      expect(mockLoader.called).to.be.true;
+      expect(mockLoader).to.have.been.calledWith(
+        match({ src: props.field.src, width: props.width })
+      );
+    });
+  });
+
+  describe('with responsive image object', () => {
+    const props = {
+      field: { value: { src: '/assets/img/test0.png', alt: 'my image' } },
+      layout: 'responsive' as const,
+      sizes: '(min-width: 960px) 300px, 100px',
+      width: 8,
+      height: 10,
+      id: 'some-id',
+      className: 'the-dude-abides',
+    };
+
+    const rendered = mount(<NextImage loader={mockLoader} {...props} />).find('Image');
+
+    it('should render image with needed props', () => {
+      expect(rendered).to.have.length(1);
+      expect(rendered.prop('src')).to.equal(props.field.value.src);
+      expect(rendered.prop('sizes')).to.equal('(min-width: 960px) 300px, 100px');
+      expect(rendered.prop('layout')).to.equal(props.layout);
+      expect(mockLoader.called).to.be.true;
+      expect(mockLoader).to.have.been.calledWith(
+        match({ src: props.field.value.src, width: props.width })
+      );
+    });
+
+    it('should render image with non-media props', () => {
+      expect(rendered.prop('id')).to.equal(props.id);
+    });
+
+    it('should render image with className prop', () => {
+      expect(rendered.prop('className')).to.eql(props.className);
+    });
+  });
+
+  describe('with "value" property value', () => {
+    const props = {
+      field: { value: { src: '/assets/img/test0.png', alt: 'my image' } },
+      width: 8,
+      height: 10,
+      id: 'some-id',
+      className: 'the-dude-abides',
+    };
+    const rendered = mount(<NextImage loader={mockLoader} {...props} />).find('Image');
+
+    it('should render image component with "value" properties', () => {
+      expect(rendered).to.have.length(1);
+      expect(rendered.prop('src')).to.eql(props.field.value.src);
+      expect(rendered.prop('alt')).to.eql(props.field.value.alt);
+      expect(mockLoader.called).to.be.true;
+      expect(mockLoader).to.have.been.calledWith(
+        match({ src: props.field.value.src, width: props.width })
+      );
+    });
+
+    it('should render image with non-media props', () => {
+      expect(rendered.prop('id')).to.equal(props.id);
+    });
+
+    it('should render image with className prop', () => {
+      expect(rendered.prop('className')).to.eql(props.className);
+    });
+  });
+
+  describe('with "editable" property value but editing disabled', () => {
+    const props = {
+      field: { value: { src: '/assets/img/test0.png', alt: 'my image' } },
+      width: 8,
+      height: 10,
+      alt: 'my image',
+      editable: false,
+      className: 'the-dude-abides w-100',
+    };
+    const rendered = mount(<NextImage loader={mockLoader} {...props} />).find('Image');
+
+    it('should render image component with "value" properties', () => {
+      expect(rendered).to.have.length(1);
+      expect(rendered.prop('src')).to.eql(props.field.value.src);
+      expect(rendered.prop('alt')).to.eql(props.field.value.alt);
+      expect(mockLoader.called).to.be.true;
+      expect(mockLoader).to.have.been.calledWith(
+        match({ src: props.field.value.src, width: props.width })
+      );
+    });
+
+    it('should render image with className prop', () => {
+      expect(rendered.prop('className')).to.eql(props.className);
+    });
+  });
+
+  describe('with "mediaUrlPrefix" property', () => {
+    it('should transform url with "value" property value', () => {
+      const props = {
+        field: { value: { src: '/~assets/img/test0.png', alt: 'my image' } },
+        id: 'some-id',
+        width: 100,
+        height: 50,
+        imageParams: { foo: 'bar' },
+        mediaUrlPrefix: /\/([-~]{1})assets\//i,
+      };
+      const rendered = mount(<NextImage loader={mockLoader} {...props} />);
+
+      expect(rendered.find('Image').prop('src')).to.equal('/~/jssmedia/img/test0.png?foo=bar');
+      rendered.setProps({
+        ...props,
+        field: { src: '/-assets/img/test0.png' },
+      });
+      expect(rendered.find('Image').prop('src')).to.equal('/-/jssmedia/img/test0.png?foo=bar');
+      expect(mockLoader.called).to.be.true;
+      expect(mockLoader).to.have.been.calledWith(
+        match({ src: '/-/jssmedia/img/test0.png?foo=bar', width: props.width })
+      );
+    });
+
+    it('should transform url with direct image object, no value/editable', () => {
+      const props = {
+        field: { value: { src: '/~assets/img/test0.png', alt: 'my image' } },
+        width: 8,
+        height: 10,
+        id: 'some-id',
+        imageParams: { foo: 'bar' },
+        mediaUrlPrefix: /\/([-~]{1})assets\//i,
+      };
+      const rendered = mount(<NextImage loader={mockLoader} {...props} />);
+      expect(rendered.find('Image').prop('src')).to.equal('/~/jssmedia/img/test0.png?foo=bar');
+      rendered.setProps({
+        ...props,
+        field: { src: '/-assets/img/test0.png' },
+        width: 8,
+        height: 10,
+      });
+      expect(rendered.find('Image').prop('src')).to.equal('/-/jssmedia/img/test0.png?foo=bar');
+      expect(mockLoader.called).to.be.true;
+      expect(mockLoader).to.have.been.calledWith(
+        match({ src: '/-/jssmedia/img/test0.png?foo=bar', width: props.width })
+      );
+    });
+
+    it('should render no image when field prop is empty', () => {
+      const img = '' as ImageField;
+      const rendered = mount(<NextImage field={img} />).find('Image');
+      expect(rendered).to.have.length(0);
+    });
+  });
+
+  describe('error cases', () => {
+    const src = '/assets/img/test0.png';
+    it('should throw an error if src is present', () => {
+      expect(() => mount(<NextImage src={src} />)).to.throw(
+        'Detected src prop. If you wish to use src, use next/image directly.'
+      );
+    });
+  });
+
+  describe('With loader function passed by the user', () => {
+    const userCustomLoader = ({ src }) => new URL(`https://cm.jss.localhost${src}`).href;
+    const userMockLoader = (spy(userCustomLoader) as unknown) as ImageLoader;
+    const props = {
+      field: {
+        src: '/assets/img/test0.png',
+      },
+      width: 8,
+      height: 10,
+      loader: userMockLoader,
+    };
+
+    const rendered = mount(<NextImage {...props} />).find('Image');
+
+    it('should render image with url', () => {
+      expect(rendered).to.have.lengthOf(1);
+      expect(rendered.prop('src')).to.equal(props.field.src);
+      expect(rendered.prop('width')).to.equal(props.width);
+      expect(rendered.prop('height')).to.equal(props.height);
+      expect(rendered.prop('loader')).to.equal(props.loader);
+      expect(userMockLoader).to.have.been.called;
+      expect(userMockLoader).to.have.been.calledWith(
+        match({ src: props.field.src, width: props.width })
+      );
+    });
+  });
+});
diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx
new file mode 100644
index 0000000000..0df0888ea8
--- /dev/null
+++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx
@@ -0,0 +1,115 @@
+import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  getEEMarkup,
+  ImageProps,
+  ImageField,
+  ImageFieldValue,
+} from '@sitecore-jss/sitecore-jss-react';
+import Image, {
+  ImageLoader,
+  ImageLoaderProps,
+  ImageProps as NextImageProperties,
+} from 'next/image';
+
+type NextImageProps = Omit<ImageProps, 'media'> & Partial<NextImageProperties>;
+
+export const sitecoreLoader: ImageLoader = ({ src, width }: ImageLoaderProps): string => {
+  const [root, paramString] = src.split('?');
+  const params = new URLSearchParams(paramString);
+  params.set('mw', width.toString());
+  return `${root}?${params}`;
+};
+
+export const NextImage: React.SFC<NextImageProps> = ({
+  editable,
+  imageParams,
+  field,
+  mediaUrlPrefix,
+  ...otherProps
+}) => {
+  // next handles src and we use a custom loader,
+  // throw error if these are present
+  if (otherProps.src) {
+    throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
+  }
+
+  const dynamicMedia = field as ImageField | ImageFieldValue;
+
+  if (
+    !field ||
+    (!dynamicMedia.editable && !dynamicMedia.value && !(dynamicMedia as ImageFieldValue).src)
+  ) {
+    return null;
+  }
+
+  const imageField = dynamicMedia as ImageField;
+
+  // we likely have an experience editor value, should be a string
+  if (editable && imageField.editable) {
+    return getEEMarkup(
+      imageField,
+      imageParams as { [paramName: string]: string | number },
+      mediaUrlPrefix as RegExp,
+      otherProps as { src: string }
+    );
+  }
+
+  // some wise-guy/gal is passing in a 'raw' image object value
+  const img: ImageFieldValue = (dynamicMedia as ImageFieldValue).src
+    ? (field as ImageFieldValue)
+    : (dynamicMedia.value as ImageFieldValue);
+  if (!img) {
+    return null;
+  }
+
+  const attrs = {
+    ...img,
+    ...otherProps,
+    src: mediaApi.updateImageUrl(
+      img.src as string,
+      imageParams as { [paramName: string]: string | number },
+      mediaUrlPrefix as RegExp
+    ),
+  };
+
+  const imageProps = {
+    ...attrs,
+    // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter
+    // this is required for Sitecore media API resizing to work properly
+    src: mediaApi.replaceMediaUrlPrefix(attrs.src, mediaUrlPrefix as RegExp),
+  };
+
+  const loader = (otherProps.loader ? otherProps.loader : sitecoreLoader) as ImageLoader;
+
+  if (attrs) {
+    return <Image loader={loader} {...imageProps} />;
+  }
+
+  return null; // we can't handle the truth
+};
+
+NextImage.propTypes = {
+  field: PropTypes.oneOfType([
+    PropTypes.shape({
+      src: PropTypes.string.isRequired,
+    }),
+    PropTypes.shape({
+      value: PropTypes.object,
+      editable: PropTypes.string,
+    }),
+  ]),
+  editable: PropTypes.bool,
+  mediaUrlPrefix: PropTypes.instanceOf(RegExp),
+  imageParams: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired
+  ),
+};
+
+NextImage.defaultProps = {
+  editable: true,
+};
+
+NextImage.displayName = 'NextImage';
diff --git a/packages/sitecore-jss-nextjs/src/index.ts b/packages/sitecore-jss-nextjs/src/index.ts
index f8f36b14d6..c00e7433bb 100644
--- a/packages/sitecore-jss-nextjs/src/index.ts
+++ b/packages/sitecore-jss-nextjs/src/index.ts
@@ -97,6 +97,7 @@ export {
 export { Link } from './components/Link';
 export { RichText } from './components/RichText';
 export { Placeholder } from './components/Placeholder';
+export { NextImage } from './components/NextImage';
 
 export {
   ComponentFactory,
diff --git a/packages/sitecore-jss-nextjs/src/testData/ee-data.ts b/packages/sitecore-jss-nextjs/src/testData/ee-data.ts
index 13d818e062..914df7499e 100644
--- a/packages/sitecore-jss-nextjs/src/testData/ee-data.ts
+++ b/packages/sitecore-jss-nextjs/src/testData/ee-data.ts
@@ -26,3 +26,6 @@ export const EE_BODY = {
   functionName: 'renderView',
   moduleName: 'server.bundle',
 };
+
+export const imageField =
+  '<input id=\'fld_F5201E35767444EBB903E52488A0EB5A_B7F425624A1F4F3F925C4A4381197239_en_1_0f581df6173e468f9c0b36bd730739e4_13\' class=\'scFieldValue\' name=\'fld_F5201E35767444EBB903E52488A0EB5A_B7F425624A1F4F3F925C4A4381197239_en_1_0f581df6173e468f9c0b36bd730739e4_13\' type=\'hidden\' value="&lt;image mediaid=&quot;{B013777F-C6CA-4880-9562-B9B7688AF63A}&quot; /&gt;" /><code id="fld_F5201E35767444EBB903E52488A0EB5A_B7F425624A1F4F3F925C4A4381197239_en_1_0f581df6173e468f9c0b36bd730739e4_13_edit" type="text/sitecore" chromeType="field" scFieldType="image" class="scpm" kind="open">{"commands":[{"click":"chrome:field:editcontrol({command:\\"webedit: chooseimage\\"})","header":"Choose Image","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2.png","disabledIcon":"/temp/photo_landscape2_disabled16x16.png","isDivider":false,"tooltip":"Choose an image.","type":""},{"click":"chrome:field:editcontrol({command:\\"webedit: editimage\\"})","header":"Properties","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_edit.png","disabledIcon":"/temp/photo_landscape2_edit_disabled16x16.png","isDivider":false,"tooltip":"Modify image appearance.","type":""},{"click":"chrome:field:editcontrol({command:\\"webedit: clearimage\\"})","header":"Clear","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_delete.png","disabledIcon":"/temp/photo_landscape2_delete_disabled16x16.png","isDivider":false,"tooltip":"Remove the image.","type":""},{"click":"chrome:common:edititem({command:\\"webedit: open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\\"webedit: personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit: editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{F5201E35-7674-44EB-B903-E52488A0EB5A}?lang=en&ver=1","custom":{},"displayName":"Image","expandedDisplayName":null}</code><img src="http://jssadvancedapp/sitecore/shell/-/media/JssAdvancedApp/assets/img/portfolio/1.ashx?h=350&amp;la=en&amp;w=650&amp;hash=B973470AA333773341C62A76511361C88897E2D4" alt="" width="650" height="350" /><code class="scpm" type="text/sitecore" chromeType="field" kind="close"></code>';
diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx
index b0c7131148..7524e4f0ca 100644
--- a/packages/sitecore-jss-react/src/components/Image.tsx
+++ b/packages/sitecore-jss-react/src/components/Image.tsx
@@ -2,7 +2,7 @@ import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { convertAttributesToReactProps } from '../utils';
+import { addClassName, convertAttributesToReactProps } from '../utils';
 
 export interface ImageFieldValue {
   [attributeName: string]: unknown;
@@ -98,19 +98,7 @@ const getImageAttrs = (
   if (!src) {
     return null;
   }
-
-  // we want to get rid of class prop in compliance with JSX
-  if (otherAttrs.class) {
-    // if any classes are defined properly already
-    if (otherAttrs.className) {
-      let className: string = otherAttrs.className as string;
-      className += ` ${otherAttrs.class}`;
-      otherAttrs.className = className;
-    } else {
-      otherAttrs.className = otherAttrs.class;
-    }
-    delete otherAttrs.class;
-  }
+  addClassName(otherAttrs);
 
   const newAttrs: { [attr: string]: unknown } = {
     ...otherAttrs,
@@ -127,6 +115,39 @@ const getImageAttrs = (
   return newAttrs;
 };
 
+/**
+ * @param imageField {ImageField} provides the dynamicMedia which is used to render the image
+ * @param imageParams {ImageProp['imageParams']}} provides the image parameters that will be attached to the image URL
+ * @param mediaUrlPrefix {RegExp} the url prefix regex used in the mediaApi
+ * @param otherProps {ImageProps} all other props included on the image component
+ * @returns Experience Editor Markup
+ */
+export const getEEMarkup = (
+  imageField: ImageField,
+  imageParams?: ImageProps['imageParams'],
+  mediaUrlPrefix?: RegExp,
+  otherProps?: ImageProps
+) => {
+  // we likely have an experience editor value, should be a string
+  const foundImg = mediaApi.findEditorImageTag(imageField.editable);
+  if (!foundImg) {
+    return getEditableWrapper(imageField.editable);
+  }
+
+  const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
+  // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
+  // We do not attempt to merge.
+  const imgAttrs = getImageAttrs({ ...foundImgProps, ...otherProps }, imageParams, mediaUrlPrefix);
+
+  if (!imgAttrs) {
+    return getEditableWrapper(imageField.editable);
+  }
+
+  const imgHtml = ReactDOMServer.renderToStaticMarkup(<img {...imgAttrs} />);
+  const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
+  return getEditableWrapper(editableMarkup);
+};
+
 export const Image: React.SFC<ImageProps> = ({
   media,
   editable,
@@ -151,28 +172,8 @@ export const Image: React.SFC<ImageProps> = ({
 
   const imageField = dynamicMedia as ImageField;
 
-  // we likely have an experience editor value, should be a string
   if (editable && imageField.editable) {
-    const foundImg = mediaApi.findEditorImageTag(imageField.editable);
-    if (!foundImg) {
-      return getEditableWrapper(imageField.editable);
-    }
-
-    const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
-    // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
-    // We do not attempt to merge.
-    const imgAttrs = getImageAttrs(
-      { ...foundImgProps, ...otherProps },
-      imageParams,
-      mediaUrlPrefix
-    );
-    if (!imgAttrs) {
-      return getEditableWrapper(imageField.editable);
-    }
-
-    const imgHtml = ReactDOMServer.renderToStaticMarkup(<img {...imgAttrs} />);
-    const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
-    return getEditableWrapper(editableMarkup);
+    return getEEMarkup(imageField, imageParams, mediaUrlPrefix, otherProps);
   }
 
   // some wise-guy/gal is passing in a 'raw' image object value
diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts
index 5637369f02..65830aafac 100644
--- a/packages/sitecore-jss-react/src/index.ts
+++ b/packages/sitecore-jss-react/src/index.ts
@@ -41,7 +41,7 @@ export {
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { ComponentFactory } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
-export { Image, ImageField } from './components/Image';
+export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue } from './components/Image';
 export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
 export { Text, TextField } from './components/Text';
 export { DateField } from './components/Date';
diff --git a/packages/sitecore-jss-react/src/utils.ts b/packages/sitecore-jss-react/src/utils.ts
index 204c2fa404..11adc6de76 100644
--- a/packages/sitecore-jss-react/src/utils.ts
+++ b/packages/sitecore-jss-react/src/utils.ts
@@ -55,3 +55,22 @@ export const convertAttributesToReactProps = (
     return result;
   }, {});
 };
+
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * * @returns {void}
+ */
+export const addClassName = (otherAttrs: { [key: string]: unknown }): void => {
+  if (otherAttrs.class) {
+    // if any classes are defined properly already
+    if (otherAttrs.className) {
+      let className: string = otherAttrs.className as string;
+      className += ` ${otherAttrs.class}`;
+      otherAttrs.className = className;
+    } else {
+      otherAttrs.className = otherAttrs.class;
+    }
+    delete otherAttrs.class;
+  }
+};
diff --git a/packages/sitecore-jss/src/media/media-api.test.ts b/packages/sitecore-jss/src/media/media-api.test.ts
index c9c3ab6eb5..b693167a98 100644
--- a/packages/sitecore-jss/src/media/media-api.test.ts
+++ b/packages/sitecore-jss/src/media/media-api.test.ts
@@ -4,7 +4,13 @@
 import chai = require('chai');
 import chaiString = require('chai-string');
 import URL = require('url-parse');
-import { findEditorImageTag, getSrcSet, updateImageUrl, getRequiredParams } from './media-api';
+import {
+  replaceMediaUrlPrefix,
+  findEditorImageTag,
+  getSrcSet,
+  updateImageUrl,
+  getRequiredParams,
+} from './media-api';
 
 // chai.should();
 const expect = chai.use(chaiString).expect;
@@ -237,4 +243,20 @@ describe('getSrcSet', () => {
       expect(srcSet).to.equal(expected);
     });
   });
+
+  describe('replaceMediaUrlPrefix', () => {
+    it('should replace /-/media/ with /-/jssmedia/', () => {
+      const original = 'http://sitecore/-/media/lorem/ipsum.jpg';
+      const updated = replaceMediaUrlPrefix(original);
+      const url = URL(updated);
+      expect(url.pathname).to.startsWith('/-/jssmedia/');
+    });
+
+    it('should replace /~/media/ with /~/jssmedia/', () => {
+      const original = 'http://sitecore/~/media/lorem/ipsum.jpg';
+      const updated = replaceMediaUrlPrefix(original);
+      const url = URL(updated);
+      expect(url.pathname).to.startsWith('/~/jssmedia/');
+    });
+  });
 });
diff --git a/packages/sitecore-jss/src/media/media-api.ts b/packages/sitecore-jss/src/media/media-api.ts
index c85b290aad..a3091c2d86 100644
--- a/packages/sitecore-jss/src/media/media-api.ts
+++ b/packages/sitecore-jss/src/media/media-api.ts
@@ -47,6 +47,28 @@ export const getRequiredParams = (qs: { [key: string]: string | undefined }) =>
   return { rev, db, la, vs, ts };
 };
 
+/**
+ * Replace `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.
+ * Can use `mediaUrlPrefix` in order to use a custom prefix.
+ * @param {string} url
+ * @param {RegExp} [mediaUrlPrefix=mediaUrlPrefixRegex]
+ * @returns {string} url
+ */
+export const replaceMediaUrlPrefix = (
+  url: string,
+  mediaUrlPrefix: RegExp = mediaUrlPrefixRegex
+): string => {
+  const parsed = URL(url, {}, true);
+
+  const match = mediaUrlPrefix.exec(parsed.pathname);
+  if (match && match.length > 1) {
+    // regex will provide us with /-/ or /~/ type
+    parsed.set('pathname', parsed.pathname.replace(mediaUrlPrefix, `/${match[1]}/jssmedia/`));
+  }
+
+  return parsed.toString();
+};
+
 /**
  * Prepares a Sitecore media URL with `params` for use by the JSS media handler.
  * This is done by replacing `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.
@@ -71,11 +93,13 @@ export const updateImageUrl = (
   if (typeof window !== 'undefined' && !window.global) {
     window.global = {} as typeof globalThis;
   }
-  const parsed = URL(url, {}, true);
+
+  const parsed = URL(replaceMediaUrlPrefix(url, mediaUrlPrefix), {}, true);
 
   const requiredParams = getRequiredParams(parsed.query);
 
   const query = { ...params };
+
   Object.entries(requiredParams).forEach(([key, param]) => {
     if (param) {
       query[key] = param;
@@ -84,12 +108,6 @@ export const updateImageUrl = (
 
   parsed.set('query', query);
 
-  const match = mediaUrlPrefix.exec(parsed.pathname);
-  if (match && match.length > 1) {
-    // regex will provide us with /-/ or /~/ type
-    parsed.set('pathname', parsed.pathname.replace(mediaUrlPrefix, `/${match[1]}/jssmedia/`));
-  }
-
   return parsed.toString();
 };
 
diff --git a/yarn.lock b/yarn.lock
index bfd52ac95f..2f2a9a2149 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3901,6 +3901,7 @@ __metadata:
     "@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