Stats from current release

ijjk · 2022-03-17T00:59:16Z

Stats from current release

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary v12.1.0	vercel/next.js refs/heads/canary	Change
buildDuration	18.9s	18.7s	-245ms
buildDurationCached	7.2s	7.4s	⚠️ +132ms
nodeModulesSize	456 MB	456 MB	-47.8 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary v12.1.0	vercel/next.js refs/heads/canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.762	3.851	⚠️ +0.09
/ avg req/sec	664.54	649.15	⚠️ -15.39
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.646	1.679	⚠️ +0.03
/error-in-render avg req/sec	1518.96	1488.77	⚠️ -30.19

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary v12.1.0	vercel/next.js refs/heads/canary	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	28 kB	⚠️ +38 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.6 kB	⚠️ +38 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary v12.1.0	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.0	vercel/next.js refs/heads/canary	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	-2 B
_error-HASH.js gzip	194 B	192 B	-2 B
amp-HASH.js gzip	312 B	309 B	-3 B
css-HASH.js gzip	326 B	327 B	⚠️ +1 B
dynamic-HASH.js gzip	2.57 kB	2.57 kB	⚠️ +6 B
head-HASH.js gzip	350 B	351 B	⚠️ +1 B
hooks-HASH.js gzip	919 B	920 B	⚠️ +1 B
image-HASH.js gzip	5.05 kB	5.48 kB	⚠️ +435 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	⚠️ +3 B
routerDirect..HASH.js gzip	321 B	320 B	-1 B
script-HASH.js gzip	383 B	387 B	⚠️ +4 B
withRouter-HASH.js gzip	318 B	319 B	⚠️ +1 B
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	15.2 kB	⚠️ +444 B

Client Build Manifests

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

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary v12.1.0	vercel/next.js refs/heads/canary	Change
index.html gzip	533 B	532 B	-1 B
link.html gzip	546 B	545 B	-1 B
withRouter.html gzip	527 B	526 B	-1 B
Overall change	1.61 kB	1.6 kB	-3 B

Diffs

Diff for _buildManifest.js

@@ -1,25 +1,25 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-22405fb865808942.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-97db2c91e74bb63f.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-7dee323746710646.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-5d03de5a43fe90da.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-ee9dddb806ed55d7.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-48a1ac120ac76d0e.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-16a755ee71604f2b.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-9422646fa93fdf00.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-a917cf735c6c2990.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-d1a5ae55e4ce4968.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-6424115731d38b02.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b77f1645174768a7.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-e104229636aa11ef.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-de2021fe6ae04318.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-817796f8884509a8.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-dee9d46db53befcd.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-cb15c8ac2322bf32.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-70c0d6f4c29e2f00.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-4a8bbe65f50a22a0.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-d7559b7591922e47.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-1285f0be62775073.js"
   ],
   sortedPages: [
     "\u002F",

Diff for _app-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(6029);
+          return __webpack_require__(4297);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6029: /***/ function(
+    /***/ 4297: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -153,7 +153,7 @@
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault1(__webpack_require__(7294));
-      var _utils = __webpack_require__(3794);
+      var _utils = __webpack_require__(670);
       function asyncGeneratorStep(
         gen,
         resolve,
@@ -215,6 +215,9 @@
               default: obj
             };
       }
+      function appGetInitialProps(_) {
+        return _appGetInitialProps.apply(this, arguments);
+      }
       function _appGetInitialProps() {
         _appGetInitialProps = /**
          * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
@@ -243,9 +246,6 @@
         );
         return _appGetInitialProps.apply(this, arguments);
       }
-      function appGetInitialProps(_) {
-        return _appGetInitialProps.apply(this, arguments);
-      }
       var App = /*#__PURE__*/ (function(_Component) {
         _inherits(App, _Component);
         var _super = _createSuper(App);
@@ -269,9 +269,9 @@
         ]);
         return App;
       })(_react.default.Component);
+      exports["default"] = App;
       App.origGetInitialProps = appGetInitialProps;
-      App.getInitialProps = appGetInitialProps;
-      exports["default"] = App; //# sourceMappingURL=_app.js.map
+      App.getInitialProps = appGetInitialProps; //# sourceMappingURL=_app.js.map
 
       /***/
     }
