[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

@@ -10,19 +10,11 @@ import {
 } 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.FC<NextImageProps> = ({
   editable,
   imageParams,
@@ -92,7 +84,7 @@ export const NextImage: React.FC<NextImageProps> = ({
     delete imageProps.height;
   }
 
-  const loader = (otherProps.loader ? otherProps.loader : sitecoreLoader) as ImageLoader;
+  const loader = (otherProps.loader ? otherProps.loader : undefined ) as ImageLoader;
 
   if (attrs) {
     return <Image alt="" loader={loader} {...imageProps} />;