chore(docs): update version history of `next/image` (#73923) #74570

styfle · 2025-01-06T22:17:08Z

Backport #73923 to 15.1.x

These features were added in Next.js 15.x but then back-ported to 14.x since they can impact billing. So we should land this docs PR and then also back-port it. I also noticed that the heading was wrong for `localPatterns`.

ijjk · 2025-01-06T22:32:37Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
buildDuration	21.6s	21.2s	N/A
buildDurationCached	19s	15.9s	N/A
nodeModulesSize	417 MB	409 MB	N/A
nextStartRea..uration (ms)	540ms	541ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
1187-HASH.js gzip	52.6 kB	50.4 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.44 kB	5.3 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	53 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	232 B	235 B	N/A
main-HASH.js gzip	34.1 kB	33.7 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.57 kB	4.43 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
_buildManifest.js gzip	749 B	745 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
index.html gzip	523 B	523 B	✓
link.html gzip	538 B	538 B	✓
withRouter.html gzip	519 B	520 B	N/A
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	206 kB	203 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
middleware-b..fest.js gzip	669 B	667 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	363 kB	322 kB	N/A
app-page-exp..prod.js gzip	129 kB	127 kB	N/A
app-page-tur..prod.js gzip	142 kB	140 kB	N/A
app-page-tur..prod.js gzip	138 kB	135 kB	N/A
app-page.run...dev.js gzip	352 kB	313 kB	N/A
app-page.run..prod.js gzip	125 kB	122 kB	N/A
app-route-ex...dev.js gzip	37.5 kB	37.1 kB	N/A
app-route-ex..prod.js gzip	25.5 kB	25.1 kB	N/A
app-route-tu..prod.js gzip	25.5 kB	25.1 kB	N/A
app-route-tu..prod.js gzip	25.4 kB	24.9 kB	N/A
app-route.ru...dev.js gzip	39.2 kB	38.7 kB	N/A
app-route.ru..prod.js gzip	25.4 kB	24.9 kB	N/A
pages-api-tu..prod.js gzip	9.69 kB	9.56 kB	N/A
pages-api.ru...dev.js gzip	11.6 kB	11.4 kB	N/A
pages-api.ru..prod.js gzip	9.68 kB	9.56 kB	N/A
pages-turbo...prod.js gzip	21.7 kB	21.3 kB	N/A
pages.runtim...dev.js gzip	27.5 kB	27 kB	N/A
pages.runtim..prod.js gzip	21.7 kB	21.3 kB	N/A
server.runti..prod.js gzip	916 kB	916 kB	⚠️ +232 B
Overall change	917 kB	917 kB	⚠️ +232 B

build cache

	vercel/next.js canary	vercel/next.js styfle/backport-73923	Change
0.pack gzip	2.09 MB	2.04 MB	N/A
index.pack gzip	74.7 kB	72.4 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2983],
   {
-    /***/ 3705: /***/ (
+    /***/ 8255: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8448);
+          return __webpack_require__(8926);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7342: /***/ (module, exports, __webpack_require__) => {
+    /***/ 4369: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(6049)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7196)
+        __webpack_require__(956)
       );
-      const _getimgprops = __webpack_require__(2661);
-      const _imageconfig = __webpack_require__(72);
-      const _imageconfigcontextsharedruntime = __webpack_require__(6386);
-      const _warnonce = __webpack_require__(4496);
-      const _routercontextsharedruntime = __webpack_require__(6443);
+      const _getimgprops = __webpack_require__(485);
+      const _imageconfig = __webpack_require__(4664);
+      const _imageconfigcontextsharedruntime = __webpack_require__(1250);
+      const _warnonce = __webpack_require__(1648);
+      const _routercontextsharedruntime = __webpack_require__(907);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
-      const _usemergedref = __webpack_require__(1942);
+      const _usemergedref = __webpack_require__(5942);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -302,22 +302,16 @@
             _imageconfigcontextsharedruntime.ImageConfigContext
           );
           const config = (0, _react.useMemo)(() => {
-            var _c_qualities;
             const c =
               configEnv || configContext || _imageconfig.imageConfigDefault;
             const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
               (a, b) => a - b
             );
             const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
-            const qualities =
-              (_c_qualities = c.qualities) == null
-                ? void 0
-                : _c_qualities.sort((a, b) => a - b);
             return {
               ...c,
               allSizes,
               deviceSizes,
-              qualities,
             };
           }, [configContext]);
           const { onLoad, onLoadingComplete } = props;