@@ -282,7 +282,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(915), __webpack_exec__(387);
+      return __webpack_exec__(915), __webpack_exec__(880);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for _error-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(9185);
+          return __webpack_require__(67);
         }
       ]);
       if (false) {

Diff for amp-HASH.js

@@ -6,7 +6,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3240);
+      module.exports = __webpack_require__(1686);
 
       /***/
     },
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(1910);
+          return __webpack_require__(8774);
         }
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 1910: /***/ function(
+    /***/ 8774: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for css-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(5089);
+          return __webpack_require__(767);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5089: /***/ function(
+    /***/ 767: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -29,7 +29,7 @@
         5893
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        1785
+        692
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 1785: /***/ function(module) {
+    /***/ 692: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };

Diff for dynamic-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(3286);
+          return __webpack_require__(3370);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 638: /***/ function(
+    /***/ 7645: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -70,37 +70,10 @@
       __webpack_unused_export__ = {
         value: true
       };
-      __webpack_unused_export__ = noSSR;
       exports["default"] = dynamic;
+      __webpack_unused_export__ = noSSR;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _loadable = _interopRequireDefault(__webpack_require__(4302));
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
-      var isServerSide = "object" === "undefined";
-      function noSSR(LoadableInitializer, loadableOptions) {
-        // Removing webpack and modules means react-loadable won't try preloading
-        delete loadableOptions.webpack;
-        delete loadableOptions.modules;
-        // This check is necessary to prevent react-loadable from initializing on the server
-        if (!isServerSide) {
-          return LoadableInitializer(loadableOptions);
-        }
-        var Loading = loadableOptions.loading;
-        // This will only be rendered on the server side
-        return function() {
-          return /*#__PURE__*/ _react.default.createElement(Loading, {
-            error: null,
-            isLoading: true,
-            pastDelay: false,
-            timedOut: false
-          });
-        };
-      }
+      var _loadable = _interopRequireDefault(__webpack_require__(4588));
       function dynamic(dynamicOptions, options) {
         var loadableFn = _loadable.default;
         var loadableOptions = {
@@ -163,12 +136,39 @@
           delete loadableOptions.ssr;
         }
         return loadableFn(loadableOptions);
+      }
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+      var isServerSide = "object" === "undefined";
+      function noSSR(LoadableInitializer, loadableOptions) {
+        // Removing webpack and modules means react-loadable won't try preloading
+        delete loadableOptions.webpack;
+        delete loadableOptions.modules;
+        // This check is necessary to prevent react-loadable from initializing on the server
+        if (!isServerSide) {
+          return LoadableInitializer(loadableOptions);
+        }
+        var Loading = loadableOptions.loading;
+        // This will only be rendered on the server side
+        return function() {
+          return /*#__PURE__*/ _react.default.createElement(Loading, {
+            error: null,
+            isLoading: true,
+            pastDelay: false,
+            timedOut: false
+          });
+        };
       } //# sourceMappingURL=dynamic.js.map
 
       /***/
     },
 
-    /***/ 6319: /***/ function(
+    /***/ 3644: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -195,7 +195,7 @@
       /***/
     },
 
-    /***/ 4302: /***/ function(
+    /***/ 4588: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -257,7 +257,7 @@
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
       var _useSubscription = __webpack_require__(7161);
-      var _loadableContext = __webpack_require__(6319);
+      var _loadableContext = __webpack_require__(3644);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -570,7 +570,7 @@
       /***/
     },
 
-    /***/ 3286: /***/ function(
+    /***/ 3370: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -594,13 +594,13 @@
       next_dynamic__WEBPACK_IMPORTED_MODULE_1__["default"])(
         function() {
           return __webpack_require__
-            .e(/* import() */ 450)
-            .then(__webpack_require__.bind(__webpack_require__, 6450));
+            .e(/* import() */ 925)
+            .then(__webpack_require__.bind(__webpack_require__, 3925));
         },
         {
           loadableGenerated: {
             webpack: function() {
-              return [/*require.resolve*/ 6450];
+              return [/*require.resolve*/ 3925];
             }
           }
         }
@@ -635,7 +635,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(638);
+      module.exports = __webpack_require__(7645);
 
       /***/
     },

Diff for head-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function() {
-          return __webpack_require__(5423);
+          return __webpack_require__(6646);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5423: /***/ function(
+    /***/ 6646: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -73,7 +73,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(5443);
+      module.exports = __webpack_require__(3121);
 
       /***/
     }

Diff for hooks-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function() {
-          return __webpack_require__(5017);
+          return __webpack_require__(2297);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5017: /***/ function(
+    /***/ 2297: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for image-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3155);
+          return __webpack_require__(3143);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8045: /***/ function(
+    /***/ 9749: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -128,10 +128,399 @@
       };
       exports["default"] = Image;
       var _react = _interopRequireWildcard(__webpack_require__(7294));
-      var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _imageConfig = __webpack_require__(5809);
-      var _useIntersection = __webpack_require__(7190);
-      var _imageConfigContext = __webpack_require__(9977);
+      var _head = _interopRequireDefault(__webpack_require__(3121));
+      var _imageConfig = __webpack_require__(139);
+      var _useIntersection = __webpack_require__(9246);
+      var _imageConfigContext = __webpack_require__(8730);
+      var _utils = __webpack_require__(670);
+      var _normalizeTrailingSlash = __webpack_require__(2700);
+      function Image(_param) {
+        var src = _param.src,
+          sizes = _param.sizes,
+          _unoptimized = _param.unoptimized,
+          unoptimized = _unoptimized === void 0 ? false : _unoptimized,
+          _priority = _param.priority,
+          priority = _priority === void 0 ? false : _priority,
+          loading = _param.loading,
+          _lazyRoot = _param.lazyRoot,
+          lazyRoot = _lazyRoot === void 0 ? null : _lazyRoot,
+          _lazyBoundary = _param.lazyBoundary,
+          lazyBoundary = _lazyBoundary === void 0 ? "200px" : _lazyBoundary,
+          className = _param.className,
+          quality = _param.quality,
+          width = _param.width,
+          height = _param.height,
+          style = _param.style,
+          objectFit = _param.objectFit,
+          objectPosition = _param.objectPosition,
+          onLoadingComplete = _param.onLoadingComplete,
+          _loader = _param.loader,
+          loader = _loader === void 0 ? defaultImageLoader : _loader,
+          _placeholder = _param.placeholder,
+          placeholder = _placeholder === void 0 ? "empty" : _placeholder,
+          blurDataURL = _param.blurDataURL,
+          all = _objectWithoutProperties(_param, [
+            "src",
+            "sizes",
+            "unoptimized",
+            "priority",
+            "loading",
+            "lazyRoot",
+            "lazyBoundary",
+            "className",
+            "quality",
+            "width",
+            "height",
+            "style",
+            "objectFit",
+            "objectPosition",
+            "onLoadingComplete",
+            "loader",
+            "placeholder",
+            "blurDataURL"
+          ]);
+        var configContext = (0, _react).useContext(
+          _imageConfigContext.ImageConfigContext
+        );
+        var config = (0, _react).useMemo(
+          function() {
+            var c =
+              configEnv || configContext || _imageConfig.imageConfigDefault;
+            var allSizes = _toConsumableArray(c.deviceSizes)
+              .concat(_toConsumableArray(c.imageSizes))
+              .sort(function(a, b) {
+                return a - b;
+              });
+            var deviceSizes = c.deviceSizes.sort(function(a, b) {
+              return a - b;
+            });
+            return _objectSpread({}, c, {
+              allSizes: allSizes,
+              deviceSizes: deviceSizes
+            });
+          },
+          [configContext]
+        );
+        var rest = all;
+        var layout = sizes ? "responsive" : "intrinsic";
+        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"];
+        }
+        var staticSrc = "";
+        if (isStaticImport(src)) {
+          var staticImageData = isStaticRequire(src) ? src.default : src;
+          if (!staticImageData.src) {
+            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 ".concat(
+                JSON.stringify(staticImageData)
+              )
+            );
+          }
+          blurDataURL = blurDataURL || staticImageData.blurDataURL;
+          staticSrc = staticImageData.src;
+          if (!layout || layout !== "fill") {
+            height = height || staticImageData.height;
+            width = width || staticImageData.width;
+            if (!staticImageData.height || !staticImageData.width) {
+              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 ".concat(
+                  JSON.stringify(staticImageData)
+                )
+              );
+            }
+          }
+        }
+        src = typeof src === "string" ? src : staticSrc;
+        var widthInt = getInt(width);
+        var heightInt = getInt(height);
+        var qualityInt = getInt(quality);
+        var isLazy =
+          !priority && (loading === "lazy" || typeof loading === "undefined");
+        if (src.startsWith("data:") || src.startsWith("blob:")) {
+          // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+          unoptimized = true;
+          isLazy = false;
+        }
+        if (true && loadedImageURLs.has(src)) {
+          isLazy = false;
+        }
+        var ref1 = _slicedToArray(
+            (0, _useIntersection).useIntersection({
+              rootRef: lazyRoot,
+              rootMargin: lazyBoundary,
+              disabled: !isLazy
+            }),
+            2
+          ),
+          setIntersection = ref1[0],
+          isIntersected = ref1[1];
+        var isVisible = !isLazy || isIntersected;
+        var wrapperStyle = {
+          boxSizing: "border-box",
+          display: "block",
+          overflow: "hidden",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
+        };
+        var sizerStyle = {
+          boxSizing: "border-box",
+          display: "block",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
+        };
+        var hasSizer = false;
+        var sizerSvgUrl;
+        var layoutStyle = {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          boxSizing: "border-box",
+          padding: 0,
+          border: "none",
+          margin: "auto",
+          display: "block",
+          width: 0,
+          height: 0,
+          minWidth: "100%",
+          maxWidth: "100%",
+          minHeight: "100%",
+          maxHeight: "100%",
+          objectFit: objectFit,
+          objectPosition: objectPosition
+        };
+        if (false) {
+        }
+        if (false) {
+          var overwrittenStyles, url, urlStr, VALID_BLUR_EXT;
+        }
+        var imgStyle = Object.assign(
+          {},
+          style,
+          layout === "raw"
+            ? {
+                aspectRatio: "".concat(widthInt, " / ").concat(heightInt)
+              }
+            : layoutStyle
+        );
+        var blurStyle =
+          placeholder === "blur"
+            ? {
+                filter: "blur(20px)",
+                backgroundSize: objectFit || "cover",
+                backgroundImage: 'url("'.concat(blurDataURL, '")'),
+                backgroundPosition: objectPosition || "0% 0%"
+              }
+            : {};
+        if (layout === "fill") {
+          // <Image src="i.png" layout="fill" />
+          wrapperStyle.display = "block";
+          wrapperStyle.position = "absolute";
+          wrapperStyle.top = 0;
+          wrapperStyle.left = 0;
+          wrapperStyle.bottom = 0;
+          wrapperStyle.right = 0;
+        } else if (
+          typeof widthInt !== "undefined" &&
+          typeof heightInt !== "undefined"
+        ) {
+          // <Image src="i.png" width="100" height="100" />
+          var quotient = heightInt / widthInt;
+          var paddingTop = isNaN(quotient)
+            ? "100%"
+            : "".concat(quotient * 100, "%");
+          if (layout === "responsive") {
+            // <Image src="i.png" width="100" height="100" layout="responsive" />
+            wrapperStyle.display = "block";
+            wrapperStyle.position = "relative";
+            hasSizer = true;
+            sizerStyle.paddingTop = paddingTop;
+          } else if (layout === "intrinsic") {
+            // <Image src="i.png" width="100" height="100" layout="intrinsic" />
+            wrapperStyle.display = "inline-block";
+            wrapperStyle.position = "relative";
+            wrapperStyle.maxWidth = "100%";
+            hasSizer = true;
+            sizerStyle.maxWidth = "100%";
+            sizerSvgUrl = "data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27"
+              .concat(widthInt, "%27%20height=%27")
+              .concat(heightInt, "%27/%3e");
+          } else if (layout === "fixed") {
+            // <Image src="i.png" width="100" height="100" layout="fixed" />
+            wrapperStyle.display = "inline-block";
+            wrapperStyle.position = "relative";
+            wrapperStyle.width = widthInt;
+            wrapperStyle.height = heightInt;
+          }
+        } else {
+          // <Image src="i.png" />
+          if (false) {
+          }
+        }
+        var imgAttributes = {
+          src: emptyDataURL,
+          srcSet: undefined,
+          sizes: undefined
+        };
+        if (isVisible) {
+          imgAttributes = generateImgAttrs({
+            config: config,
+            src: src,
+            unoptimized: unoptimized,
+            layout: layout,
+            width: widthInt,
+            quality: qualityInt,
+            sizes: sizes,
+            loader: loader
+          });
+        }
+        var srcString = src;
+        if (false) {
+          var fullUrl;
+        }
+        var imageSrcSetPropName = "imagesrcset";
+        var imageSizesPropName = "imagesizes";
+        if (false) {
+        }
+        var _obj;
+        var linkProps =
+          ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
+          _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
+          _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
+          _obj);
+        var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
+        var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
+        var imgRef = (0, _react).useRef(null);
+        (0, _react).useEffect(
+          function() {
+            onLoadingCompleteRef.current = onLoadingComplete;
+          },
+          [onLoadingComplete]
+        );
+        useLayoutEffect(
+          function() {
+            setIntersection(imgRef.current);
+          },
+          [setIntersection]
+        );
+        (0, _react).useEffect(
+          function() {
+            handleLoading(
+              imgRef,
+              srcString,
+              layout,
+              placeholder,
+              onLoadingCompleteRef
+            );
+          },
+          [srcString, layout, placeholder, isVisible]
+        );
+        var imgElementArgs = _objectSpread(
+          {
+            isLazy: isLazy,
+            imgAttributes: imgAttributes,
+            heightInt: heightInt,
+            widthInt: widthInt,
+            qualityInt: qualityInt,
+            layout: layout,
+            className: className,
+            imgStyle: imgStyle,
+            blurStyle: blurStyle,
+            imgRef: imgRef,
+            loading: loading,
+            config: config,
+            unoptimized: unoptimized,
+            placeholder: placeholder,
+            loader: loader,
+            srcString: srcString
+          },
+          rest
+        );
+        return /*#__PURE__*/ _react.default.createElement(
+          _react.default.Fragment,
+          null,
+          layout === "raw"
+            ? /*#__PURE__*/ _react.default.createElement(
+                ImageElement,
+                Object.assign({}, imgElementArgs)
+              )
+            : /*#__PURE__*/ _react.default.createElement(
+                "span",
+                {
+                  style: wrapperStyle
+                },
+                hasSizer
+                  ? /*#__PURE__*/ _react.default.createElement(
+                      "span",
+                      {
+                        style: sizerStyle
+                      },
+                      sizerSvgUrl
+                        ? /*#__PURE__*/ _react.default.createElement("img", {
+                            style: {
+                              display: "block",
+                              maxWidth: "100%",
+                              width: "initial",
+                              height: "initial",
+                              background: "none",
+                              opacity: 1,
+                              border: 0,
+                              margin: 0,
+                              padding: 0
+                            },
+                            alt: "",
+                            "aria-hidden": true,
+                            src: sizerSvgUrl
+                          })
+                        : null
+                    )
+                  : null,
+                /*#__PURE__*/ _react.default.createElement(
+                  ImageElement,
+                  Object.assign({}, imgElementArgs)
+                )
+              ),
+          priority // for browsers that do not support `imagesrcset`, and in those cases
+            ? // it would likely cause the incorrect image to be preloaded.
+              //
+              // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
+              /*#__PURE__*/ _react.default.createElement(
+                _head.default,
+                null,
+                /*#__PURE__*/ _react.default.createElement(
+                  "link",
+                  Object.assign(
+                    {
+                      key:
+                        "__nimg-" +
+                        imgAttributes.src +
+                        imgAttributes.srcSet +
+                        imgAttributes.sizes,
+                      rel: "preload",
+                      as: "image",
+                      href: imgAttributes.srcSet ? undefined : imgAttributes.src
+                    },
+                    linkProps
+                  )
+                )
+              )
+            : null
+        );
+      }
       function _defineProperty1(obj, key, value) {
         if (key in obj) {
           Object.defineProperty(obj, key, {
@@ -226,11 +615,23 @@
         }
         return target;
       }
+      var ref;
+      var experimentalLayoutRaw =
+        (ref = {
+          deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+          imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+          path: "/_next/image",
+          loader: "default",
+          experimentalLayoutRaw: false
+        }) === null || ref === void 0
+          ? void 0
+          : ref.experimentalLayoutRaw;
       var configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
         imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
         path: "/_next/image",
-        loader: "default"
+        loader: "default",
+        experimentalLayoutRaw: false
       };
       var loadedImageURLs = new Set();
       var allImgs = new Map();
@@ -256,6 +657,7 @@
         "fixed",
         "intrinsic",
         "responsive",
+        "raw",
         undefined
       ];
       function isStaticRequire(src) {
@@ -273,7 +675,10 @@
       function getWidths(param, width, layout, sizes) {
         var deviceSizes = param.deviceSizes,
           allSizes = param.allSizes;
-        if (sizes && (layout === "fill" || layout === "responsive")) {
+        if (
+          sizes &&
+          (layout === "fill" || layout === "responsive" || layout === "raw")
+        ) {
           // Find all the "vw" percent sizes used in the sizes prop
           var viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
           var percentSizes = [];
@@ -347,9 +752,9 @@
             sizes: undefined
           };
         }
-        var ref = getWidths(config, width, layout, sizes),
-          widths = ref.widths,
-          kind = ref.kind;
+        var ref2 = getWidths(config, width, layout, sizes),
+          widths = ref2.widths,
+          kind = ref2.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -393,11 +798,11 @@
         return undefined;
       }
       function defaultImageLoader(loaderProps) {
-        var ref;
+        var ref2;
         var loaderKey =
-          ((ref = loaderProps.config) === null || ref === void 0
+          ((ref2 = loaderProps.config) === null || ref2 === void 0
             ? void 0
-            : ref.loader) || "default";
+            : ref2.loader) || "default";
         var load = loaders.get(loaderKey);
         if (load) {
           return load(loaderProps);
@@ -446,7 +851,7 @@
                 });
               }
               if (false) {
-                var parent, ref;
+                var parent, ref3;
               }
             });
           }
