Stats from current release

ijjk · 2022-04-12T19:25:49Z

Stats from current release

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
buildDuration	15s	15s	-62ms
buildDurationCached	6.1s	6.2s	⚠️ +30ms
nodeModulesSize	86.6 MB	86.7 MB	⚠️ +60.7 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.154	3.257	⚠️ +0.1
/ avg req/sec	792.71	767.64	⚠️ -25.07
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.378	1.416	⚠️ +0.04
/error-in-render avg req/sec	1813.71	1765.81	⚠️ -47.9

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.4 kB	28.3 kB	-100 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.1 kB	72 kB	-100 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.05 kB	3.05 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.48 kB	5.73 kB	⚠️ +245 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.36 kB	⚠️ +102 B
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	387 B	392 B	⚠️ +5 B
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.7 kB	16 kB	⚠️ +352 B

Client Build Manifests

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
index.html gzip	531 B	532 B	⚠️ +1 B
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	526 B	⚠️ +1 B
Overall change	1.6 kB	1.6 kB	⚠️ +2 B

Diffs

Diff for _buildManifest.js

@@ -12,14 +12,14 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-fceff8aa5864bcb2.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-a96e4060bca1ccfe.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-5597cb692d5dcc6b.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-c605640c895e01ab.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-cb15c8ac2322bf32.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-98eb70bf22fb21da.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-8706ec6f36f636f6.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-1d699e963b4c9346.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-1285f0be62775073.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-ee616b01250df021.js"
   ],
   sortedPages: [
     "\u002F",

Diff for image-HASH.js

@@ -18,13 +18,8 @@
       /***/
     },
 
-    /***/ 9749: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 9749: /***/ function(module, exports, __webpack_require__) {
       "use strict";
-      var __webpack_unused_export__;
 
       function _arrayLikeToArray(arr, len) {
         if (len == null || len > arr.length) len = arr.length;
@@ -123,9 +118,9 @@
         )
           return _arrayLikeToArray(o, minLen);
       }
-      __webpack_unused_export__ = {
+      Object.defineProperty(exports, "__esModule", {
         value: true
-      };
+      });
       exports["default"] = Image;
       var _react = _interopRequireWildcard(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(3121));
@@ -154,8 +149,7 @@
           objectFit = _param.objectFit,
           objectPosition = _param.objectPosition,
           onLoadingComplete = _param.onLoadingComplete,
-          _loader = _param.loader,
-          loader = _loader === void 0 ? defaultImageLoader : _loader,
+          onError = _param.onError,
           _placeholder = _param.placeholder,
           placeholder = _placeholder === void 0 ? "empty" : _placeholder,
           blurDataURL = _param.blurDataURL,
@@ -175,7 +169,7 @@
             "objectFit",
             "objectPosition",
             "onLoadingComplete",
-            "loader",
+            "onError",
             "placeholder",
             "blurDataURL"
           ]);
@@ -206,8 +200,26 @@
         if ("layout" in rest) {
           // Override default layout if the user specified one:
           if (rest.layout) layout = rest.layout;
-          // Remove property so it's not spread into image:
-          delete rest["layout"];
+          // Remove property so it's not spread on <img>:
+          delete rest.layout;
+        }
+        var loader = defaultImageLoader;
+        if ("loader" in rest) {
+          if (rest.loader) {
+            var customImageLoader = rest.loader;
+            var _tmp;
+            (_tmp = function(obj) {
+              var _ = obj.config,
+                opts = _objectWithoutProperties(obj, ["config"]);
+              // The config object is internal only so we must
+              // not pass it to the user-defined loader()
+              return customImageLoader(opts);
+            }),
+              (loader = _tmp),
+              _tmp;
+          }
+          // Remove property so it's not spread on <img>
+          delete rest.loader;
         }
         var staticSrc = "";
         if (isStaticImport(src)) {
@@ -247,16 +259,20 @@
         if (true && loadedImageURLs.has(src)) {
           isLazy = false;
         }
+        var ref2 = _slicedToArray((0, _react).useState(false), 2),
+          blurComplete = ref2[0],
+          setBlurComplete = ref2[1];
         var ref1 = _slicedToArray(
             (0, _useIntersection).useIntersection({
               rootRef: lazyRoot,
               rootMargin: lazyBoundary,
               disabled: !isLazy
             }),
-            2
+            3
           ),
           setIntersection = ref1[0],
-          isIntersected = ref1[1];
+          isIntersected = ref1[1],
+          resetIntersected = ref1[2];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
           boxSizing: "border-box",
@@ -318,7 +334,7 @@
             : layoutStyle
         );
         var blurStyle =
-          placeholder === "blur"
+          placeholder === "blur" && !blurComplete
             ? {
                 filter: "blur(20px)",
                 backgroundSize: objectFit || "cover",
@@ -404,7 +420,7 @@
           _obj);
         var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
         var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
