Add experimental wildcard `remotePatterns` config for upstream images #36245

styfle · 2022-04-18T15:53:39Z

Description

This PR implements a new configuration object in next.config.js called experimental.images.remotePatterns.

This will eventually deprecate images.domains because it covers the same use cases and more by allowing wildcard pattern matching on hostname and pathname and also allows restricting protocol and port.

Feature

Implements an existing feature request.
Related issues linked
Unit tests added
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
buildDuration	19.7s	20s	⚠️ +351ms
buildDurationCached	7.8s	7.6s	-257ms
nodeModulesSize	475 MB	475 MB	⚠️ +12.3 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
/ failed reqs	0	0	✓
/ total time (seconds)	5.115	5.206	⚠️ +0.09
/ avg req/sec	488.74	480.17	⚠️ -8.57
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.189	2.222	⚠️ +0.03
/error-in-render avg req/sec	1141.99	1124.9	⚠️ -17.09

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.8 kB	28.8 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.5 kB	72.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.08 kB	3.08 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.71 kB	5.7 kB	-9 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.64 kB	2.64 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	-9 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
index.html gzip	530 B	530 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-544bb68363445a0e.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-c1372eeb4916d32c.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-75136b1767faacf3.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-550ed853173c68fb.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-ca5e63d57db66cd2.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-113a7082ae16fbcb.js"

Diff for image-HASH.js

@@ -619,17 +619,22 @@
         }
         return target;
       }
-      var ref;
-      var experimentalLayoutRaw =
-        (ref = {
-          deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-          imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-          path: "/_next/image",
-          loader: "default",
-          experimentalLayoutRaw: false
-        }) === null || ref === void 0
-          ? void 0
-          : ref.experimentalLayoutRaw;
+      var ref =
+          {
+            deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+            path: "/_next/image",
+            loader: "default",
+            experimentalLayoutRaw: false
+          } || {},
+        _experimentalLayoutRaw = ref.experimentalLayoutRaw,
+        experimentalLayoutRaw =
+          _experimentalLayoutRaw === void 0 ? false : _experimentalLayoutRaw,
+        _experimentalRemotePatterns = ref.experimentalRemotePatterns,
+        experimentalRemotePatterns =
+          _experimentalRemotePatterns === void 0
+            ? []
+            : _experimentalRemotePatterns;
       var configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
         imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
@@ -756,9 +761,9 @@
             sizes: undefined
           };
         }
-        var ref3 = getWidths(config, width, layout, sizes),
-          widths = ref3.widths,
-          kind = ref3.kind;
+        var ref4 = getWidths(config, width, layout, sizes),
+          widths = ref4.widths,
+          kind = ref4.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -802,11 +807,11 @@
         return undefined;
       }
       function defaultImageLoader(loaderProps) {
-        var ref2;
+        var ref5;
         var loaderKey =
-          ((ref2 = loaderProps.config) === null || ref2 === void 0
+          ((ref5 = loaderProps.config) === null || ref5 === void 0
             ? void 0
-            : ref2.loader) || "default";
+            : ref5.loader) || "default";
         var load = loaders.get(loaderKey);
         if (load) {
           return load(loaderProps);
@@ -864,7 +869,7 @@
             });
           }
           if (false) {
-            var parent, widthModified, heightModified, ref3;
+            var parent, widthModified, heightModified, ref6;
           }
         });
       }
@@ -1081,7 +1086,7 @@
           width = param.width,
           quality = param.quality;
         if (false) {
-          var parsedSrc, missingValues;
+          var hasMatch, parsedSrc, missingValues;
         }
         if (src.endsWith(".svg") && !config.dangerouslyAllowSVG) {
           // Special case to make svg serve as-is to avoid proxying

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
buildDuration	22.5s	22.6s	⚠️ +157ms
buildDurationCached	7.6s	7.7s	⚠️ +146ms
nodeModulesSize	475 MB	475 MB	⚠️ +12.3 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
/ failed reqs	0	0	✓
/ total time (seconds)	5.029	5.077	⚠️ +0.05
/ avg req/sec	497.07	492.4	⚠️ -4.67
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.186	2.16	-0.03
/error-in-render avg req/sec	1143.67	1157.51	+13.84

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	73.1 kB	73.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	3.08 kB	3.08 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.76 kB	5.79 kB	⚠️ +25 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.76 kB	2.76 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.5 kB	16.5 kB	⚠️ +25 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
_buildManifest.js gzip	458 B	456 B	-2 B
Overall change	458 B	456 B	-2 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 27925-add-remote-patterns	Change
index.html gzip	530 B	530 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-544bb68363445a0e.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-c1372eeb4916d32c.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-75136b1767faacf3.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-550ed853173c68fb.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-ca5e63d57db66cd2.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-113a7082ae16fbcb.js"

Diff for image-HASH.js

@@ -619,17 +619,22 @@
         }
         return target;
       }