@@ -462,330 +867,68 @@
           }
         }
       }
-      function Image(_param) {
-        var src = _param.src,
-          sizes = _param.sizes,
-          _unoptimized = _param.unoptimized,
-          unoptimized = _unoptimized === void 0 ? false : _unoptimized,
-          _priority = _param.priority,
-          priority = _priority === void 0 ? false : _priority,
-          loading = _param.loading,
-          _lazyRoot = _param.lazyRoot,
-          lazyRoot = _lazyRoot === void 0 ? null : _lazyRoot,
-          _lazyBoundary = _param.lazyBoundary,
-          lazyBoundary = _lazyBoundary === void 0 ? "200px" : _lazyBoundary,
+      var ImageElement = function(_param) {
+        var imgAttributes = _param.imgAttributes,
+          heightInt = _param.heightInt,
+          widthInt = _param.widthInt,
+          qualityInt = _param.qualityInt,
+          layout = _param.layout,
           className = _param.className,
-          quality = _param.quality,
-          width = _param.width,
-          height = _param.height,
-          objectFit = _param.objectFit,
-          objectPosition = _param.objectPosition,
-          onLoadingComplete = _param.onLoadingComplete,
-          _loader = _param.loader,
-          loader = _loader === void 0 ? defaultImageLoader : _loader,
-          _placeholder = _param.placeholder,
-          placeholder = _placeholder === void 0 ? "empty" : _placeholder,
-          blurDataURL = _param.blurDataURL,
-          all = _objectWithoutProperties(_param, [
-            "src",
-            "sizes",
-            "unoptimized",
-            "priority",
-            "loading",
-            "lazyRoot",
-            "lazyBoundary",
+          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,
+          rest = _objectWithoutProperties(_param, [
+            "imgAttributes",
+            "heightInt",
+            "widthInt",
+            "qualityInt",
+            "layout",
             "className",
-            "quality",
-            "width",
-            "height",
-            "objectFit",
-            "objectPosition",
-            "onLoadingComplete",
-            "loader",
+            "imgStyle",
+            "blurStyle",
+            "isLazy",
+            "imgRef",
             "placeholder",
-            "blurDataURL"
+            "loading",
+            "sizes",
+            "srcString",
+            "config",
+            "unoptimized",
+            "loader"
           ]);
-        var imgRef = (0, _react).useRef(null);
-        var configContext = (0, _react).useContext(
-          _imageConfigContext.ImageConfigContext
-        );
-        var config = (0, _react).useMemo(
-          function() {
-            var c =
-              configEnv || configContext || _imageConfig.imageConfigDefault;
-            var allSizes = _toConsumableArray(c.deviceSizes)
-              .concat(_toConsumableArray(c.imageSizes))
-              .sort(function(a, b) {
-                return a - b;
-              });
-            var deviceSizes = c.deviceSizes.sort(function(a, b) {
-              return a - b;
-            });
-            return _objectSpread({}, c, {
-              allSizes: allSizes,
-              deviceSizes: deviceSizes
-            });
-          },
-          [configContext]
-        );
-        var rest = all;
-        var layout = sizes ? "responsive" : "intrinsic";
-        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"];
-        }
-        var staticSrc = "";
-        if (isStaticImport(src)) {
-          var staticImageData = isStaticRequire(src) ? src.default : src;
-          if (!staticImageData.src) {
-            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 ".concat(
-                JSON.stringify(staticImageData)
-              )
-            );
-          }
-          blurDataURL = blurDataURL || staticImageData.blurDataURL;
-          staticSrc = staticImageData.src;
-          if (!layout || layout !== "fill") {
-            height = height || staticImageData.height;
-            width = width || staticImageData.width;
-            if (!staticImageData.height || !staticImageData.width) {
-              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 ".concat(
-                  JSON.stringify(staticImageData)
-                )
-              );
-            }
-          }
-        }
-        src = typeof src === "string" ? src : staticSrc;
-        var widthInt = getInt(width);
-        var heightInt = getInt(height);
-        var qualityInt = getInt(quality);
-        var isLazy =
-          !priority && (loading === "lazy" || typeof loading === "undefined");
-        if (src.startsWith("data:") || src.startsWith("blob:")) {
-          // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
-          unoptimized = true;
-          isLazy = false;
-        }
-        if (true && loadedImageURLs.has(src)) {
-          isLazy = false;
-        }
-        if (false) {
-          var url, urlStr, VALID_BLUR_EXT;
-        }
-        var ref1 = _slicedToArray(
-            (0, _useIntersection).useIntersection({
-              rootRef: lazyRoot,
-              rootMargin: lazyBoundary,
-              disabled: !isLazy
-            }),
-            2
-          ),
-          setIntersection = ref1[0],
-          isIntersected = ref1[1];
-        var isVisible = !isLazy || isIntersected;
-        var wrapperStyle = {
-          boxSizing: "border-box",
-          display: "block",
-          overflow: "hidden",
-          width: "initial",
-          height: "initial",
-          background: "none",
-          opacity: 1,
-          border: 0,
-          margin: 0,
-          padding: 0
-        };
-        var sizerStyle = {
-          boxSizing: "border-box",
-          display: "block",
-          width: "initial",
-          height: "initial",
-          background: "none",
-          opacity: 1,
-          border: 0,
-          margin: 0,
-          padding: 0
-        };
-        var hasSizer = false;
-        var sizerSvgUrl;
-        var imgStyle = {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-          boxSizing: "border-box",
-          padding: 0,
-          border: "none",
-          margin: "auto",
-          display: "block",
-          width: 0,
-          height: 0,
-          minWidth: "100%",
-          maxWidth: "100%",
-          minHeight: "100%",
-          maxHeight: "100%",
-          objectFit: objectFit,
-          objectPosition: objectPosition
-        };
-        var blurStyle =
-          placeholder === "blur"
-            ? {
-                filter: "blur(20px)",
-                backgroundSize: objectFit || "cover",
-                backgroundImage: 'url("'.concat(blurDataURL, '")'),
-                backgroundPosition: objectPosition || "0% 0%"
-              }
-            : {};
-        if (layout === "fill") {
-          // <Image src="i.png" layout="fill" />
-          wrapperStyle.display = "block";
-          wrapperStyle.position = "absolute";
-          wrapperStyle.top = 0;
-          wrapperStyle.left = 0;
-          wrapperStyle.bottom = 0;
-          wrapperStyle.right = 0;
-        } else if (
-          typeof widthInt !== "undefined" &&
-          typeof heightInt !== "undefined"
-        ) {
-          // <Image src="i.png" width="100" height="100" />
-          var quotient = heightInt / widthInt;
-          var paddingTop = isNaN(quotient)
-            ? "100%"
-            : "".concat(quotient * 100, "%");
-          if (layout === "responsive") {
-            // <Image src="i.png" width="100" height="100" layout="responsive" />
-            wrapperStyle.display = "block";
-            wrapperStyle.position = "relative";
-            hasSizer = true;
-            sizerStyle.paddingTop = paddingTop;
-          } else if (layout === "intrinsic") {
-            // <Image src="i.png" width="100" height="100" layout="intrinsic" />
-            wrapperStyle.display = "inline-block";
-            wrapperStyle.position = "relative";
-            wrapperStyle.maxWidth = "100%";
-            hasSizer = true;
-            sizerStyle.maxWidth = "100%";
-            sizerSvgUrl = "data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27"
-              .concat(widthInt, "%27%20height=%27")
-              .concat(heightInt, "%27/%3e");
-          } else if (layout === "fixed") {
-            // <Image src="i.png" width="100" height="100" layout="fixed" />
-            wrapperStyle.display = "inline-block";
-            wrapperStyle.position = "relative";
-            wrapperStyle.width = widthInt;
-            wrapperStyle.height = heightInt;
-          }
-        } else {
-          // <Image src="i.png" />
-          if (false) {
-          }
-        }
-        var imgAttributes = {
-          src: emptyDataURL,
-          srcSet: undefined,
-          sizes: undefined
-        };
-        if (isVisible) {
-          imgAttributes = generateImgAttrs({
-            config: config,
-            src: src,
-            unoptimized: unoptimized,
-            layout: layout,
-            width: widthInt,
-            quality: qualityInt,
-            sizes: sizes,
-            loader: loader
-          });
-        }
-        var srcString = src;
-        if (false) {
-          var fullUrl;
-        }
-        var imageSrcSetPropName = "imagesrcset";
-        var imageSizesPropName = "imagesizes";
-        if (false) {
-        }
-        var _obj;
-        var linkProps =
-          ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
-          _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
-          _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
-          _obj);
-        var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
-        var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
-        (0, _react).useEffect(
-          function() {
-            onLoadingCompleteRef.current = onLoadingComplete;
-          },
-          [onLoadingComplete]
-        );
-        useLayoutEffect(
-          function() {
-            setIntersection(imgRef.current);
-          },
-          [setIntersection]
-        );
-        (0, _react).useEffect(
-          function() {
-            handleLoading(
-              imgRef,
-              srcString,
-              layout,
-              placeholder,
-              onLoadingCompleteRef
-            );
-          },
-          [srcString, layout, placeholder, isVisible]
-        );
         return /*#__PURE__*/ _react.default.createElement(
-          "span",
-          {
-            style: wrapperStyle
-          },
-          hasSizer
-            ? /*#__PURE__*/ _react.default.createElement(
-                "span",
-                {
-                  style: sizerStyle
-                },
-                sizerSvgUrl
-                  ? /*#__PURE__*/ _react.default.createElement("img", {
-                      style: {
-                        display: "block",
-                        maxWidth: "100%",
-                        width: "initial",
-                        height: "initial",
-                        background: "none",
-                        opacity: 1,
-                        border: 0,
-                        margin: 0,
-                        padding: 0
-                      },
-                      alt: "",
-                      "aria-hidden": true,
-                      src: sizerSvgUrl
-                    })
-                  : null
-              )
-            : null,
+          _react.default.Fragment,
+          null,
           /*#__PURE__*/ _react.default.createElement(
             "img",
-            Object.assign({}, rest, imgAttributes, {
-              decoding: "async",
-              "data-nimg": layout,
-              className: className,
-              ref: imgRef,
-              style: _objectSpread({}, imgStyle, blurStyle)
-            })
+            Object.assign(
+              {},
+              rest,
+              imgAttributes,
+              layout === "raw" && !sizes
+                ? {
+                    height: heightInt,
+                    width: widthInt
+                  }
+                : {},
+              {
+                decoding: "async",
+                "data-nimg": layout,
+                className: className,
+                ref: imgRef,
+                style: _objectSpread({}, imgStyle, blurStyle)
+              }
+            )
           ),
-          isLazy &&
+          (isLazy || placeholder === "blur") &&
             /*#__PURE__*/ _react.default.createElement(
               "noscript",
               null,
@@ -796,7 +939,7 @@
                   rest,
                   generateImgAttrs({
                     config: config,
-                    src: src,
+                    src: srcString,
                     unoptimized: unoptimized,
                     layout: layout,
                     width: widthInt,
@@ -804,6 +947,12 @@
                     sizes: sizes,
                     loader: loader
                   }),
+                  layout === "raw" && !sizes
+                    ? {
+                        height: heightInt,
+                        width: widthInt
+                      }
+                    : {},
                   {
                     decoding: "async",
                     "data-nimg": layout,
@@ -814,34 +963,9 @@
                   }
                 )
               )
