diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1bbd8e8f1..79f4bbb73e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,7 @@ Our versioning strategy is as follows:
 
 * Update node/types to version 20 in all packages and samples ([#1810](https://github.com/Sitecore/jss/pull/1810))
 * Github - Teams integration ([#1823](https://github.com/Sitecore/jss/pull/1823))
+* [nextjs] Add `sharp` dependency to be in-line with nextjs's Image Optimizaion best practices: https://nextjs.org/docs/messages/install-sharp
 
 ## 22.0.0
 
diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md
index 6509a62791..642bd83c2e 100644
--- a/docs/upgrades/unreleased.md
+++ b/docs/upgrades/unreleased.md
@@ -117,6 +117,9 @@
         ...
     ```
 
+* It's highly recommended to install `sharp` dependency version `0.32.6` for nextjs apps in order to improve memory usage of Image Optimization feature. Run the `npm` command to install it:
+    `npm i sharp@0.32.6`
+
 # nextjs-xmcloud
 
 * Render a new `EditingScripts` component in your `Scripts.ts` file to support a new Editing Integration feature.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
index 8cfd687f38..6d33038065 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/package.json
+++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -31,7 +31,8 @@
     "next": "^14.1.0",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.0",