-        var imgRef = (0, _react).useRef(null);
+        var previousImageSrc = (0, _react).useRef(src);
         (0, _react).useEffect(
           function() {
             onLoadingCompleteRef.current = onLoadingComplete;
@@ -413,21 +429,12 @@
         );
         useLayoutEffect(
           function() {
-            setIntersection(imgRef.current);
-          },
-          [setIntersection]
-        );
-        (0, _react).useEffect(
-          function() {
-            handleLoading(
-              imgRef,
-              srcString,
-              layout,
-              placeholder,
-              onLoadingCompleteRef
-            );
+            if (previousImageSrc.current !== src) {
+              resetIntersected();
+              previousImageSrc.current = src;
+            }
           },
-          [srcString, layout, placeholder, isVisible]
+          [resetIntersected, src]
         );
         var imgElementArgs = _objectSpread(
           {
@@ -440,13 +447,16 @@
             className: className,
             imgStyle: imgStyle,
             blurStyle: blurStyle,
-            imgRef: imgRef,
             loading: loading,
             config: config,
             unoptimized: unoptimized,
             placeholder: placeholder,
             loader: loader,
-            srcString: srcString
+            srcString: srcString,
+            onLoadingCompleteRef: onLoadingCompleteRef,
+            setBlurComplete: setBlurComplete,
+            setIntersection: setIntersection,
+            isVisible: isVisible
           },
           rest
         );
@@ -752,9 +762,9 @@
             sizes: undefined
           };
         }
-        var ref2 = getWidths(config, width, layout, sizes),
-          widths = ref2.widths,
-          kind = ref2.kind;
+        var ref3 = getWidths(config, width, layout, sizes),
+          widths = ref3.widths,
+          kind = ref3.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -816,56 +826,53 @@
       // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
       // handler instead of the img's onLoad attribute.
       function handleLoading(
-        imgRef,
+        img,
         src,
         layout,
         placeholder,
-        onLoadingCompleteRef
+        onLoadingCompleteRef,
+        setBlurComplete
       ) {
-        var handleLoad = function() {
-          var img = imgRef.current;
-          if (!img) {
+        if (
+          !img ||
+          img.src === emptyDataURL ||
+          img["data-loaded-src"] === src
+        ) {
+          return;
+        }
+        img["data-loaded-src"] = src;
+        var p = "decode" in img ? img.decode() : Promise.resolve();
+        p.catch(function() {}).then(function() {
+          if (!img.parentNode) {
+            // Exit early in case of race condition:
+            // - onload() is called
+            // - decode() is called but incomplete
+            // - unmount is called
+            // - decode() completes
             return;
           }
-          if (img.src !== emptyDataURL) {
-            var p = "decode" in img ? img.decode() : Promise.resolve();
-            p.catch(function() {}).then(function() {
-              if (!imgRef.current) {
-                return;
-              }
-              loadedImageURLs.add(src);
-              if (placeholder === "blur") {
-                img.style.filter = "";
-                img.style.backgroundSize = "";
-                img.style.backgroundImage = "";
-                img.style.backgroundPosition = "";
-              }
-              if (onLoadingCompleteRef.current) {
-                var naturalWidth = img.naturalWidth,
-                  naturalHeight = img.naturalHeight;
-                // Pass back read-only primitive values but not the
-                // underlying DOM element because it could be misused.
-                onLoadingCompleteRef.current({
-                  naturalWidth: naturalWidth,
-                  naturalHeight: naturalHeight
-                });
-              }
-              if (false) {
-                var parent, ref3;
-              }
+          loadedImageURLs.add(src);
+          if (placeholder === "blur") {
+            setBlurComplete(true);
+          }
+          if (
+            onLoadingCompleteRef === null || onLoadingCompleteRef === void 0
+              ? void 0
+              : onLoadingCompleteRef.current
+          ) {
+            var naturalWidth = img.naturalWidth,
+              naturalHeight = img.naturalHeight;
+            // Pass back read-only primitive values but not the
+            // underlying DOM element because it could be misused.
+            onLoadingCompleteRef.current({
+              naturalWidth: naturalWidth,
+              naturalHeight: naturalHeight
             });
           }
-        };
-        if (imgRef.current) {
-          if (imgRef.current.complete) {
-            // If the real image fails to load, this will still remove the placeholder.
-            // This is the desired behavior for now, and will be revisited when error
-            // handling is worked on for the image component itself.
-            handleLoad();
-          } else {
-            imgRef.current.onload = handleLoad;
+          if (false) {
+            var parent, ref3;
           }
-        }
+        });
       }
       var ImageElement = function(_param) {
         var imgAttributes = _param.imgAttributes,
@@ -877,14 +884,17 @@
           imgStyle = _param.imgStyle,
           blurStyle = _param.blurStyle,
           isLazy = _param.isLazy,
-          imgRef = _param.imgRef,
           placeholder = _param.placeholder,
           loading = _param.loading,
-          sizes = _param.sizes,
           srcString = _param.srcString,
           config = _param.config,
           unoptimized = _param.unoptimized,
           loader = _param.loader,
+          onLoadingCompleteRef = _param.onLoadingCompleteRef,
+          setBlurComplete = _param.setBlurComplete,
+          setIntersection = _param.setIntersection,
+          onError = _param.onError,
+          isVisible = _param.isVisible,
           rest = _objectWithoutProperties(_param, [
             "imgAttributes",
             "heightInt",
@@ -895,14 +905,17 @@
             "imgStyle",
             "blurStyle",
             "isLazy",
-            "imgRef",
             "placeholder",
             "loading",
-            "sizes",
             "srcString",
             "config",
             "unoptimized",
-            "loader"
+            "loader",
+            "onLoadingCompleteRef",
+            "setBlurComplete",
+            "setIntersection",
+            "onError",
+            "isVisible"
           ]);
         return /*#__PURE__*/ _react.default.createElement(
           _react.default.Fragment,
@@ -913,7 +926,7 @@
               {},
               rest,
               imgAttributes,
-              layout === "raw" && !sizes
+              layout === "raw" && !imgAttributes.sizes
                 ? {
                     height: heightInt,
                     width: widthInt
@@ -923,8 +936,52 @@
                 decoding: "async",
                 "data-nimg": layout,
                 className: className,
-                ref: imgRef,
-                style: _objectSpread({}, imgStyle, blurStyle)
+                style: _objectSpread({}, imgStyle, blurStyle),
+                ref: (0, _react).useCallback(
+                  function(img) {
+                    setIntersection(img);
+                    if (
+                      img === null || img === void 0 ? void 0 : img.complete
+                    ) {
+                      handleLoading(
+                        img,
+                        srcString,
+                        layout,
+                        placeholder,
+                        onLoadingCompleteRef,
+                        setBlurComplete
+                      );
+                    }
+                  },
+                  [
+                    setIntersection,
+                    srcString,
+                    layout,
+                    placeholder,
+                    onLoadingCompleteRef,
+                    setBlurComplete
+                  ]
+                ),
+                onLoad: function(event) {
+                  var img = event.currentTarget;
+                  handleLoading(
+                    img,
+                    srcString,
+                    layout,
+                    placeholder,
+                    onLoadingCompleteRef,
+                    setBlurComplete
+                  );
+                },
+                onError: function(event) {
+                  if (placeholder === "blur") {
+                    // If the real image fails to load, this will still remove the placeholder.
+                    setBlurComplete(true);
+                  }
+                  if (onError) {
+                    onError(event);
+                  }
+                }
               }
             )
           ),
@@ -944,10 +1001,10 @@
                     layout: layout,
                     width: widthInt,
                     quality: qualityInt,
-                    sizes: sizes,
+                    sizes: imgAttributes.sizes,
                     loader: loader
                   }),
-                  layout === "raw" && !sizes
+                  layout === "raw" && !imgAttributes.sizes
                     ? {
                         height: heightInt,
                         width: widthInt
@@ -1042,16 +1099,19 @@
           .concat(encodeURIComponent(src), "&w=")
           .concat(width, "&q=")
           .concat(quality || 75);
+      }
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
       } //# sourceMappingURL=image.js.map
 
       /***/
     },
 
-    /***/ 9246: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 9246: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       function _arrayLikeToArray(arr, len) {
@@ -1159,6 +1219,9 @@
           },
           [isDisabled, root, rootMargin, visible]
         );