-            ),
-          priority // for browsers that do not support `imagesrcset`, and in those cases
-            ? // it would likely cause the incorrect image to be preloaded.
-              //
-              // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
-              /*#__PURE__*/ _react.default.createElement(
-                _head.default,
-                null,
-                /*#__PURE__*/ _react.default.createElement(
-                  "link",
-                  Object.assign(
-                    {
-                      key:
-                        "__nimg-" +
-                        imgAttributes.src +
-                        imgAttributes.srcSet +
-                        imgAttributes.sizes,
-                      rel: "preload",
-                      as: "image",
-                      href: imgAttributes.srcSet ? undefined : imgAttributes.src
-                    },
-                    linkProps
-                  )
-                )
-              )
-            : null
+            )
         );
-      }
+      };
       function normalizeSrc(src) {
         return src[0] === "/" ? src.slice(1) : src;
       }
@@ -909,7 +1033,12 @@
           return src;
         }
         return ""
-          .concat(config.path, "?url=")
+          .concat(
+            (0, _normalizeTrailingSlash).normalizePathTrailingSlash(
+              config.path
+            ),
+            "?url="
+          )
           .concat(encodeURIComponent(src), "&w=")
           .concat(width, "&q=")
           .concat(quality || 75);
@@ -918,7 +1047,7 @@
       /***/
     },
 
-    /***/ 7190: /***/ function(
+    /***/ 9246: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -991,7 +1120,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(7294);
-      var _requestIdleCallback = __webpack_require__(9311);
+      var _requestIdleCallback = __webpack_require__(4686);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -1123,7 +1252,7 @@
       /***/
     },
 
-    /***/ 3155: /***/ function(
+    /***/ 3143: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1177,7 +1306,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8045);
+      module.exports = __webpack_require__(9749);
 
       /***/
     }