@@ -377,7 +371,7 @@
       /***/
     },
 
-    /***/ 1942: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5942: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -438,7 +432,7 @@
       /***/
     },
 
-    /***/ 2661: /***/ (
+    /***/ 485: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -454,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4496);
-      const _imageblursvg = __webpack_require__(4796);
-      const _imageconfig = __webpack_require__(72);
+      const _warnonce = __webpack_require__(1648);
+      const _imageblursvg = __webpack_require__(4812);
+      const _imageconfig = __webpack_require__(4664);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -612,32 +606,19 @@
         if ("allSizes" in c) {
           config = c;
         } else {
-          var _c_qualities;
           const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
             (a, b) => a - b
           );
           const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
-          const qualities =
-            (_c_qualities = c.qualities) == null
-              ? void 0
-              : _c_qualities.sort((a, b) => a - b);
           config = {
             ...c,
             allSizes,
             deviceSizes,
-            qualities,
           };
         }
         if (typeof defaultLoader === "undefined") {
-          throw Object.defineProperty(
-            new Error(
-              "images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config"
-            ),
-            "__NEXT_ERROR_CODE",
-            {
-              value: "E163",
-              enumerable: false,
-            }
+          throw new Error(
+            "images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config"
           );
         }
         let loader = rest.loader || defaultLoader;
@@ -649,18 +630,11 @@
         const isDefaultLoader = "__next_img_default" in loader;
         if (isDefaultLoader) {
           if (config.loader === "custom") {
-            throw Object.defineProperty(
-              new Error(
-                'Image with src "' +
-                  src +
-                  '" is missing "loader" prop.' +
-                  "\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader"
-              ),
-              "__NEXT_ERROR_CODE",
-              {
-                value: "E252",
-                enumerable: false,
-              }
+            throw new Error(
+              'Image with src "' +
+                src +
+                '" is missing "loader" prop.' +
+                "\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader"
             );
           }
         } else {
@@ -711,29 +685,15 @@
         if (isStaticImport(src)) {
           const staticImageData = isStaticRequire(src) ? src.default : src;
           if (!staticImageData.src) {
-            throw Object.defineProperty(
-              new Error(
-                "An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received " +
-                  JSON.stringify(staticImageData)
-              ),
-              "__NEXT_ERROR_CODE",
-              {
-                value: "E460",
-                enumerable: false,
-              }
+            throw new Error(
+              "An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received " +
+                JSON.stringify(staticImageData)
             );
           }
           if (!staticImageData.height || !staticImageData.width) {
-            throw Object.defineProperty(
-              new Error(
-                "An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received " +
-                  JSON.stringify(staticImageData)
-              ),
-              "__NEXT_ERROR_CODE",
-              {
-                value: "E48",
-                enumerable: false,
-              }
+            throw new Error(
+              "An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received " +
+                JSON.stringify(staticImageData)
             );
           }
           blurWidth = staticImageData.blurWidth;
@@ -864,7 +824,7 @@
       /***/
     },
 
-    /***/ 4796: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4812: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -919,7 +879,7 @@
       /***/
     },
 
-    /***/ 1969: /***/ (
+    /***/ 8273: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -946,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(173);
-      const _getimgprops = __webpack_require__(2661);
-      const _imagecomponent = __webpack_require__(7342);
+      const _getimgprops = __webpack_require__(485);
+      const _imagecomponent = __webpack_require__(4369);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -981,7 +941,7 @@
       /***/
     },
 
-    /***/ 3433: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6489: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -993,22 +953,10 @@
           return _default;
         },
       });
-      const DEFAULT_Q = 75;
       function defaultLoader(param) {
         let { config, src, width, quality } = param;
-        var _config_qualities;
         if (false) {
         }
-        const q =
-          quality ||
-          ((_config_qualities = config.qualities) == null
-            ? void 0
-            : _config_qualities.reduce((prev, cur) =>
-                Math.abs(cur - DEFAULT_Q) < Math.abs(prev - DEFAULT_Q)
-                  ? cur
-                  : prev
-              )) ||
-          DEFAULT_Q;
         return (
           config.path +
           "?url=" +
@@ -1016,7 +964,7 @@
           "&w=" +
           width +
           "&q=" +
-          q +
+          (quality || 75) +
           (src.startsWith("/_next/static/media/") && false ? 0 : "")
         );
       }
@@ -1028,7 +976,7 @@
       /***/
     },
 
