[sitecore-jss-nextjs] Enable NextImage to use built-in image optimization from vercel

CHANGELOG.md

@@ -25,6 +25,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs-sxa]` Fixed Image component when there is using Banner variant which set property background-image when image is empty. ([#1689](https://github.com/Sitecore/jss/pull/1689)) ([#1692](https://github.com/Sitecore/jss/pull/1692))
 * `[templates/nextjs-sxa]` Fix feature `show Grid column` in Experience Editor. ([#1704](https://github.com/Sitecore/jss/pull/1704))
 * `[sitecore-jss-nextjs] [templates/nextjs-xmcloud]` SDK initialization rejections are now correctly handled. Errors should no longer occur after getSDK() promises resolve when they shouldn't (for example, getting Events SDK in development environment) ([#1712](https://github.com/Sitecore/jss/pull/1712) [#1715](https://github.com/Sitecore/jss/pull/1715) [#1716](https://github.com/Sitecore/jss/pull/1716))
+* `[sitecore-jss-nextjs]` Remove custom loader function i.e. `sitecoreLoader` to enable NextImage to use built-in image optimization from vercel. ([#1726](https://github.com/Sitecore/jss/pull/1726))
 
 ### 🛠 Breaking Changes
 

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

@@ -3,7 +3,7 @@ import chai, { use } from 'chai';
 import chaiString from 'chai-string';
 import { mount } from 'enzyme';
 import React from 'react';
-import { NextImage, sitecoreLoader } from './NextImage';
+import { NextImage } from './NextImage';
 import { ImageField } from '@sitecore-jss/sitecore-jss-react';
 import { ImageLoader } from 'next/image';
 import { spy, match } from 'sinon';
@@ -12,50 +12,6 @@ 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 />', () => {
   const HOSTNAME = 'https://cm.jss.localhost';

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

@@ -8,21 +8,10 @@ import {
   ImageField,
   ImageFieldValue,
 } from '@sitecore-jss/sitecore-jss-react';
-import Image, {
-  ImageLoader,
-  ImageLoaderProps,
-  ImageProps as NextImageProperties,
-} from 'next/image';
+import Image, { 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.FC<NextImageProps> = ({
   editable,
   imageParams,
@@ -92,10 +81,8 @@ export const NextImage: React.FC<NextImageProps> = ({
     delete imageProps.height;
   }
 
-  const loader = (otherProps.loader ? otherProps.loader : sitecoreLoader) as ImageLoader;
-
   if (attrs) {
-    return <Image alt="" loader={loader} {...imageProps} />;
+    return <Image alt="" {...imageProps} />;
   }
 
   return null; // we can't handle the truth