Diff for index-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function() {
-          return __webpack_require__(3678);
+          return __webpack_require__(4369);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3678: /***/ function(
+    /***/ 4369: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for link-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function() {
-          return __webpack_require__(4380);
+          return __webpack_require__(9798);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8418: /***/ function(
+    /***/ 1551: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -100,9 +100,9 @@
       };
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _router = __webpack_require__(6273);
-      var _router1 = __webpack_require__(387);
-      var _useIntersection = __webpack_require__(7190);
+      var _router = __webpack_require__(1003);
+      var _router1 = __webpack_require__(880);
+      var _useIntersection = __webpack_require__(9246);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -322,7 +322,7 @@
       /***/
     },
 
-    /***/ 7190: /***/ function(
+    /***/ 9246: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,7 +395,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(7294);
-      var _requestIdleCallback = __webpack_require__(9311);
+      var _requestIdleCallback = __webpack_require__(4686);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -527,7 +527,7 @@
       /***/
     },
 
-    /***/ 4380: /***/ function(
+    /***/ 9798: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -577,7 +577,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8418);
+      module.exports = __webpack_require__(1551);
 
       /***/
     }

Diff for routerDirect-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function() {
-          return __webpack_require__(6870);
+          return __webpack_require__(1271);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6870: /***/ function(
+    /***/ 1271: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -59,7 +59,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(387);
+      module.exports = __webpack_require__(880);
 
       /***/
     }

Diff for script-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function() {
-          return __webpack_require__(549);
+          return __webpack_require__(6103);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 549: /***/ function(
+    /***/ 6103: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -72,7 +72,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(699);
+      module.exports = __webpack_require__(3573);
 
       /***/
     }

Diff for withRouter-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function() {
-          return __webpack_require__(5330);
+          return __webpack_require__(8374);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5330: /***/ function(
+    /***/ 8374: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -56,7 +56,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(387);
+      module.exports = __webpack_require__(880);
 
       /***/
     }

Diff for 450.HASH.js

@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [450],
+  [925],
   {
-    /***/ 6450: /***/ function(
+    /***/ 3925: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for main-HASH.js

Diff too large to display

Diff for webpack-HASH.js

@@ -159,7 +159,7 @@
     /******/ __webpack_require__.u = function(chunkId) {
       /******/ // return url for filenames based on template
       /******/ return (
-        "static/chunks/" + chunkId + "." + "f074c64230165a22" + ".js"
+        "static/chunks/" + chunkId + "." + "ba981b51693b362c" + ".js"
       );
       /******/
     };

Diff for index.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-4259f1e5fe92b2fa.js"
+      src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-cb462a64d04fefb5.js"
+      src="/_next/static/chunks/main-3c52cb182cbdbcfa.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-81e9c7126411d04e.js"
+      src="/_next/static/chunks/pages/_app-71642a8ccc3189c6.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/index-22405fb865808942.js"
+      src="/_next/static/chunks/pages/index-7dee323746710646.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for link.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-4259f1e5fe92b2fa.js"
+      src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-cb462a64d04fefb5.js"
+      src="/_next/static/chunks/main-3c52cb182cbdbcfa.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-81e9c7126411d04e.js"
+      src="/_next/static/chunks/pages/_app-71642a8ccc3189c6.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-e104229636aa11ef.js"
+      src="/_next/static/chunks/pages/link-817796f8884509a8.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for withRouter.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-4259f1e5fe92b2fa.js"
+      src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-cb462a64d04fefb5.js"
+      src="/_next/static/chunks/main-3c52cb182cbdbcfa.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-81e9c7126411d04e.js"
+      src="/_next/static/chunks/pages/_app-71642a8ccc3189c6.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-d7559b7591922e47.js"
+      src="/_next/static/chunks/pages/withRouter-1285f0be62775073.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Default Build with SWC (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary v12.1.0	vercel/next.js refs/heads/canary	Change
buildDuration	21.9s	22s	⚠️ +84ms
buildDurationCached	7.3s	7.2s	-139ms
nodeModulesSize	456 MB	456 MB	-47.8 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary v12.1.0	vercel/next.js refs/heads/canary	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.821	3.689	-0.13
/ avg req/sec	654.23	677.75	+23.52
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.587	1.601	⚠️ +0.01
/error-in-render avg req/sec	1575.64	1561.99	⚠️ -13.65

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary v12.1.0	vercel/next.js refs/heads/canary	Change
450.HASH.js gzip	179 B	178 B	-1 B
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	⚠️ +75 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	-1 B
Overall change	72.1 kB	72.1 kB	⚠️ +73 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary v12.1.0	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.0	vercel/next.js refs/heads/canary	Change
_app-HASH.js gzip	1.36 kB	1.35 kB	-3 B
_error-HASH.js gzip	180 B	179 B	-1 B
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	326 B	324 B	-2 B
dynamic-HASH.js gzip	2.56 kB	2.56 kB	⚠️ +3 B
head-HASH.js gzip	350 B	351 B	⚠️ +1 B
hooks-HASH.js gzip	920 B	921 B	⚠️ +1 B
image-HASH.js gzip	5.18 kB	5.59 kB	⚠️ +411 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.33 kB	2.33 kB	⚠️ +3 B
routerDirect..HASH.js gzip	321 B	322 B	⚠️ +1 B
script-HASH.js gzip	386 B	388 B	⚠️ +2 B
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.9 kB	15.3 kB	⚠️ +416 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary v12.1.0	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.0	vercel/next.js refs/heads/canary	Change
index.html gzip	530 B	531 B	⚠️ +1 B
link.html gzip	544 B	545 B	⚠️ +1 B
withRouter.html gzip	525 B	527 B	⚠️ +2 B
Overall change	1.6 kB	1.6 kB	⚠️ +4 B

Diffs

Diff for _buildManifest.js

@@ -1,25 +1,25 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-22405fb865808942.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-97db2c91e74bb63f.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-7dee323746710646.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-5d03de5a43fe90da.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-ee9dddb806ed55d7.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-48a1ac120ac76d0e.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-16a755ee71604f2b.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-9422646fa93fdf00.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-a917cf735c6c2990.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-d1a5ae55e4ce4968.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-6424115731d38b02.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b77f1645174768a7.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-e104229636aa11ef.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-96a5d6ed07cf5a83.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-9dfe734f583d4926.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-de2021fe6ae04318.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-817796f8884509a8.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-dee9d46db53befcd.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-cb15c8ac2322bf32.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-70c0d6f4c29e2f00.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-4a8bbe65f50a22a0.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-d7559b7591922e47.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-1285f0be62775073.js"
   ],
   sortedPages: [
     "\u002F",

Diff for _app-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(6029);
+          return __webpack_require__(4297);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6029: /***/ function(
+    /***/ 4297: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -153,7 +153,7 @@
       });
       exports["default"] = void 0;
       var _react = _interopRequireDefault1(__webpack_require__(7294));
-      var _utils = __webpack_require__(3794);
+      var _utils = __webpack_require__(670);
       function asyncGeneratorStep(
         gen,
         resolve,
@@ -215,6 +215,9 @@
               default: obj
             };
       }
+      function appGetInitialProps(_) {
+        return _appGetInitialProps.apply(this, arguments);
+      }
       function _appGetInitialProps() {
         _appGetInitialProps = /**
          * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
@@ -243,9 +246,6 @@
         );
         return _appGetInitialProps.apply(this, arguments);
       }
-      function appGetInitialProps(_) {
-        return _appGetInitialProps.apply(this, arguments);
-      }
       var App = /*#__PURE__*/ (function(_Component) {
         _inherits(App, _Component);
         var _super = _createSuper(App);
@@ -269,9 +269,9 @@
         ]);
         return App;
       })(_react.default.Component);
+      exports["default"] = App;
       App.origGetInitialProps = appGetInitialProps;
-      App.getInitialProps = appGetInitialProps;
-      exports["default"] = App; //# sourceMappingURL=_app.js.map
+      App.getInitialProps = appGetInitialProps; //# sourceMappingURL=_app.js.map
 
       /***/
     }
@@ -282,7 +282,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(915), __webpack_exec__(387);
+      return __webpack_exec__(915), __webpack_exec__(880);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for _error-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(9185);
+          return __webpack_require__(67);
         }
       ]);
       if (false) {

Diff for amp-HASH.js

@@ -6,7 +6,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3240);
+      module.exports = __webpack_require__(1686);
 
       /***/
     },
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(1910);
+          return __webpack_require__(8774);
         }
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 1910: /***/ function(
+    /***/ 8774: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for css-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(5089);
+          return __webpack_require__(767);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5089: /***/ function(
+    /***/ 767: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -29,7 +29,7 @@
         5893
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        1785
+        692
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 1785: /***/ function(module) {
+    /***/ 692: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };

Diff for dynamic-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(3286);
+          return __webpack_require__(3370);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 638: /***/ function(
+    /***/ 7645: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -70,37 +70,10 @@
       __webpack_unused_export__ = {
         value: true
       };
-      __webpack_unused_export__ = noSSR;
       exports["default"] = dynamic;
+      __webpack_unused_export__ = noSSR;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _loadable = _interopRequireDefault(__webpack_require__(4302));
-      function _interopRequireDefault(obj) {
-        return obj && obj.__esModule
-          ? obj
-          : {
-              default: obj
-            };
-      }
-      var isServerSide = "object" === "undefined";
-      function noSSR(LoadableInitializer, loadableOptions) {
-        // Removing webpack and modules means react-loadable won't try preloading
-        delete loadableOptions.webpack;
-        delete loadableOptions.modules;
-        // This check is necessary to prevent react-loadable from initializing on the server
-        if (!isServerSide) {
-          return LoadableInitializer(loadableOptions);
-        }
-        var Loading = loadableOptions.loading;
-        // This will only be rendered on the server side
-        return function() {
-          return /*#__PURE__*/ _react.default.createElement(Loading, {
-            error: null,
-            isLoading: true,
-            pastDelay: false,
-            timedOut: false
-          });
-        };
-      }
+      var _loadable = _interopRequireDefault(__webpack_require__(4588));
       function dynamic(dynamicOptions, options) {
         var loadableFn = _loadable.default;
         var loadableOptions = {
@@ -163,12 +136,39 @@
           delete loadableOptions.ssr;
         }
         return loadableFn(loadableOptions);
+      }
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+      var isServerSide = "object" === "undefined";
+      function noSSR(LoadableInitializer, loadableOptions) {
+        // Removing webpack and modules means react-loadable won't try preloading
+        delete loadableOptions.webpack;
+        delete loadableOptions.modules;
+        // This check is necessary to prevent react-loadable from initializing on the server
+        if (!isServerSide) {
+          return LoadableInitializer(loadableOptions);
+        }
+        var Loading = loadableOptions.loading;
+        // This will only be rendered on the server side
+        return function() {
+          return /*#__PURE__*/ _react.default.createElement(Loading, {
+            error: null,
+            isLoading: true,
+            pastDelay: false,
+            timedOut: false
+          });
+        };
       } //# sourceMappingURL=dynamic.js.map
 
       /***/
     },
 
-    /***/ 6319: /***/ function(
+    /***/ 3644: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -195,7 +195,7 @@
       /***/
     },
 
-    /***/ 4302: /***/ function(
+    /***/ 4588: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -257,7 +257,7 @@
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
       var _useSubscription = __webpack_require__(7161);
-      var _loadableContext = __webpack_require__(6319);
+      var _loadableContext = __webpack_require__(3644);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -570,7 +570,7 @@
       /***/
     },
 
-    /***/ 3286: /***/ function(
+    /***/ 3370: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -594,13 +594,13 @@
       next_dynamic__WEBPACK_IMPORTED_MODULE_1__["default"])(
         function() {
           return __webpack_require__
-            .e(/* import() */ 450)
-            .then(__webpack_require__.bind(__webpack_require__, 6450));
+            .e(/* import() */ 925)
+            .then(__webpack_require__.bind(__webpack_require__, 3925));
         },
         {
           loadableGenerated: {
             webpack: function() {
-              return [/*require.resolve*/ 6450];
+              return [/*require.resolve*/ 3925];
             }
           }
         }
@@ -635,7 +635,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(638);
+      module.exports = __webpack_require__(7645);
 
       /***/
     },

Diff for head-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function() {
-          return __webpack_require__(5423);
+          return __webpack_require__(6646);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5423: /***/ function(
+    /***/ 6646: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -73,7 +73,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(5443);
+      module.exports = __webpack_require__(3121);
 
       /***/
     }

Diff for hooks-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function() {
-          return __webpack_require__(5017);
+          return __webpack_require__(2297);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5017: /***/ function(
+    /***/ 2297: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for image-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3155);
+          return __webpack_require__(3143);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8045: /***/ function(
+    /***/ 9749: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -128,10 +128,399 @@
       };
       exports["default"] = Image;
       var _react = _interopRequireWildcard(__webpack_require__(7294));
-      var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _imageConfig = __webpack_require__(5809);
-      var _useIntersection = __webpack_require__(7190);
-      var _imageConfigContext = __webpack_require__(9977);
+      var _head = _interopRequireDefault(__webpack_require__(3121));
+      var _imageConfig = __webpack_require__(139);
+      var _useIntersection = __webpack_require__(9246);
+      var _imageConfigContext = __webpack_require__(8730);
+      var _utils = __webpack_require__(670);
+      var _normalizeTrailingSlash = __webpack_require__(2700);
+      function Image(_param) {
+        var src = _param.src,
+          sizes = _param.sizes,
+          _unoptimized = _param.unoptimized,
+          unoptimized = _unoptimized === void 0 ? false : _unoptimized,
+          _priority = _param.priority,
+          priority = _priority === void 0 ? false : _priority,
+          loading = _param.loading,
+          _lazyRoot = _param.lazyRoot,
+          lazyRoot = _lazyRoot === void 0 ? null : _lazyRoot,
+          _lazyBoundary = _param.lazyBoundary,
+          lazyBoundary = _lazyBoundary === void 0 ? "200px" : _lazyBoundary,
+          className = _param.className,
+          quality = _param.quality,
+          width = _param.width,
+          height = _param.height,
+          style = _param.style,
+          objectFit = _param.objectFit,
+          objectPosition = _param.objectPosition,
+          onLoadingComplete = _param.onLoadingComplete,
+          _loader = _param.loader,
+          loader = _loader === void 0 ? defaultImageLoader : _loader,
+          _placeholder = _param.placeholder,
+          placeholder = _placeholder === void 0 ? "empty" : _placeholder,
+          blurDataURL = _param.blurDataURL,
+          all = _objectWithoutProperties(_param, [
+            "src",
+            "sizes",
+            "unoptimized",
+            "priority",
+            "loading",
+            "lazyRoot",
+            "lazyBoundary",
+            "className",
+            "quality",
+            "width",
+            "height",
+            "style",
+            "objectFit",
+            "objectPosition",
+            "onLoadingComplete",
+            "loader",
+            "placeholder",
+            "blurDataURL"
+          ]);
+        var configContext = (0, _react).useContext(
+          _imageConfigContext.ImageConfigContext
+        );
+        var config = (0, _react).useMemo(
+          function() {
+            var c =
+              configEnv || configContext || _imageConfig.imageConfigDefault;
+            var allSizes = _toConsumableArray(c.deviceSizes)
+              .concat(_toConsumableArray(c.imageSizes))
+              .sort(function(a, b) {
+                return a - b;
+              });
+            var deviceSizes = c.deviceSizes.sort(function(a, b) {
+              return a - b;
+            });
+            return _objectSpread({}, c, {
+              allSizes: allSizes,
+              deviceSizes: deviceSizes
+            });
+          },
+          [configContext]
+        );
+        var rest = all;
+        var layout = sizes ? "responsive" : "intrinsic";
+        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"];
+        }
+        var staticSrc = "";
+        if (isStaticImport(src)) {
+          var staticImageData = isStaticRequire(src) ? src.default : src;
+          if (!staticImageData.src) {
+            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 ".concat(
+                JSON.stringify(staticImageData)
+              )
+            );
+          }
+          blurDataURL = blurDataURL || staticImageData.blurDataURL;
+          staticSrc = staticImageData.src;
+          if (!layout || layout !== "fill") {
+            height = height || staticImageData.height;
+            width = width || staticImageData.width;
+            if (!staticImageData.height || !staticImageData.width) {
+              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 ".concat(
+                  JSON.stringify(staticImageData)
+                )
+              );
+            }
+          }
+        }
+        src = typeof src === "string" ? src : staticSrc;
+        var widthInt = getInt(width);
+        var heightInt = getInt(height);
+        var qualityInt = getInt(quality);
+        var isLazy =
+          !priority && (loading === "lazy" || typeof loading === "undefined");
+        if (src.startsWith("data:") || src.startsWith("blob:")) {
+          // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
+          unoptimized = true;
+          isLazy = false;
+        }
+        if (true && loadedImageURLs.has(src)) {
+          isLazy = false;
+        }
+        var ref1 = _slicedToArray(
+            (0, _useIntersection).useIntersection({
+              rootRef: lazyRoot,
+              rootMargin: lazyBoundary,
+              disabled: !isLazy
+            }),
+            2
+          ),
+          setIntersection = ref1[0],
+          isIntersected = ref1[1];
+        var isVisible = !isLazy || isIntersected;
+        var wrapperStyle = {
+          boxSizing: "border-box",
+          display: "block",
+          overflow: "hidden",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
+        };
+        var sizerStyle = {
+          boxSizing: "border-box",
+          display: "block",
+          width: "initial",
+          height: "initial",
+          background: "none",
+          opacity: 1,
+          border: 0,
+          margin: 0,
+          padding: 0
+        };
+        var hasSizer = false;
+        var sizerSvgUrl;
+        var layoutStyle = {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          boxSizing: "border-box",
+          padding: 0,
+          border: "none",
+          margin: "auto",
+          display: "block",
+          width: 0,
+          height: 0,
+          minWidth: "100%",
+          maxWidth: "100%",
+          minHeight: "100%",
+          maxHeight: "100%",
+          objectFit: objectFit,
+          objectPosition: objectPosition
+        };
+        if (false) {
+        }
+        if (false) {
+          var overwrittenStyles, url, urlStr, VALID_BLUR_EXT;
+        }
+        var imgStyle = Object.assign(
+          {},
+          style,
+          layout === "raw"
+            ? {
+                aspectRatio: "".concat(widthInt, " / ").concat(heightInt)
+              }
+            : layoutStyle
+        );
+        var blurStyle =
+          placeholder === "blur"
+            ? {
+                filter: "blur(20px)",
+                backgroundSize: objectFit || "cover",
+                backgroundImage: 'url("'.concat(blurDataURL, '")'),
+                backgroundPosition: objectPosition || "0% 0%"
+              }
+            : {};
+        if (layout === "fill") {
+          // <Image src="i.png" layout="fill" />
+          wrapperStyle.display = "block";
+          wrapperStyle.position = "absolute";
+          wrapperStyle.top = 0;
+          wrapperStyle.left = 0;
+          wrapperStyle.bottom = 0;
+          wrapperStyle.right = 0;
+        } else if (
+          typeof widthInt !== "undefined" &&
+          typeof heightInt !== "undefined"
+        ) {
+          // <Image src="i.png" width="100" height="100" />
+          var quotient = heightInt / widthInt;
+          var paddingTop = isNaN(quotient)
+            ? "100%"
+            : "".concat(quotient * 100, "%");
+          if (layout === "responsive") {
+            // <Image src="i.png" width="100" height="100" layout="responsive" />
+            wrapperStyle.display = "block";
+            wrapperStyle.position = "relative";
+            hasSizer = true;
+            sizerStyle.paddingTop = paddingTop;
+          } else if (layout === "intrinsic") {
+            // <Image src="i.png" width="100" height="100" layout="intrinsic" />
+            wrapperStyle.display = "inline-block";
+            wrapperStyle.position = "relative";
+            wrapperStyle.maxWidth = "100%";
+            hasSizer = true;
+            sizerStyle.maxWidth = "100%";
+            sizerSvgUrl = "data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27"
+              .concat(widthInt, "%27%20height=%27")
+              .concat(heightInt, "%27/%3e");
+          } else if (layout === "fixed") {
+            // <Image src="i.png" width="100" height="100" layout="fixed" />
+            wrapperStyle.display = "inline-block";
+            wrapperStyle.position = "relative";
+            wrapperStyle.width = widthInt;
+            wrapperStyle.height = heightInt;
+          }
+        } else {
+          // <Image src="i.png" />
+          if (false) {
+          }
+        }
+        var imgAttributes = {
+          src: emptyDataURL,
+          srcSet: undefined,
+          sizes: undefined
+        };
+        if (isVisible) {
+          imgAttributes = generateImgAttrs({
+            config: config,
+            src: src,
+            unoptimized: unoptimized,
+            layout: layout,
+            width: widthInt,
+            quality: qualityInt,
+            sizes: sizes,
+            loader: loader
+          });
+        }
+        var srcString = src;
+        if (false) {
+          var fullUrl;
+        }
+        var imageSrcSetPropName = "imagesrcset";
+        var imageSizesPropName = "imagesizes";
+        if (false) {
+        }
+        var _obj;
+        var linkProps =
+          ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
+          _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
+          _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
+          _obj);
+        var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
+        var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
+        var imgRef = (0, _react).useRef(null);
+        (0, _react).useEffect(
+          function() {
+            onLoadingCompleteRef.current = onLoadingComplete;
+          },
+          [onLoadingComplete]
+        );
+        useLayoutEffect(
+          function() {
+            setIntersection(imgRef.current);
+          },
+          [setIntersection]
+        );
+        (0, _react).useEffect(
+          function() {
+            handleLoading(
+              imgRef,
+              srcString,
+              layout,
+              placeholder,
+              onLoadingCompleteRef
+            );
+          },
+          [srcString, layout, placeholder, isVisible]
+        );
+        var imgElementArgs = _objectSpread(
+          {
+            isLazy: isLazy,
+            imgAttributes: imgAttributes,
+            heightInt: heightInt,
+            widthInt: widthInt,
+            qualityInt: qualityInt,
+            layout: layout,
+            className: className,
+            imgStyle: imgStyle,
+            blurStyle: blurStyle,
+            imgRef: imgRef,
+            loading: loading,
+            config: config,
+            unoptimized: unoptimized,
+            placeholder: placeholder,
+            loader: loader,
+            srcString: srcString
+          },
+          rest
+        );
+        return /*#__PURE__*/ _react.default.createElement(
+          _react.default.Fragment,
+          null,
+          layout === "raw"
+            ? /*#__PURE__*/ _react.default.createElement(
+                ImageElement,
+                Object.assign({}, imgElementArgs)
+              )
+            : /*#__PURE__*/ _react.default.createElement(
+                "span",
+                {
+                  style: wrapperStyle
+                },
+                hasSizer
+                  ? /*#__PURE__*/ _react.default.createElement(
+                      "span",
+                      {
+                        style: sizerStyle
+                      },
+                      sizerSvgUrl
+                        ? /*#__PURE__*/ _react.default.createElement("img", {
+                            style: {
+                              display: "block",
+                              maxWidth: "100%",
+                              width: "initial",
+                              height: "initial",
+                              background: "none",
+                              opacity: 1,
+                              border: 0,
+                              margin: 0,
+                              padding: 0
+                            },
+                            alt: "",
+                            "aria-hidden": true,
+                            src: sizerSvgUrl
+                          })
+                        : null
+                    )
+                  : null,
+                /*#__PURE__*/ _react.default.createElement(
+                  ImageElement,
+                  Object.assign({}, imgElementArgs)
+                )
+              ),
+          priority // for browsers that do not support `imagesrcset`, and in those cases
+            ? // it would likely cause the incorrect image to be preloaded.
+              //
+              // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
+              /*#__PURE__*/ _react.default.createElement(
+                _head.default,
+                null,
+                /*#__PURE__*/ _react.default.createElement(
+                  "link",
+                  Object.assign(
+                    {
+                      key:
+                        "__nimg-" +
+                        imgAttributes.src +
+                        imgAttributes.srcSet +
+                        imgAttributes.sizes,
+                      rel: "preload",
+                      as: "image",
+                      href: imgAttributes.srcSet ? undefined : imgAttributes.src
+                    },
+                    linkProps
+                  )
+                )
+              )
+            : null
+        );
+      }
       function _defineProperty1(obj, key, value) {
         if (key in obj) {
           Object.defineProperty(obj, key, {
@@ -226,11 +615,23 @@
         }
         return target;
       }
+      var ref;
+      var experimentalLayoutRaw =
+        (ref = {
+          deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+          imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+          path: "/_next/image",
+          loader: "default",
+          experimentalLayoutRaw: false
+        }) === null || ref === void 0
+          ? void 0
+          : ref.experimentalLayoutRaw;
       var configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
         imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
         path: "/_next/image",
-        loader: "default"
+        loader: "default",
+        experimentalLayoutRaw: false
       };
       var loadedImageURLs = new Set();
       var allImgs = new Map();
@@ -256,6 +657,7 @@
         "fixed",
         "intrinsic",
         "responsive",
+        "raw",
         undefined
       ];
       function isStaticRequire(src) {
@@ -273,7 +675,10 @@
       function getWidths(param, width, layout, sizes) {
         var deviceSizes = param.deviceSizes,
           allSizes = param.allSizes;
-        if (sizes && (layout === "fill" || layout === "responsive")) {
+        if (
+          sizes &&
+          (layout === "fill" || layout === "responsive" || layout === "raw")
+        ) {
           // Find all the "vw" percent sizes used in the sizes prop
           var viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
           var percentSizes = [];
@@ -347,9 +752,9 @@
             sizes: undefined
           };
         }
-        var ref = getWidths(config, width, layout, sizes),
-          widths = ref.widths,
-          kind = ref.kind;
+        var ref2 = getWidths(config, width, layout, sizes),
+          widths = ref2.widths,
+          kind = ref2.kind;
         var last = widths.length - 1;
         return {
           sizes: !sizes && kind === "w" ? "100vw" : sizes,
@@ -393,11 +798,11 @@
         return undefined;
       }
       function defaultImageLoader(loaderProps) {
-        var ref;
+        var ref2;
         var loaderKey =
-          ((ref = loaderProps.config) === null || ref === void 0
+          ((ref2 = loaderProps.config) === null || ref2 === void 0
             ? void 0
-            : ref.loader) || "default";
+            : ref2.loader) || "default";
         var load = loaders.get(loaderKey);
         if (load) {
           return load(loaderProps);
@@ -446,7 +851,7 @@
                 });
               }
               if (false) {
-                var parent, ref;
+                var parent, ref3;
               }
             });
           }