+        var resetVisible = (0, _react).useCallback(function() {
+          setVisible(false);
+        }, []);
         (0, _react).useEffect(
           function() {
             if (!hasIntersectionObserver) {
@@ -1183,7 +1246,7 @@
           },
           [rootRef]
         );
-        return [setRef, visible];
+        return [setRef, visible, resetVisible];
       }
       function observe(element, callback, options) {
         var ref = createObserver(options),
@@ -1247,6 +1310,13 @@
           })
         );
         return instance;
+      }
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
       } //# sourceMappingURL=use-intersection.js.map
 
       /***/
@@ -1274,7 +1344,8 @@
       // EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5893);
       // EXTERNAL MODULE: ./node_modules/next/image.js
-      var next_image = __webpack_require__(5675); // CONCATENATED MODULE: ./pages/nextjs.png
+      var next_image = __webpack_require__(5675);
+      var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
         height: 1347,
@@ -1288,7 +1359,7 @@
             /*#__PURE__*/ (0, jsx_runtime.jsx)("h1", {
               children: "next/image example"
             }),
-            /*#__PURE__*/ (0, jsx_runtime.jsx)(next_image["default"], {
+            /*#__PURE__*/ (0, jsx_runtime.jsx)(image_default(), {
               src: nextjs,
               placeholder: "blur"
             })

Diff for link-HASH.js

@@ -18,13 +18,8 @@
       /***/
     },
 
-    /***/ 1551: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 1551: /***/ function(module, exports, __webpack_require__) {
       "use strict";
-      var __webpack_unused_export__;
 
       function _arrayLikeToArray(arr, len) {
         if (len == null || len > arr.length) len = arr.length;
@@ -95,9 +90,9 @@
         )
           return _arrayLikeToArray(o, minLen);
       }
-      __webpack_unused_export__ = {
+      Object.defineProperty(exports, "__esModule", {
         value: true
-      };
+      });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
       var _router = __webpack_require__(1003);
@@ -198,6 +193,8 @@
           ),
           href = ref2.href,
           as = ref2.as;
+        var previousHref = _react.default.useRef(href);
+        var previousAs = _react.default.useRef(as);
         var children = props.children,
           replace = props.replace,
           shallow = props.shallow,