-    /***/ 8448: /***/ (
+    /***/ 8926: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1045,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5105);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@[email protected][email protected][email protected]/node_modules/next/image.js
-      var next_image = __webpack_require__(8140);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@[email protected][email protected][email protected]/node_modules/next/image.js
+      var next_image = __webpack_require__(5434);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1076,12 +1024,12 @@
       /***/
     },
 
-    /***/ 8140: /***/ (
+    /***/ 5434: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(1969);
+      module.exports = __webpack_require__(8273);
 
       /***/
     },
@@ -1091,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3705)
+      __webpack_exec__(8255)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 1187-HASH.js

Diff too large to display

Diff for 8377-HASH.js

@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [8377],
+  [2727],
   {
-    /***/ 8377: /***/ (module, exports, __webpack_require__) => {
+    /***/ 2727: /***/ (module, exports, __webpack_require__) => {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -13,27 +13,27 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
-      const _interop_require_wildcard = __webpack_require__(333);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(384);
+      const _interop_require_wildcard = __webpack_require__(4261);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8307)
+        __webpack_require__(9221)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8050)
+        __webpack_require__(1116)
       );
-      const _getimgprops = __webpack_require__(3201);
-      const _imageconfig = __webpack_require__(6678);
-      const _imageconfigcontextsharedruntime = __webpack_require__(578);
-      const _warnonce = __webpack_require__(1971);
-      const _routercontextsharedruntime = __webpack_require__(7795);
+      const _getimgprops = __webpack_require__(5763);
+      const _imageconfig = __webpack_require__(6224);
+      const _imageconfigcontextsharedruntime = __webpack_require__(6720);
+      const _warnonce = __webpack_require__(894);
+      const _routercontextsharedruntime = __webpack_require__(9093);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1315)
+        __webpack_require__(2809)
       );
-      const _usemergedref = __webpack_require__(592);
+      const _usemergedref = __webpack_require__(1329);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -286,22 +286,16 @@
             _imageconfigcontextsharedruntime.ImageConfigContext
           );
           const config = (0, _react.useMemo)(() => {
-            var _c_qualities;
             const c =
               configEnv || configContext || _imageconfig.imageConfigDefault;
             const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
               (a, b) => a - b
             );
             const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
-            const qualities =
-              (_c_qualities = c.qualities) == null
-                ? void 0
-                : _c_qualities.sort((a, b) => a - b);
             return {
               ...c,
               allSizes,
               deviceSizes,
-              qualities,
             };
           }, [configContext]);
           const { onLoad, onLoadingComplete } = props;
@@ -361,7 +355,7 @@
       /***/
     },
 