@@ -462,330 +867,68 @@
           }
         }
       }
-      function Image(_param) {
-        var src = _param.src,
-          sizes = _param.sizes,
-          _unoptimized = _param.unoptimized,
-          unoptimized = _unoptimized === void 0 ? false : _unoptimized,
-          _priority = _param.priority,
-          priority = _priority === void 0 ? false : _priority,
-          loading = _param.loading,
-          _lazyRoot = _param.lazyRoot,
-          lazyRoot = _lazyRoot === void 0 ? null : _lazyRoot,
-          _lazyBoundary = _param.lazyBoundary,
-          lazyBoundary = _lazyBoundary === void 0 ? "200px" : _lazyBoundary,
+      var ImageElement = function(_param) {
+        var imgAttributes = _param.imgAttributes,
+          heightInt = _param.heightInt,
+          widthInt = _param.widthInt,
+          qualityInt = _param.qualityInt,
+          layout = _param.layout,
           className = _param.className,
-          quality = _param.quality,
-          width = _param.width,
-          height = _param.height,
-          objectFit = _param.objectFit,
-          objectPosition = _param.objectPosition,
-          onLoadingComplete = _param.onLoadingComplete,
-          _loader = _param.loader,
-          loader = _loader === void 0 ? defaultImageLoader : _loader,
-          _placeholder = _param.placeholder,
-          placeholder = _placeholder === void 0 ? "empty" : _placeholder,
-          blurDataURL = _param.blurDataURL,
-          all = _objectWithoutProperties(_param, [
-            "src",
-            "sizes",
-            "unoptimized",
-            "priority",
-            "loading",
-            "lazyRoot",
-            "lazyBoundary",
+          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,
+          rest = _objectWithoutProperties(_param, [
+            "imgAttributes",
+            "heightInt",
+            "widthInt",
+            "qualityInt",
+            "layout",
             "className",
-            "quality",
-            "width",
-            "height",
-            "objectFit",
-            "objectPosition",
-            "onLoadingComplete",
-            "loader",
+            "imgStyle",
+            "blurStyle",
+            "isLazy",
+            "imgRef",
             "placeholder",
-            "blurDataURL"
+            "loading",
+            "sizes",
+            "srcString",
+            "config",
+            "unoptimized",
+            "loader"
           ]);
-        var imgRef = (0, _react).useRef(null);
-        var configContext = (0, _react).useContext(
-          _imageConfigContext.ImageConfigContext
-        );
-        var config = (0, _react).useMemo(
-          function() {
-            var c =
-              configEnv || configContext || _imageConfig.imageConfigDefault;
-            var allSizes = _toConsumableArray(c.deviceSizes)
-              .concat(_toConsumableArray(c.imageSizes))
-              .sort(function(a, b) {
-                return a - b;
-              });
-            var deviceSizes = c.deviceSizes.sort(function(a, b) {
-              return a - b;
-            });
-            return _objectSpread({}, c, {
-              allSizes: allSizes,
-              deviceSizes: deviceSizes
-            });
-          },
-          [configContext]
-        );
-        var rest = all;
-        var layout = sizes ? "responsive" : "intrinsic";
-        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"];
-        }
-        var staticSrc = "";
-        if (isStaticImport(src)) {
-          var staticImageData = isStaticRequire(src) ? src.default : src;
-          if (!staticImageData.src) {
-            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 ".concat(
-                JSON.stringify(staticImageData)
-              )
-            );
-          }
-          blurDataURL = blurDataURL || staticImageData.blurDataURL;
-          staticSrc = staticImageData.src;
-          if (!layout || layout !== "fill") {
-            height = height || staticImageData.height;
-            width = width || staticImageData.width;
-            if (!staticImageData.height || !staticImageData.width) {
-              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 ".concat(
-                  JSON.stringify(staticImageData)
-                )
-              );
-            }
-          }
-        }
-        src = typeof src === "string" ? src : staticSrc;
-        var widthInt = getInt(width);
-        var heightInt = getInt(height);
-        var qualityInt = getInt(quality);
-        var isLazy =
-          !priority && (loading === "lazy" || typeof loading === "undefined");
-        if (src.startsWith("data:") || src.startsWith("blob:")) {
-          // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
-          unoptimized = true;
-          isLazy = false;
-        }
-        if (true && loadedImageURLs.has(src)) {
-          isLazy = false;
-        }
-        if (false) {
-          var url, urlStr, VALID_BLUR_EXT;
-        }
-        var ref1 = _slicedToArray(
-            (0, _useIntersection).useIntersection({
-              rootRef: lazyRoot,
-              rootMargin: lazyBoundary,
-              disabled: !isLazy
-            }),
-            2
-          ),
-          setIntersection = ref1[0],
-          isIntersected = ref1[1];
-        var isVisible = !isLazy || isIntersected;
-        var wrapperStyle = {
-          boxSizing: "border-box",
-          display: "block",
-          overflow: "hidden",
-          width: "initial",
-          height: "initial",
-          background: "none",
-          opacity: 1,
-          border: 0,
-          margin: 0,
-          padding: 0
-        };
-        var sizerStyle = {
-          boxSizing: "border-box",
-          display: "block",
-          width: "initial",
-          height: "initial",
-          background: "none",
-          opacity: 1,
-          border: 0,
-          margin: 0,
-          padding: 0
-        };
-        var hasSizer = false;
-        var sizerSvgUrl;
-        var imgStyle = {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-          boxSizing: "border-box",
-          padding: 0,
-          border: "none",
-          margin: "auto",
-          display: "block",
-          width: 0,
-          height: 0,
-          minWidth: "100%",
-          maxWidth: "100%",
-          minHeight: "100%",
-          maxHeight: "100%",
-          objectFit: objectFit,
-          objectPosition: objectPosition
-        };
-        var blurStyle =
-          placeholder === "blur"
-            ? {
-                filter: "blur(20px)",
-                backgroundSize: objectFit || "cover",
-                backgroundImage: 'url("'.concat(blurDataURL, '")'),
-                backgroundPosition: objectPosition || "0% 0%"
-              }
-            : {};
-        if (layout === "fill") {
-          // <Image src="i.png" layout="fill" />
-          wrapperStyle.display = "block";
-          wrapperStyle.position = "absolute";
-          wrapperStyle.top = 0;
-          wrapperStyle.left = 0;
-          wrapperStyle.bottom = 0;
-          wrapperStyle.right = 0;
-        } else if (
-          typeof widthInt !== "undefined" &&
-          typeof heightInt !== "undefined"
-        ) {
-          // <Image src="i.png" width="100" height="100" />
-          var quotient = heightInt / widthInt;
-          var paddingTop = isNaN(quotient)
-            ? "100%"
-            : "".concat(quotient * 100, "%");
-          if (layout === "responsive") {
-            // <Image src="i.png" width="100" height="100" layout="responsive" />
-            wrapperStyle.display = "block";
-            wrapperStyle.position = "relative";
-            hasSizer = true;
-            sizerStyle.paddingTop = paddingTop;
-          } else if (layout === "intrinsic") {
-            // <Image src="i.png" width="100" height="100" layout="intrinsic" />
-            wrapperStyle.display = "inline-block";
-            wrapperStyle.position = "relative";
-            wrapperStyle.maxWidth = "100%";
-            hasSizer = true;
-            sizerStyle.maxWidth = "100%";
-            sizerSvgUrl = "data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27"
-              .concat(widthInt, "%27%20height=%27")
-              .concat(heightInt, "%27/%3e");
-          } else if (layout === "fixed") {
-            // <Image src="i.png" width="100" height="100" layout="fixed" />
-            wrapperStyle.display = "inline-block";
-            wrapperStyle.position = "relative";
-            wrapperStyle.width = widthInt;
-            wrapperStyle.height = heightInt;
-          }
-        } else {
-          // <Image src="i.png" />
-          if (false) {
-          }
-        }
-        var imgAttributes = {
-          src: emptyDataURL,
-          srcSet: undefined,
-          sizes: undefined
-        };
-        if (isVisible) {
-          imgAttributes = generateImgAttrs({
-            config: config,
-            src: src,
-            unoptimized: unoptimized,
-            layout: layout,
-            width: widthInt,
-            quality: qualityInt,
-            sizes: sizes,
-            loader: loader
-          });
-        }
-        var srcString = src;
-        if (false) {
-          var fullUrl;
-        }
-        var imageSrcSetPropName = "imagesrcset";
-        var imageSizesPropName = "imagesizes";
-        if (false) {
-        }
-        var _obj;
-        var linkProps =
-          ((_obj = {}), // Note: imagesrcset and imagesizes are not in the link element type with react 17.
-          _defineProperty(_obj, imageSrcSetPropName, imgAttributes.srcSet),
-          _defineProperty(_obj, imageSizesPropName, imgAttributes.sizes),
-          _obj);
-        var useLayoutEffect = false ? 0 : _react.default.useLayoutEffect;
-        var onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
-        (0, _react).useEffect(
-          function() {
-            onLoadingCompleteRef.current = onLoadingComplete;
-          },
-          [onLoadingComplete]
-        );
-        useLayoutEffect(
-          function() {
-            setIntersection(imgRef.current);
-          },
-          [setIntersection]
-        );
-        (0, _react).useEffect(
-          function() {
-            handleLoading(
-              imgRef,
-              srcString,
-              layout,
-              placeholder,
-              onLoadingCompleteRef
-            );
-          },
-          [srcString, layout, placeholder, isVisible]
-        );
         return /*#__PURE__*/ _react.default.createElement(
-          "span",
-          {
-            style: wrapperStyle
-          },
-          hasSizer
-            ? /*#__PURE__*/ _react.default.createElement(
-                "span",
-                {
-                  style: sizerStyle
-                },
-                sizerSvgUrl
-                  ? /*#__PURE__*/ _react.default.createElement("img", {
-                      style: {
-                        display: "block",
-                        maxWidth: "100%",
-                        width: "initial",
-                        height: "initial",
-                        background: "none",
-                        opacity: 1,
-                        border: 0,
-                        margin: 0,
-                        padding: 0
-                      },
-                      alt: "",
-                      "aria-hidden": true,
-                      src: sizerSvgUrl
-                    })
-                  : null
-              )
-            : null,
+          _react.default.Fragment,
+          null,
           /*#__PURE__*/ _react.default.createElement(
             "img",
-            Object.assign({}, rest, imgAttributes, {
-              decoding: "async",
-              "data-nimg": layout,
-              className: className,
-              ref: imgRef,
-              style: _objectSpread({}, imgStyle, blurStyle)
-            })
+            Object.assign(
+              {},
+              rest,
+              imgAttributes,
+              layout === "raw" && !sizes
+                ? {
+                    height: heightInt,
+                    width: widthInt
+                  }
+                : {},
+              {
+                decoding: "async",
+                "data-nimg": layout,
+                className: className,
+                ref: imgRef,
+                style: _objectSpread({}, imgStyle, blurStyle)
+              }
+            )
           ),
-          isLazy &&
+          (isLazy || placeholder === "blur") &&
             /*#__PURE__*/ _react.default.createElement(
               "noscript",
               null,
@@ -796,7 +939,7 @@
                   rest,
                   generateImgAttrs({
                     config: config,
-                    src: src,
+                    src: srcString,
                     unoptimized: unoptimized,
                     layout: layout,
                     width: widthInt,
@@ -804,6 +947,12 @@
                     sizes: sizes,
                     loader: loader
                   }),
+                  layout === "raw" && !sizes
+                    ? {
+                        height: heightInt,
+                        width: widthInt
+                      }
+                    : {},
                   {
                     decoding: "async",
                     "data-nimg": layout,
@@ -814,34 +963,9 @@
                   }
                 )
               )