@@ -221,12 +218,19 @@
             (0, _useIntersection).useIntersection({
               rootMargin: "200px"
             }),
-            2
+            3
           ),
           setIntersectionRef = ref1[0],
-          isVisible = ref1[1];
+          isVisible = ref1[1],
+          resetVisible = ref1[2];
         var setRef = _react.default.useCallback(
           function(el) {
+            // Before the link getting observed, check if visible state need to be reset
+            if (previousAs.current !== as || previousHref.current !== href) {
+              resetVisible();
+              previousAs.current = as;
+              previousHref.current = href;
+            }
             setIntersectionRef(el);
             if (childRef) {
               if (typeof childRef === "function") childRef(el);
@@ -235,7 +239,7 @@
               }
             }
           },
-          [childRef, setIntersectionRef]
+          [as, childRef, href, resetVisible, setIntersectionRef]
         );
         _react.default.useEffect(
           function() {
@@ -317,16 +321,19 @@
         return /*#__PURE__*/ _react.default.cloneElement(child, childProps);
       }
       var _default = Link;
-      exports["default"] = _default; //# sourceMappingURL=link.js.map
+      exports["default"] = _default;
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
+      } //# sourceMappingURL=link.js.map
 
       /***/
     },
 
-    /***/ 9246: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 9246: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       function _arrayLikeToArray(arr, len) {
@@ -434,6 +441,9 @@
           },
           [isDisabled, root, rootMargin, visible]
         );
+        var resetVisible = (0, _react).useCallback(function() {
+          setVisible(false);
+        }, []);
         (0, _react).useEffect(
           function() {
             if (!hasIntersectionObserver) {
@@ -458,7 +468,7 @@
           },
           [rootRef]
         );
-        return [setRef, visible];
+        return [setRef, visible, resetVisible];
       }
       function observe(element, callback, options) {
         var ref = createObserver(options),
@@ -522,6 +532,13 @@
           })
         );
         return instance;
+      }
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
       } //# sourceMappingURL=use-intersection.js.map
 
       /***/
@@ -546,6 +563,9 @@
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         1664
       );
+      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_link__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       function aLink(props) {
         return /*#__PURE__*/ (0,
@@ -557,7 +577,7 @@
             }),
             /*#__PURE__*/ (0,
             react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-              next_link__WEBPACK_IMPORTED_MODULE_1__["default"],
+              next_link__WEBPACK_IMPORTED_MODULE_1___default(),
               {
                 href: "/",
                 children: "Go to /"

Diff for routerDirect-HASH.js

@@ -37,6 +37,9 @@
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         1163
       );
+      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_router__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       /* eslint-disable-next-line */

Diff for script-HASH.js

@@ -37,6 +37,9 @@
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         4298
       );