-    /***/ 592: /***/ (module, exports, __webpack_require__) => {
+    /***/ 1329: /***/ (module, exports, __webpack_require__) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -371,7 +365,7 @@
           return useMergedRef;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       function useMergedRef(refA, refB) {
         const cleanupA = (0, _react.useRef)(() => {});
         const cleanupB = (0, _react.useRef)(() => {});
@@ -420,7 +414,7 @@
       /***/
     },
 
-    /***/ 5318: /***/ (
+    /***/ 272: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -434,9 +428,9 @@
           return AmpStateContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const AmpStateContext = _react.default.createContext({});
       if (false) {
@@ -445,7 +439,7 @@
       /***/
     },
 
-    /***/ 1210: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1467: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -467,7 +461,7 @@
       /***/
     },
 
-    /***/ 3201: /***/ (
+    /***/ 5763: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -481,9 +475,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(1971);
-      const _imageblursvg = __webpack_require__(3482);
-      const _imageconfig = __webpack_require__(6678);
+      const _warnonce = __webpack_require__(894);
+      const _imageblursvg = __webpack_require__(5868);
+      const _imageconfig = __webpack_require__(6224);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -639,32 +633,19 @@
         if ("allSizes" in c) {
           config = c;
         } else {
-          var _c_qualities;
           const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
             (a, b) => a - b
           );
           const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
-          const qualities =
-            (_c_qualities = c.qualities) == null
-              ? void 0
-              : _c_qualities.sort((a, b) => a - b);
           config = {
             ...c,
             allSizes,
             deviceSizes,
-            qualities,
           };
         }
         if (typeof defaultLoader === "undefined") {
-          throw Object.defineProperty(
-            new Error(
-              "images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config"
-            ),
-            "__NEXT_ERROR_CODE",
-            {
-              value: "E163",
-              enumerable: false,
-            }
+          throw new Error(
+            "images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config"
           );
         }
         let loader = rest.loader || defaultLoader;
@@ -676,18 +657,11 @@
         const isDefaultLoader = "__next_img_default" in loader;
         if (isDefaultLoader) {
           if (config.loader === "custom") {
-            throw Object.defineProperty(
-              new Error(
-                'Image with src "' +
-                  src +
-                  '" is missing "loader" prop.' +
-                  "\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader"
-              ),
-              "__NEXT_ERROR_CODE",
-              {
-                value: "E252",
-                enumerable: false,
-              }
+            throw new Error(
+              'Image with src "' +
+                src +
+                '" is missing "loader" prop.' +
+                "\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader"
             );
           }
         } else {
@@ -738,29 +712,15 @@
         if (isStaticImport(src)) {
           const staticImageData = isStaticRequire(src) ? src.default : src;
           if (!staticImageData.src) {
-            throw Object.defineProperty(
-              new Error(
-                "An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received " +
-                  JSON.stringify(staticImageData)
-              ),
-              "__NEXT_ERROR_CODE",
-              {
-                value: "E460",
-                enumerable: false,
-              }
+            throw new Error(
+              "An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received " +
+                JSON.stringify(staticImageData)
             );
           }
           if (!staticImageData.height || !staticImageData.width) {
-            throw Object.defineProperty(
-              new Error(
-                "An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received " +
-                  JSON.stringify(staticImageData)
-              ),
-              "__NEXT_ERROR_CODE",
-              {
-                value: "E48",
-                enumerable: false,
-              }
+            throw new Error(
+              "An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received " +
+                JSON.stringify(staticImageData)
             );
           }
           blurWidth = staticImageData.blurWidth;
@@ -891,8 +851,8 @@
       /***/
     },
 
-    /***/ 8050: /***/ (module, exports, __webpack_require__) => {
-      /* provided dependency */ var process = __webpack_require__(6611);
+    /***/ 1116: /***/ (module, exports, __webpack_require__) => {
+      /* provided dependency */ var process = __webpack_require__(9829);
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -913,19 +873,19 @@
           return defaultHead;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
-      const _interop_require_wildcard = __webpack_require__(333);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(384);
+      const _interop_require_wildcard = __webpack_require__(4261);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4607)
+        __webpack_require__(4101)
       );
-      const _ampcontextsharedruntime = __webpack_require__(5318);
-      const _headmanagercontextsharedruntime = __webpack_require__(7060);
-      const _ampmode = __webpack_require__(1210);
-      const _warnonce = __webpack_require__(1971);
+      const _ampcontextsharedruntime = __webpack_require__(272);
+      const _headmanagercontextsharedruntime = __webpack_require__(1790);
+      const _ampmode = __webpack_require__(1467);
+      const _warnonce = __webpack_require__(894);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -1109,7 +1069,7 @@
       /***/
     },
 
-    /***/ 3482: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5868: /***/ (__unused_webpack_module, exports) => {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -1163,7 +1123,7 @@
       /***/
     },
 
-    /***/ 578: /***/ (
+    /***/ 6720: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1177,11 +1137,11 @@
           return ImageConfigContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
-      const _imageconfig = __webpack_require__(6678);
+      const _imageconfig = __webpack_require__(6224);
       const ImageConfigContext = _react.default.createContext(
         _imageconfig.imageConfigDefault
       );
@@ -1191,7 +1151,7 @@
       /***/
     },
 
-    /***/ 6678: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6224: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1233,14 +1193,13 @@
         contentDispositionType: "attachment",
         localPatterns: undefined,
         remotePatterns: [],
-        qualities: undefined,
         unoptimized: false,
       }; //# sourceMappingURL=image-config.js.map
 
       /***/
     },
 
-    /***/ 1315: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2809: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1250,22 +1209,10 @@
           return _default;
         },
       });