-      var ref;
-      var experimentalLayoutRaw =
-        (ref = {
-          deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-          imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-          path: "/_next/image",
-          loader: "default",
-          experimentalLayoutRaw: false
-        }) === null || ref === void 0
-          ? void 0
-          : ref.experimentalLayoutRaw;
+      var ref =
+          {
+            deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+            path: "/_next/image",
+            loader: "default",
+            experimentalLayoutRaw: false
+          } || {},
+        _experimentalLayoutRaw = ref.experimentalLayoutRaw,
+        experimentalLayoutRaw =
+          _experimentalLayoutRaw === void 0 ? false : _experimentalLayoutRaw,
+        _experimentalRemotePatterns = ref.experimentalRemotePatterns,
+        experimentalRemotePatterns =
+          _experimentalRemotePatterns === void 0
+            ? []
+            : _experimentalRemotePatterns;
       var configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
         imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
@@ -756,9 +761,9 @@
             sizes: undefined
           };
         }
-        var ref3 = getWidths(config, width, layout, sizes),
-          widths = ref3.widths,
-          kind = ref3.kind;
+        var ref4 = getWidths(config, width, layout, sizes),
+          widths = ref4.widths,
+          kind = ref4.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -802,11 +807,11 @@
         return undefined;
       }
       function defaultImageLoader(loaderProps) {
-        var ref2;
+        var ref5;
         var loaderKey =
-          ((ref2 = loaderProps.config) === null || ref2 === void 0
+          ((ref5 = loaderProps.config) === null || ref5 === void 0
             ? void 0
-            : ref2.loader) || "default";
+            : ref5.loader) || "default";
         var load = loaders.get(loaderKey);
         if (load) {
           return load(loaderProps);
@@ -864,7 +869,7 @@
             });
           }
           if (false) {
-            var parent, widthModified, heightModified, ref3;
+            var parent, widthModified, heightModified, ref6;
           }
         });
       }
@@ -1081,7 +1086,7 @@
           width = param.width,
           quality = param.quality;
         if (false) {
-          var parsedSrc, missingValues;
+          var hasMatch, parsedSrc, missingValues;
         }
         if (src.endsWith(".svg") && !config.dangerouslyAllowSVG) {
           // Special case to make svg serve as-is to avoid proxying

Commit: e20ce59

packages/next/server/config.ts

packages/next/shared/lib/match-remote-pattern.ts

packages/next/telemetry/events/version.ts

test/unit/image-optimizer/match-remote-pattern.test.ts

packages/next/shared/lib/match-remote-pattern.ts

Co-authored-by: JJ Kasper <jj@jjsweb.site>

test/unit/image-optimizer/match-remote-pattern.test.ts

ijjk

Looks good, thanks! 🙌

Co-authored-by: JJ Kasper <jj@jjsweb.site>

- Follow up to #36245 - Closes #37026

Add support for wildcard images.remotePatterns config

184d1dd

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Apr 18, 2022

styfle changed the title ~~Add support for wildcard images.remotePatterns config~~ Add support for wildcard images.remotePatterns config for upstream images Apr 18, 2022

styfle added 3 commits April 18, 2022 12:37

Fix lint

8d66c2c

Run lint

5bdae63

Add test and telemetry

b80be6e

ijjk added the area: documentation label Apr 18, 2022

styfle added 2 commits April 18, 2022 19:23

Simplify remote pattern assetPrefix

12c2ffa

Fix test

7f9d656

This comment was marked as outdated.

# to view

styfle added 11 commits April 19, 2022 18:58

Fix validation

98f3738

Merge branch 'canary' into 27925-add-remote-patterns

bbc9477

Add docs for remotePatterns

0feee39

Fix bug

00b0bbc

Handle case when remotePatterns is undefined

022db8c

Add version to table

c56637a

Merge branch 'canary' into 27925-add-remote-patterns

442dbca

Move match-remote-patterns to shared

853c58c

Fix lint

9acea01

Fix assetPrefix usage

2ff43da

Change config to experimental

c374ffa

styfle changed the title ~~Add support for wildcard images.remotePatterns config for upstream images~~ Add experimental wildcard images.remotePatterns config May 3, 2022

styfle added 6 commits May 3, 2022 18:56

Revert build config

342bb7d

Merge branch 'canary' into 27925-add-remote-patterns

d649e27

Add back the build config

591d8c5

Revert check for NODE_ENV

32263da

Revert image-from-node-modules test

fa98923

Fix default value

e26fbab

Update experimental note

66e344a