+      /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_script__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       var Page = function() {
         return /*#__PURE__*/ (0,
@@ -50,7 +53,7 @@
               }),
               /*#__PURE__*/ (0,
               react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-                next_script__WEBPACK_IMPORTED_MODULE_1__["default"],
+                next_script__WEBPACK_IMPORTED_MODULE_1___default(),
                 {
                   dangerouslySetInnerHTML: {
                     __html: 'console.log("hello")'

Diff for withRouter-HASH.js

@@ -37,6 +37,9 @@
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         1163
       );
+      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_router__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       function useWithRouter(props) {
         return /*#__PURE__*/ (0,

Diff for main-HASH.js

Diff too large to display

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-444bd3ddf1f35edc.js"
+      src="/_next/static/chunks/main-acfe5e811e5c7d10.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-444bd3ddf1f35edc.js"
+      src="/_next/static/chunks/main-acfe5e811e5c7d10.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-a96e4060bca1ccfe.js"
+      src="/_next/static/chunks/pages/link-c605640c895e01ab.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-444bd3ddf1f35edc.js"
+      src="/_next/static/chunks/main-acfe5e811e5c7d10.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-1285f0be62775073.js"
+      src="/_next/static/chunks/pages/withRouter-ee616b01250df021.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
buildDuration	12.1s	12s	-51ms
buildDurationCached	6.2s	6.4s	⚠️ +164ms
nodeModulesSize	86.6 MB	86.7 MB	⚠️ +60.7 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.148	3.22	⚠️ +0.07
/ avg req/sec	794.09	776.46	⚠️ -17.63
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.364	1.357	-0.01
/error-in-render avg req/sec	1832.56	1842.45	+9.89

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.8 kB	28.7 kB	-126 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.8 kB	72.6 kB	-126 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	325 B	325 B	✓
dynamic-HASH.js gzip	3.03 kB	3.03 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.59 kB	5.77 kB	⚠️ +180 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.33 kB	2.44 kB	⚠️ +106 B
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	388 B	393 B	⚠️ +5 B
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.8 kB	16.1 kB	⚠️ +291 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
_buildManifest.js gzip	459 B	458 B	-1 B
Overall change	459 B	458 B	-1 B

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary v12.1.4	vercel/next.js refs/heads/canary	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	547 B	⚠️ +1 B
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.61 kB	⚠️ +1 B

Diffs

Diff for _buildManifest.js

@@ -12,14 +12,14 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-fceff8aa5864bcb2.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-a96e4060bca1ccfe.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-5597cb692d5dcc6b.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-c605640c895e01ab.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-cb15c8ac2322bf32.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-98eb70bf22fb21da.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-8706ec6f36f636f6.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-1d699e963b4c9346.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-1285f0be62775073.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-ee616b01250df021.js"
   ],
   sortedPages: [
     "\u002F",

Diff for image-HASH.js

@@ -18,13 +18,8 @@
       /***/
     },
 
-    /***/ 9749: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 9749: /***/ function(module, exports, __webpack_require__) {
       "use strict";
-      var __webpack_unused_export__;
 
       function _arrayLikeToArray(arr, len) {
         if (len == null || len > arr.length) len = arr.length;
@@ -123,9 +118,9 @@
         )
           return _arrayLikeToArray(o, minLen);
       }
-      __webpack_unused_export__ = {
+      Object.defineProperty(exports, "__esModule", {
         value: true
-      };
+      });
       exports["default"] = Image;
       var _react = _interopRequireWildcard(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(3121));
@@ -154,8 +149,7 @@
           objectFit = _param.objectFit,
           objectPosition = _param.objectPosition,
           onLoadingComplete = _param.onLoadingComplete,
-          _loader = _param.loader,
-          loader = _loader === void 0 ? defaultImageLoader : _loader,
+          onError = _param.onError,
           _placeholder = _param.placeholder,
           placeholder = _placeholder === void 0 ? "empty" : _placeholder,
           blurDataURL = _param.blurDataURL,
@@ -175,7 +169,7 @@
             "objectFit",
             "objectPosition",
             "onLoadingComplete",
-            "loader",
+            "onError",
             "placeholder",
             "blurDataURL"
           ]);
@@ -206,8 +200,26 @@
         if ("layout" in rest) {
           // Override default layout if the user specified one:
           if (rest.layout) layout = rest.layout;
-          // Remove property so it's not spread into image:
-          delete rest["layout"];
+          // Remove property so it's not spread on <img>:
+          delete rest.layout;
+        }
+        var loader = defaultImageLoader;
+        if ("loader" in rest) {
+          if (rest.loader) {
+            var customImageLoader = rest.loader;
+            var _tmp;
+            (_tmp = function(obj) {
+              var _ = obj.config,
+                opts = _objectWithoutProperties(obj, ["config"]);
+              // The config object is internal only so we must
+              // not pass it to the user-defined loader()
+              return customImageLoader(opts);
+            }),
+              (loader = _tmp),
+              _tmp;
+          }
+          // Remove property so it's not spread on <img>
+          delete rest.loader;
         }
         var staticSrc = "";
         if (isStaticImport(src)) {
@@ -247,16 +259,20 @@
         if (true && loadedImageURLs.has(src)) {
           isLazy = false;
         }
+        var ref2 = _slicedToArray((0, _react).useState(false), 2),
+          blurComplete = ref2[0],
+          setBlurComplete = ref2[1];
         var ref1 = _slicedToArray(
             (0, _useIntersection).useIntersection({
               rootRef: lazyRoot,
               rootMargin: lazyBoundary,
               disabled: !isLazy
             }),
-            2
+            3
           ),
           setIntersection = ref1[0],
-          isIntersected = ref1[1];
+          isIntersected = ref1[1],
+          resetIntersected = ref1[2];
         var isVisible = !isLazy || isIntersected;
         var wrapperStyle = {
           boxSizing: "border-box",
@@ -318,7 +334,7 @@
             : layoutStyle
         );
         var blurStyle =
-          placeholder === "blur"
+          placeholder === "blur" && !blurComplete
             ? {
                 filter: "blur(20px)",
                 backgroundSize: objectFit || "cover",
@@ -404,7 +420,7 @@
           _obj);
         var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
         var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
-        var imgRef = (0, _react).useRef(null);
+        var previousImageSrc = (0, _react).useRef(src);
         (0, _react).useEffect(
           function() {
             onLoadingCompleteRef.current = onLoadingComplete;
@@ -413,21 +429,12 @@
         );
         useLayoutEffect(
           function() {
-            setIntersection(imgRef.current);
-          },
-          [setIntersection]
-        );
-        (0, _react).useEffect(
-          function() {
-            handleLoading(
-              imgRef,
-              srcString,
-              layout,
-              placeholder,
-              onLoadingCompleteRef
-            );
+            if (previousImageSrc.current !== src) {
+              resetIntersected();
+              previousImageSrc.current = src;
+            }
           },
-          [srcString, layout, placeholder, isVisible]
+          [resetIntersected, src]
         );
         var imgElementArgs = _objectSpread(
           {
@@ -440,13 +447,16 @@
             className: className,
             imgStyle: imgStyle,
             blurStyle: blurStyle,
-            imgRef: imgRef,
             loading: loading,
             config: config,
             unoptimized: unoptimized,
             placeholder: placeholder,
             loader: loader,
-            srcString: srcString
+            srcString: srcString,
+            onLoadingCompleteRef: onLoadingCompleteRef,
+            setBlurComplete: setBlurComplete,
+            setIntersection: setIntersection,
+            isVisible: isVisible
           },
           rest
         );
@@ -752,9 +762,9 @@
             sizes: undefined
           };
         }
-        var ref2 = getWidths(config, width, layout, sizes),
-          widths = ref2.widths,
-          kind = ref2.kind;
+        var ref3 = getWidths(config, width, layout, sizes),
+          widths = ref3.widths,
+          kind = ref3.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -816,56 +826,53 @@
       // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
       // handler instead of the img's onLoad attribute.
       function handleLoading(
-        imgRef,
+        img,
         src,
         layout,
         placeholder,
-        onLoadingCompleteRef
+        onLoadingCompleteRef,
+        setBlurComplete
       ) {
-        var handleLoad = function() {
-          var img = imgRef.current;
-          if (!img) {
+        if (
+          !img ||
+          img.src === emptyDataURL ||
+          img["data-loaded-src"] === src
+        ) {
+          return;
+        }
+        img["data-loaded-src"] = src;
+        var p = "decode" in img ? img.decode() : Promise.resolve();
+        p.catch(function() {}).then(function() {
+          if (!img.parentNode) {
+            // Exit early in case of race condition:
+            // - onload() is called
+            // - decode() is called but incomplete
+            // - unmount is called
+            // - decode() completes
             return;
           }
-          if (img.src !== emptyDataURL) {
-            var p = "decode" in img ? img.decode() : Promise.resolve();
-            p.catch(function() {}).then(function() {
-              if (!imgRef.current) {
-                return;
-              }
-              loadedImageURLs.add(src);
-              if (placeholder === "blur") {
-                img.style.filter = "";
-                img.style.backgroundSize = "";
-                img.style.backgroundImage = "";
-                img.style.backgroundPosition = "";
-              }
-              if (onLoadingCompleteRef.current) {
-                var naturalWidth = img.naturalWidth,
-                  naturalHeight = img.naturalHeight;
-                // Pass back read-only primitive values but not the
-                // underlying DOM element because it could be misused.
-                onLoadingCompleteRef.current({
-                  naturalWidth: naturalWidth,
-                  naturalHeight: naturalHeight
-                });
-              }
-              if (false) {
-                var parent, ref3;
-              }
+          loadedImageURLs.add(src);
+          if (placeholder === "blur") {
+            setBlurComplete(true);
+          }
+          if (
+            onLoadingCompleteRef === null || onLoadingCompleteRef === void 0
+              ? void 0
+              : onLoadingCompleteRef.current
+          ) {
+            var naturalWidth = img.naturalWidth,
+              naturalHeight = img.naturalHeight;
+            // Pass back read-only primitive values but not the
+            // underlying DOM element because it could be misused.
+            onLoadingCompleteRef.current({
+              naturalWidth: naturalWidth,
+              naturalHeight: naturalHeight
             });
           }
-        };
-        if (imgRef.current) {
-          if (imgRef.current.complete) {
-            // If the real image fails to load, this will still remove the placeholder.
-            // This is the desired behavior for now, and will be revisited when error
-            // handling is worked on for the image component itself.
-            handleLoad();
-          } else {
-            imgRef.current.onload = handleLoad;
+          if (false) {
+            var parent, ref3;
           }
-        }
+        });
       }
       var ImageElement = function(_param) {
         var imgAttributes = _param.imgAttributes,
@@ -877,14 +884,17 @@
           imgStyle = _param.imgStyle,
           blurStyle = _param.blurStyle,
           isLazy = _param.isLazy,
-          imgRef = _param.imgRef,
           placeholder = _param.placeholder,
           loading = _param.loading,
-          sizes = _param.sizes,
           srcString = _param.srcString,
           config = _param.config,
           unoptimized = _param.unoptimized,
           loader = _param.loader,
+          onLoadingCompleteRef = _param.onLoadingCompleteRef,
+          setBlurComplete = _param.setBlurComplete,
+          setIntersection = _param.setIntersection,
+          onError = _param.onError,
+          isVisible = _param.isVisible,
           rest = _objectWithoutProperties(_param, [
             "imgAttributes",
             "heightInt",
@@ -895,14 +905,17 @@
             "imgStyle",
             "blurStyle",
             "isLazy",
-            "imgRef",
             "placeholder",
             "loading",
-            "sizes",
             "srcString",
             "config",
             "unoptimized",
-            "loader"
+            "loader",
+            "onLoadingCompleteRef",
+            "setBlurComplete",
+            "setIntersection",
+            "onError",
+            "isVisible"
           ]);
         return /*#__PURE__*/ _react.default.createElement(
           _react.default.Fragment,
@@ -913,7 +926,7 @@
               {},
               rest,
               imgAttributes,
-              layout === "raw" && !sizes
+              layout === "raw" && !imgAttributes.sizes
                 ? {
                     height: heightInt,
                     width: widthInt
@@ -923,8 +936,52 @@
                 decoding: "async",
                 "data-nimg": layout,
                 className: className,
-                ref: imgRef,
-                style: _objectSpread({}, imgStyle, blurStyle)
+                style: _objectSpread({}, imgStyle, blurStyle),
+                ref: (0, _react).useCallback(
+                  function(img) {
+                    setIntersection(img);
+                    if (
+                      img === null || img === void 0 ? void 0 : img.complete
+                    ) {
+                      handleLoading(
+                        img,
+                        srcString,
+                        layout,
+                        placeholder,
+                        onLoadingCompleteRef,
+                        setBlurComplete
+                      );
+                    }
+                  },
+                  [
+                    setIntersection,
+                    srcString,
+                    layout,
+                    placeholder,
+                    onLoadingCompleteRef,
+                    setBlurComplete
+                  ]
+                ),
+                onLoad: function(event) {
+                  var img = event.currentTarget;
+                  handleLoading(
+                    img,
+                    srcString,
+                    layout,
+                    placeholder,
+                    onLoadingCompleteRef,
+                    setBlurComplete
+                  );
+                },
+                onError: function(event) {
+                  if (placeholder === "blur") {
+                    // If the real image fails to load, this will still remove the placeholder.
+                    setBlurComplete(true);
+                  }
+                  if (onError) {
+                    onError(event);
+                  }
+                }
               }
             )
           ),
@@ -944,10 +1001,10 @@
                     layout: layout,
                     width: widthInt,
                     quality: qualityInt,
-                    sizes: sizes,
+                    sizes: imgAttributes.sizes,
                     loader: loader
                   }),
-                  layout === "raw" && !sizes
+                  layout === "raw" && !imgAttributes.sizes
                     ? {
                         height: heightInt,
                         width: widthInt
@@ -1042,16 +1099,19 @@
           .concat(encodeURIComponent(src), "&w=")
           .concat(width, "&q=")
           .concat(quality || 75);
+      }
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
       } //# sourceMappingURL=image.js.map
 
       /***/
     },
 
-    /***/ 9246: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 9246: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       function _arrayLikeToArray(arr, len) {
@@ -1159,6 +1219,9 @@
           },
           [isDisabled, root, rootMargin, visible]
         );
+        var resetVisible = (0, _react).useCallback(function() {
+          setVisible(false);
+        }, []);
         (0, _react).useEffect(
           function() {
             if (!hasIntersectionObserver) {
@@ -1183,7 +1246,7 @@
           },
           [rootRef]
         );
-        return [setRef, visible];
+        return [setRef, visible, resetVisible];
       }
       function observe(element, callback, options) {
         var ref = createObserver(options),
@@ -1247,6 +1310,13 @@
           })
         );
         return instance;