-      const DEFAULT_Q = 75;
       function defaultLoader(param) {
         let { config, src, width, quality } = param;
-        var _config_qualities;
         if (false) {
         }
-        const q =
-          quality ||
-          ((_config_qualities = config.qualities) == null
-            ? void 0
-            : _config_qualities.reduce((prev, cur) =>
-                Math.abs(cur - DEFAULT_Q) < Math.abs(prev - DEFAULT_Q)
-                  ? cur
-                  : prev
-              )) ||
-          DEFAULT_Q;
         return (
           config.path +
           "?url=" +
@@ -1273,7 +1220,7 @@
           "&w=" +
           width +
           "&q=" +
-          q +
+          (quality || 75) +
           (src.startsWith("/_next/static/media/") && false ? 0 : "")
         );
       }
@@ -1285,7 +1232,7 @@
       /***/
     },
 
-    /***/ 7795: /***/ (
+    /***/ 9093: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1299,9 +1246,9 @@
           return RouterContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const RouterContext = _react.default.createContext(null);
       if (false) {
@@ -1310,7 +1257,7 @@
       /***/
     },
 
-    /***/ 4607: /***/ (
+    /***/ 4101: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1324,7 +1271,7 @@
           return SideEffect;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       const isServer = typeof window === "undefined";
       const useClientOnlyLayoutEffect = isServer
         ? () => {}

Diff for bccd1874-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for pages-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

failed to diff

Commit: 9d57d9f

ijjk · 2025-01-06T22:35:14Z

Failing test suites

Commit: 9d57d9f

pnpm test-dev test/development/acceptance-app/ReactRefreshLogBox.test.ts

ReactRefreshLogBox app default > server component can recover from error thrown in the module

Expand output

● ReactRefreshLogBox app default › server component can recover from error thrown in the module

Expected Redbox but found none

  1060 |
  1061 |       await next.patchFile('index.js', "throw new Error('module error')")
> 1062 |       await session.assertHasRedbox()
       |       ^
  1063 |       await next.patchFile(
  1064 |         'index.js',
  1065 |         'export default function Page() {return <p>hello world</p>}'

  at Object.<anonymous> (development/acceptance-app/ReactRefreshLogBox.test.ts:1062:7)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/app-dir/actions/app-action.test.ts (PPR)

app-dir action handling > fetch actions > should handle redirects to routes that provide an invalid RSC response

Expand output

● app-dir action handling › fetch actions › should handle redirects to routes that provide an invalid RSC response

expect(received).toContain(expected) // indexOf

Expected substring: "Hello from a pages route"
Received string:    "0.5312488891430551
Client
Server
Client and Server
0
+1+1 (Slow)-1*2
redirect to a pages route
submit
test"

  1269 |
  1270 |       await retry(async () => {
> 1271 |         expect(await browser.elementByCss('body').text()).toContain(
       |                                                           ^
  1272 |           'Hello from a pages route'
  1273 |         )
  1274 |         expect(await browser.url()).toBe(`${next.url}/pages-dir`)

  at toContain (e2e/app-dir/actions/app-action.test.ts:1271:59)
  at retry (lib/next-test-utils.ts:806:14)
  at Object.<anonymous> (e2e/app-dir/actions/app-action.test.ts:1270:7)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/persistent-caching/persistent-caching.test.ts (PPR)

persistent-caching > should persistent cache loaders

Expand output

● persistent-caching › should persistent cache loaders

expect(received).toBe(expected) // Object.is equality

Expected: "Timestamp = 1736203025593"
Received: "Timestamp = 1736203045092"

  55 |       const browser = await next.browser('/pages')
  56 |       // TODO Persistent Caching for webpack dev server is broken
> 57 |       expect(await browser.elementByCss('main').text()).toBe(pagesTimestamp)
     |                                                         ^
  58 |       await browser.close()
  59 |     }
  60 |   })

  at Object.toBe (e2e/persistent-caching/persistent-caching.test.ts:57:57)

Read more about building and testing Next.js in contributing.md.

##### [v15.1.4](https://github.com/vercel/next.js/releases/tag/v15.1.4) > \[!NOTE]\ > This release is backporting bug fixes. It does **not** include all pending features/changes on canary. ##### Core Changes - backport: force module format for virtual client-proxy ([#74608](vercel/next.js#74608)) - Fix prerender tags when notFound is called ([#74607](vercel/next.js#74607)) - Use provided waitUntil for pending revalidates ([#74604](vercel/next.js#74604)) - Feature: next/image: add support for images.qualities in next.config ([#74588](vercel/next.js#74588)) - Chore: docs: add missing search: '' on remotePatterns ([#74587](vercel/next.js#74587)) - Chore: docs: update version history of next/image ([#73923](vercel/next.js#73923)) ([#74570](vercel/next.js#74570)) - Chore: next/image: improve imgopt api bypass detection for unsupported images ([#74569](vercel/next.js#74569)) ##### Credits Huge thanks to @ and @ for helping!

chore(docs): update version history of next/image (#73923)

9d57d9f

These features were added in Next.js 15.x but then back-ported to 14.x since they can impact billing. So we should land this docs PR and then also back-port it. I also noticed that the heading was wrong for `localPatterns`.

styfle requested a review from ztanner January 6, 2025 22:17

ijjk added created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. labels Jan 6, 2025

styfle requested a review from a team January 6, 2025 22:17

ztanner approved these changes Jan 6, 2025

View reviewed changes

ijjk approved these changes Jan 7, 2025

View reviewed changes

styfle merged commit 7b195a8 into next-15-0 Jan 7, 2025
102 of 106 checks passed

styfle deleted the styfle/backport-73923 branch January 7, 2025 03:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(docs): update version history of `next/image` (#73923) #74570

chore(docs): update version history of `next/image` (#73923) #74570

styfle commented Jan 6, 2025

ijjk commented Jan 6, 2025

ijjk commented Jan 6, 2025 •

edited

Loading

chore(docs): update version history of next/image (#73923) #74570

chore(docs): update version history of next/image (#73923) #74570

Conversation

styfle commented Jan 6, 2025

ijjk commented Jan 6, 2025

Stats from current PR

ijjk commented Jan 6, 2025 • edited Loading

Failing test suites

chore(docs): update version history of `next/image` (#73923) #74570

chore(docs): update version history of `next/image` (#73923) #74570

ijjk commented Jan 6, 2025 •

edited

Loading