-            ),
-          priority // for browsers that do not support `imagesrcset`, and in those cases
-            ? // it would likely cause the incorrect image to be preloaded.
-              //
-              // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
-              /*#__PURE__*/ _react.default.createElement(
-                _head.default,
-                null,
-                /*#__PURE__*/ _react.default.createElement(
-                  "link",
-                  Object.assign(
-                    {
-                      key:
-                        "__nimg-" +
-                        imgAttributes.src +
-                        imgAttributes.srcSet +
-                        imgAttributes.sizes,
-                      rel: "preload",
-                      as: "image",
-                      href: imgAttributes.srcSet ? undefined : imgAttributes.src
-                    },
-                    linkProps
-                  )
-                )
-              )
-            : null
+            )
         );
-      }
+      };
       function normalizeSrc(src) {
         return src[0] === "/" ? src.slice(1) : src;
       }
@@ -909,7 +1033,12 @@
           return src;
         }
         return ""
-          .concat(config.path, "?url=")
+          .concat(
+            (0, _normalizeTrailingSlash).normalizePathTrailingSlash(
+              config.path
+            ),
+            "?url="
+          )
           .concat(encodeURIComponent(src), "&w=")
           .concat(width, "&q=")
           .concat(quality || 75);
@@ -918,7 +1047,7 @@
       /***/
     },
 