+      }
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
       } //# sourceMappingURL=use-intersection.js.map
 
       /***/
@@ -1274,7 +1344,8 @@
       // EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5893);
       // EXTERNAL MODULE: ./node_modules/next/image.js
-      var next_image = __webpack_require__(5675); // CONCATENATED MODULE: ./pages/nextjs.png
+      var next_image = __webpack_require__(5675);
+      var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
         height: 1347,
@@ -1288,7 +1359,7 @@
             /*#__PURE__*/ (0, jsx_runtime.jsx)("h1", {
               children: "next/image example"
             }),
-            /*#__PURE__*/ (0, jsx_runtime.jsx)(next_image["default"], {
+            /*#__PURE__*/ (0, jsx_runtime.jsx)(image_default(), {
               src: nextjs,
               placeholder: "blur"
             })

Diff for link-HASH.js

@@ -18,13 +18,8 @@
       /***/
     },
 
-    /***/ 1551: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 1551: /***/ function(module, exports, __webpack_require__) {
       "use strict";
-      var __webpack_unused_export__;
 
       function _arrayLikeToArray(arr, len) {
         if (len == null || len > arr.length) len = arr.length;
@@ -95,9 +90,9 @@
         )
           return _arrayLikeToArray(o, minLen);
       }
-      __webpack_unused_export__ = {
+      Object.defineProperty(exports, "__esModule", {
         value: true
-      };
+      });
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
       var _router = __webpack_require__(1003);
@@ -198,6 +193,8 @@
           ),
           href = ref2.href,
           as = ref2.as;
