[templates/nextjs-sxa]: Image and Promo components has been changed …

…#SXA-2126 (#1843)

* [templates/nextjs-sxa]: The Image component has been changed to NextImage component in the SXA Components #SXA-2126

* [templates/nextjs-sxa] CHANGELOG has been changed

* Update CHANGELOG.md

---------

Co-authored-by: Ruslan Matkovsky <matkovsky.ruslan@gmail.com>
Co-authored-by: Addy Pathania <89087450+sc-addypathania@users.noreply.github.com>

CHANGELOG.md

@@ -26,6 +26,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs]` Removed cors header for API endpoints from _lib/next-config/plugins/cors-header_ plugin since cors is handled by API handlers / middlewares ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[sitecore-jss-nextjs]` Updates to Next.js editing integration to further support secure hosting scenarios (on XM Cloud & Vercel) ([#1832](https://github.com/Sitecore/jss/pull/1832))
 * `[sitecore-jss]` `[nextjs-xmcloud]` DictionaryService can now use a `site` GraphQL query instead of `search` one to improve performance. This is currently only available for XMCloud deployments and is enabled with `nextjs-xmcloud` add-on by default ([#1804](https://github.com/Sitecore/jss/pull/1804))
+* `[templates/nextjs-sxa]` nextjs-sxa components now use the NextImage component instead of the react Image component from JSS lib for image optimization ([#1843](https://github.com/Sitecore/jss/pull/1843))
 
 ### 🛠 Breaking Change
 

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx

@@ -2,7 +2,7 @@ import {
   EditMode,
   Field,
   ImageField,
-  Image as JssImage,
+  NextImage as JssImage,
   Link as JssLink,
   LinkField,
   Text,

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Promo.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Image as JssImage,
+  NextImage as JssImage,
   Link as JssLink,
   RichText as JssRichText,
   ImageField,