From 1009e2d69f7fa843cb648642312b5cae21c78b47 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 12 Feb 2024 18:24:41 +0200 Subject: [PATCH 1/3] add default image remotePatterns config for whitelisting remote image hostnames --- .../src/templates/nextjs/next.config.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/create-sitecore-jss/src/templates/nextjs/next.config.js b/packages/create-sitecore-jss/src/templates/nextjs/next.config.js index dca8703ef6..9c368345ae 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/next.config.js +++ b/packages/create-sitecore-jss/src/templates/nextjs/next.config.js @@ -30,6 +30,19 @@ const nextConfig = { // Enable React Strict Mode reactStrictMode: true, + // use this configuration to ensure that only images from the whitelisted domains + // can be served from the Next.js Image Optimization API + // see https://nextjs.org/docs/app/api-reference/components/image#remotepatterns + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'edge.**', + port: '', + }, + ], + }, + async rewrites() { // When in connected mode we want to proxy Sitecore paths off to Sitecore return [ From ba318e3aeeaaceb44419ed68f4a44fecede60b9f Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 12 Feb 2024 18:33:11 +0200 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f43984a963..13a161f1f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ Our versioning strategy is as follows: * `[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)) * `[sitecore-jss-nextjs]` Fix redirects middleware for working with absolute url where is using site language context ([#1727](https://github.com/Sitecore/jss/pull/1727)) +* `[templates/nextjs]` Add default image remotePatterns in next.config.js for whitelisting remote image hostnames so that can be served by the Next.js Image Optimization API ([#1732](https://github.com/Sitecore/jss/pull/1732)) ### 🛠 Breaking Changes From a27531d8f27790e425d9b79d08340d367ab0a162 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 12 Feb 2024 19:57:42 +0200 Subject: [PATCH 3/3] updated pattern to include lower edge environments --- .../create-sitecore-jss/src/templates/nextjs/next.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs/next.config.js b/packages/create-sitecore-jss/src/templates/nextjs/next.config.js index 9c368345ae..c114f4a498 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/next.config.js +++ b/packages/create-sitecore-jss/src/templates/nextjs/next.config.js @@ -37,7 +37,7 @@ const nextConfig = { remotePatterns: [ { protocol: 'https', - hostname: 'edge.**', + hostname: 'edge*.**', port: '', }, ],