+        var previousHref = _react.default.useRef(href);
+        var previousAs = _react.default.useRef(as);
         var children = props.children,
           replace = props.replace,
           shallow = props.shallow,
@@ -221,12 +218,19 @@
             (0, _useIntersection).useIntersection({
               rootMargin: "200px"
             }),
-            2
+            3
           ),
           setIntersectionRef = ref1[0],
-          isVisible = ref1[1];
+          isVisible = ref1[1],
+          resetVisible = ref1[2];
         var setRef = _react.default.useCallback(
           function(el) {
+            // Before the link getting observed, check if visible state need to be reset
+            if (previousAs.current !== as || previousHref.current !== href) {
+              resetVisible();
+              previousAs.current = as;
+              previousHref.current = href;
+            }
             setIntersectionRef(el);
             if (childRef) {
               if (typeof childRef === "function") childRef(el);
@@ -235,7 +239,7 @@
               }
             }
           },
-          [childRef, setIntersectionRef]
+          [as, childRef, href, resetVisible, setIntersectionRef]
         );
         _react.default.useEffect(
           function() {
@@ -317,16 +321,19 @@
         return /*#__PURE__*/ _react.default.cloneElement(child, childProps);
       }
       var _default = Link;
-      exports["default"] = _default; //# sourceMappingURL=link.js.map
+      exports["default"] = _default;
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
+      } //# sourceMappingURL=link.js.map
 
       /***/
     },
 