-    /***/ 7190: /***/ function(
+    /***/ 9246: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -991,7 +1120,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(7294);
-      var _requestIdleCallback = __webpack_require__(9311);
+      var _requestIdleCallback = __webpack_require__(4686);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -1123,7 +1252,7 @@
       /***/
     },
 
-    /***/ 3155: /***/ function(
+    /***/ 3143: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1177,7 +1306,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8045);
+      module.exports = __webpack_require__(9749);
 
       /***/
     }

Diff for index-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function() {
-          return __webpack_require__(3678);
+          return __webpack_require__(4369);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3678: /***/ function(
+    /***/ 4369: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for link-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function() {
-          return __webpack_require__(4380);
+          return __webpack_require__(9798);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8418: /***/ function(
+    /***/ 1551: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -100,9 +100,9 @@
       };
       exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _router = __webpack_require__(6273);
-      var _router1 = __webpack_require__(387);
-      var _useIntersection = __webpack_require__(7190);
+      var _router = __webpack_require__(1003);
+      var _router1 = __webpack_require__(880);
+      var _useIntersection = __webpack_require__(9246);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -322,7 +322,7 @@
       /***/
     },
 
-    /***/ 7190: /***/ function(
+    /***/ 9246: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,7 +395,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(7294);
-      var _requestIdleCallback = __webpack_require__(9311);
+      var _requestIdleCallback = __webpack_require__(4686);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
         var rootRef = param.rootRef,
@@ -527,7 +527,7 @@
       /***/
     },
 
-    /***/ 4380: /***/ function(
+    /***/ 9798: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -577,7 +577,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8418);
+      module.exports = __webpack_require__(1551);
 
       /***/
     }

Diff for routerDirect-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function() {
-          return __webpack_require__(6870);
+          return __webpack_require__(1271);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6870: /***/ function(
+    /***/ 1271: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -59,7 +59,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(387);
+      module.exports = __webpack_require__(880);
 
       /***/
     }

Diff for script-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function() {
-          return __webpack_require__(549);
+          return __webpack_require__(6103);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 549: /***/ function(
+    /***/ 6103: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -72,7 +72,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(699);
+      module.exports = __webpack_require__(3573);
 
       /***/
     }

Diff for withRouter-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function() {
-          return __webpack_require__(5330);
+          return __webpack_require__(8374);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5330: /***/ function(
+    /***/ 8374: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -56,7 +56,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(387);
+      module.exports = __webpack_require__(880);
 
       /***/
     }

Diff for 450.HASH.js

@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [450],
+  [925],
   {
-    /***/ 6450: /***/ function(
+    /***/ 3925: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Diff for main-HASH.js

Diff too large to display

Diff for webpack-HASH.js

@@ -159,7 +159,7 @@
     /******/ __webpack_require__.u = function(chunkId) {
       /******/ // return url for filenames based on template
       /******/ return (
-        "static/chunks/" + chunkId + "." + "f074c64230165a22" + ".js"
+        "static/chunks/" + chunkId + "." + "ba981b51693b362c" + ".js"
       );
       /******/
     };

Diff for index.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-4259f1e5fe92b2fa.js"
+      src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-cb462a64d04fefb5.js"
+      src="/_next/static/chunks/main-3c52cb182cbdbcfa.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-81e9c7126411d04e.js"
+      src="/_next/static/chunks/pages/_app-71642a8ccc3189c6.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/index-22405fb865808942.js"
+      src="/_next/static/chunks/pages/index-7dee323746710646.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for link.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-4259f1e5fe92b2fa.js"
+      src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-cb462a64d04fefb5.js"
+      src="/_next/static/chunks/main-3c52cb182cbdbcfa.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-81e9c7126411d04e.js"
+      src="/_next/static/chunks/pages/_app-71642a8ccc3189c6.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-e104229636aa11ef.js"
+      src="/_next/static/chunks/pages/link-817796f8884509a8.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>

Diff for withRouter.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-4259f1e5fe92b2fa.js"
+      src="/_next/static/chunks/webpack-3056e3dc42986fee.js"
       defer=""
     ></script>
     <script
@@ -19,15 +19,15 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-cb462a64d04fefb5.js"
+      src="/_next/static/chunks/main-3c52cb182cbdbcfa.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-81e9c7126411d04e.js"
+      src="/_next/static/chunks/pages/_app-71642a8ccc3189c6.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-d7559b7591922e47.js"
+      src="/_next/static/chunks/pages/withRouter-1285f0be62775073.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.1-canary.12"
+      "version": "12.1.1-canary.13"
     }

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

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "eslint-config-next",
-      "version": "12.1.1-canary.12",
+      "version": "12.1.1-canary.13",
       "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.1-canary.12",
+        "@next/eslint-plugin-next": "12.1.1-canary.13",
         "@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.1-canary.12",
+      "version": "12.1.1-canary.13",
       "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.1-canary.12",
+      "version": "12.1.1-canary.13",
       "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 `52e34ce`

ijjk commented on `52e34ce` Mar 17, 2022

Commit

There are no files selected for viewing

1 comment on commit 52e34ce

ijjk commented on 52e34ce Mar 17, 2022

Choose a reason for hiding this comment

Stats from current release

Diffs

Diffs

1 comment on commit `52e34ce`

ijjk commented on `52e34ce` Mar 17, 2022