-    /***/ 9246: /***/ function(
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) {
+    /***/ 9246: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       function _arrayLikeToArray(arr, len) {
@@ -434,6 +441,9 @@
           },
           [isDisabled, root, rootMargin, visible]
         );
+        var resetVisible = (0, _react).useCallback(function() {
+          setVisible(false);
+        }, []);
         (0, _react).useEffect(
           function() {
             if (!hasIntersectionObserver) {
@@ -458,7 +468,7 @@
           },
           [rootRef]
         );
-        return [setRef, visible];
+        return [setRef, visible, resetVisible];
       }
       function observe(element, callback, options) {
         var ref = createObserver(options),
@@ -522,6 +532,13 @@
           })
         );
         return instance;
+      }
+      if (
+        typeof exports.default === "function" ||
+        (typeof exports.default === "object" && exports.default !== null)
+      ) {
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
       } //# sourceMappingURL=use-intersection.js.map
 
       /***/
@@ -546,6 +563,9 @@
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         1664
       );
+      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_link__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       function aLink(props) {
         return /*#__PURE__*/ (0,
@@ -557,7 +577,7 @@
             }),
             /*#__PURE__*/ (0,
             react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-              next_link__WEBPACK_IMPORTED_MODULE_1__["default"],
+              next_link__WEBPACK_IMPORTED_MODULE_1___default(),
               {
                 href: "/",
                 children: "Go to /"

Diff for routerDirect-HASH.js

@@ -37,6 +37,9 @@
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         1163
       );
+      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_router__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       /* eslint-disable-next-line */

Diff for script-HASH.js

@@ -37,6 +37,9 @@
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         4298
       );
+      /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_script__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       var Page = function() {
         return /*#__PURE__*/ (0,
@@ -50,7 +53,7 @@
               }),
               /*#__PURE__*/ (0,
               react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-                next_script__WEBPACK_IMPORTED_MODULE_1__["default"],
+                next_script__WEBPACK_IMPORTED_MODULE_1___default(),
                 {
                   dangerouslySetInnerHTML: {
                     __html: 'console.log("hello")'

Diff for withRouter-HASH.js

@@ -37,6 +37,9 @@
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
         1163
       );
+      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
+        next_router__WEBPACK_IMPORTED_MODULE_1__
+      );
 
       function useWithRouter(props) {
         return /*#__PURE__*/ (0,

Diff for main-HASH.js

Diff too large to display

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-444bd3ddf1f35edc.js"
+      src="/_next/static/chunks/main-acfe5e811e5c7d10.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-444bd3ddf1f35edc.js"
+      src="/_next/static/chunks/main-acfe5e811e5c7d10.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-a96e4060bca1ccfe.js"
+      src="/_next/static/chunks/pages/link-c605640c895e01ab.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-444bd3ddf1f35edc.js"
+      src="/_next/static/chunks/main-acfe5e811e5c7d10.js"
       defer=""
     ></script>
     <script
@@ -27,7 +27,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-1285f0be62775073.js"
+      src="/_next/static/chunks/pages/withRouter-ee616b01250df021.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

-Original file line number
+Diff line change
@@ Expand Up / @@ -16,5 +16,5 @@ @@
           "registry": "https://registry.npmjs.org/"
         }
       },
-      "version": "12.1.5-canary.6"
+      "version": "12.1.5-canary.7"
     }

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "create-next-app",
-      "version": "12.1.5-canary.6",
+      "version": "12.1.5-canary.7",
       "keywords": [
         "react",
         "next",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "eslint-config-next",
-      "version": "12.1.5-canary.6",
+      "version": "12.1.5-canary.7",
       "description": "ESLint configuration used by NextJS.",
       "main": "index.js",
       "license": "MIT",
@@ Expand All / @@ -9,7 +9,7 @@ @@
         "directory": "packages/eslint-config-next"
       },
       "dependencies": {
-        "@next/eslint-plugin-next": "12.1.5-canary.6",
+        "@next/eslint-plugin-next": "12.1.5-canary.7",
         "@rushstack/eslint-patch": "1.0.8",
         "@typescript-eslint/parser": "5.10.1",
         "eslint-import-resolver-node": "0.3.4",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "@next/eslint-plugin-next",
-      "version": "12.1.5-canary.6",
+      "version": "12.1.5-canary.7",
       "description": "ESLint plugin for NextJS.",
       "main": "lib/index.js",
       "license": "MIT",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "@next/bundle-analyzer",
-      "version": "12.1.5-canary.6",
+      "version": "12.1.5-canary.7",
       "main": "index.js",
       "license": "MIT",
       "repository": {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Commit

There are no files selected for viewing

1 comment on commit `9c613aa`

ijjk commented on `9c613aa` Apr 12, 2022

Commit

There are no files selected for viewing

1 comment on commit 9c613aa

ijjk commented on 9c613aa Apr 12, 2022

Choose a reason for hiding this comment

Stats from current release

Diffs

Diffs

1 comment on commit `9c613aa`

ijjk commented on `9c613aa` Apr 12, 2022