Skip to content

Commit

Permalink
Add note about improved CSS parser for styled-jsx to upgrading guide (#…
Browse files Browse the repository at this point in the history 
…30280)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
  • Loading branch information
@timneutkens
timneutkens committed Oct 25, 2021
1 parent 04296ce commit f5b7bac
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions docs/upgrading.md
View file
Expand Up @@ -38,6 +38,12 @@ module.exports = {

Minification using SWC is an opt-in flag to ensure it can be tested against more real-world Next.js applications before it becomes the default in Next.js 12.1. If you have feedback about minification, please leave it on [the feedback thread](https://github.com/vercel/next.js/discussions/30237).

### Improvements to styled-jsx CSS parsing

On top of the Rust-based compiler we've implemented a new CSS parser based on the CSS parser that was used for the styled-jsx Babel transform. This new parser has improved handling of CSS and now errors when invalid CSS is used that would previously slip through and cause unexpected behavior.

Because of this change invalid CSS will throw an error during development and `next build`. This change only affects styled-jsx usage.

### `next/image` changed wrapping element

`next/image` now renders the `<img>` inside a `<span>` instead of `<div>`.
Expand Down

1 comment on commit f5b7bac

@ijjk
Copy link
Member

@ijjk ijjk commented on f5b7bac Oct 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stats from current release

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
buildDuration 13.6s 17.5s ⚠️ +3.9s
buildDurationCached 3.1s 3.5s ⚠️ +388ms
nodeModulesSize 188 MB 475 MB ⚠️ +287 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.454 2.903 ⚠️ +0.45
/ avg req/sec 1018.66 861.2 ⚠️ -157.46
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.373 1.389 ⚠️ +0.02
/error-in-render avg req/sec 1820.26 1799.47 ⚠️ -20.79
Client Bundles (main, webpack, commons) Overall increase ⚠️
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
745.7ed1cb1c..5318.js gzip 179 B 179 B ✓
framework-71..f2a5.js gzip 42.2 kB 42.2 kB ✓
main-8d15616..1c02.js gzip 23.3 kB N/A N/A
webpack-3099..4a93.js gzip 1.45 kB 1.45 kB -5 B
main-HASH.js gzip N/A 27.7 kB N/A
Overall change 67.2 kB 71.5 kB ⚠️ +4.38 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
polyfills-a4..dd70.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
_app-1a580dc..f58d.js gzip 979 B N/A N/A
_error-eb7f7..f5e2.js gzip 194 B 194 B ✓
amp-18c39d4d..fb77.js gzip 312 B 312 B ✓
css-9550cdeb..a51d.js gzip 329 B 327 B -2 B
dynamic-5510..751b.js gzip 2.67 kB N/A N/A
head-8988821..8015.js gzip 351 B 350 B -1 B
hooks-7adae1..a481.js gzip 918 B N/A N/A
image-844e99..e8b2.js gzip 4.14 kB N/A N/A
index-2c52ae..ba4f.js gzip 261 B 263 B ⚠️ +2 B
link-a2915f7..77d5.js gzip 1.66 kB N/A N/A
routerDirect..049d.js gzip 318 B 321 B ⚠️ +3 B
script-12558..f5c9.js gzip 387 B 383 B -4 B
withRouter-4..cd4a.js gzip 320 B 318 B -2 B
bb14e60e810b..30f.css gzip 125 B N/A N/A
_app-HASH.js gzip N/A 1.23 kB N/A
dynamic-HASH.js gzip N/A 2.38 kB N/A
hooks-HASH.js gzip N/A 635 B N/A
image-HASH.js gzip N/A 4.44 kB N/A
link-HASH.js gzip N/A 1.87 kB N/A
334f979574ae..6f4.css gzip N/A 106 B N/A
Overall change 13 kB 13.1 kB ⚠️ +166 B
Client Build Manifests Overall decrease ✓
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
_buildManifest.js gzip 491 B 459 B -32 B
Overall change 491 B 459 B -32 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
index.html gzip 540 B 534 B -6 B
link.html gzip 551 B 546 B -5 B
withRouter.html gzip 534 B 528 B -6 B
Overall change 1.63 kB 1.61 kB -17 B

Diffs

Diff for _buildManifest.js 
@@ -1,33 +1,25 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-952afde7a0f218c22632.js"],
-  "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-aca5c6cfba3e93349d16.js"
-  ],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-f1231d3934d9bf52872b.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-22405fb865808942.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-97db2c91e74bb63f.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
   "/css": [
-    "static\u002Fcss\u002F59de118426c393f58653.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-93a777c5ca0488084cce.js"
+    "static\u002Fcss\u002F7edf9ee7c3885268.css",
+    "static\u002Fchunks\u002Fpages\u002Fcss-99ad492aad2c14e4.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-9e2274fd3ecd928533ad.js"
-  ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-1b407c3309821b5154c2.js"],
-  "/hooks": [
-    "static\u002Fchunks\u002Fpages\u002Fhooks-f6efb8a484d4a96e150c.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-0ead1841ed0002db.js"
   ],
-  "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-44a80ed2baebfb52799e.js"
-  ],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f62bdaa581311495bb85.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-c60c37af3228a150.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-7c1b586d4417a78806e3.js"
-  ],
-  "/script": [
-    "static\u002Fchunks\u002Fpages\u002Fscript-21c58b10eb53d5b2389e.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
   ],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-52713a82413f16bb.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-072a37cc0c889cd17738.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-50f69b5840cc7abf.js"
   ],
   sortedPages: [
     "\u002F",
Diff for _app-49ca463..f4c42f3ec.js 
deleted
Diff for _app-HASH.js 
@@ -0,0 +1,268 @@
+(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
+  [888],
+  {
+    /***/ 915: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/_app",
+        function() {
+          return __webpack_require__(6029);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 6029: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      var _regeneratorRuntime = _interopRequireDefault(
+        __webpack_require__(5666)
+      );
+      function _assertThisInitialized(self) {
+        if (self === void 0) {
+          throw new ReferenceError(
+            "this hasn't been initialised - super() hasn't been called"
+          );
+        }
+        return self;
+      }
+      function _classCallCheck(instance, Constructor) {
+        if (!(instance instanceof Constructor)) {
+          throw new TypeError("Cannot call a class as a function");
+        }
+      }
+      function _defineProperties(target, props) {
+        for (var i = 0; i < props.length; i++) {
+          var descriptor = props[i];
+          descriptor.enumerable = descriptor.enumerable || false;
+          descriptor.configurable = true;
+          if ("value" in descriptor) descriptor.writable = true;
+          Object.defineProperty(target, descriptor.key, descriptor);
+        }
+      }
+      function _createClass(Constructor, protoProps, staticProps) {
+        if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+        if (staticProps) _defineProperties(Constructor, staticProps);
+        return Constructor;
+      }
+      function _getPrototypeOf(o) {
+        _getPrototypeOf = Object.setPrototypeOf
+          ? Object.getPrototypeOf
+          : function _getPrototypeOf(o) {
+              return o.__proto__ || Object.getPrototypeOf(o);
+            };
+        return _getPrototypeOf(o);
+      }
+      function _inherits(subClass, superClass) {
+        if (typeof superClass !== "function" && superClass !== null) {
+          throw new TypeError(
+            "Super expression must either be null or a function"
+          );
+        }
+        subClass.prototype = Object.create(superClass && superClass.prototype, {
+          constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+          }
+        });
+        if (superClass) _setPrototypeOf(subClass, superClass);
+      }
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+      function _possibleConstructorReturn(self, call) {
+        if (
+          call &&
+          (_typeof(call) === "object" || typeof call === "function")
+        ) {
+          return call;
+        }
+        return _assertThisInitialized(self);
+      }
+      function _setPrototypeOf(o, p) {
+        _setPrototypeOf =
+          Object.setPrototypeOf ||
+          function _setPrototypeOf(o, p) {
+            o.__proto__ = p;
+            return o;
+          };
+        return _setPrototypeOf(o, p);
+      }
+      var _typeof = function(obj) {
+        return obj &&
+          typeof Symbol !== "undefined" &&
+          obj.constructor === Symbol
+          ? "symbol"
+          : typeof obj;
+      };
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      Object.defineProperty(exports, "AppInitialProps", {
+        enumerable: true,
+        get: function get() {
+          return _utils.AppInitialProps;
+        }
+      });
+      Object.defineProperty(exports, "NextWebVitalsMetric", {
+        enumerable: true,
+        get: function get() {
+          return _utils.NextWebVitalsMetric;
+        }
+      });
+      exports["default"] = void 0;
+      var _react = _interopRequireDefault1(__webpack_require__(7294));
+      var _utils = __webpack_require__(3794);
+      function asyncGeneratorStep(
+        gen,
+        resolve,
+        reject,
+        _next,
+        _throw,
+        key,
+        arg
+      ) {
+        try {
+          var info = gen[key](arg);
+          var value = info.value;
+        } catch (error) {
+          reject(error);
+          return;
+        }
+        if (info.done) {
+          resolve(value);
+        } else {
+          Promise.resolve(value).then(_next, _throw);
+        }
+      }
+      function _asyncToGenerator(fn) {
+        return function() {
+          var self = this,
+            args = arguments;
+          return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+              asyncGeneratorStep(
+                gen,
+                resolve,
+                reject,
+                _next,
+                _throw,
+                "next",
+                value
+              );
+            }
+            function _throw(err) {
+              asyncGeneratorStep(
+                gen,
+                resolve,
+                reject,
+                _next,
+                _throw,
+                "throw",
+                err
+              );
+            }
+            _next(undefined);
+          });
+        };
+      }
+      function _interopRequireDefault1(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
+      function _appGetInitialProps() {
+        _appGetInitialProps = /**
+         * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
+         * This allows for keeping state between navigation, custom error handling, injecting additional data.
+         */ _asyncToGenerator(
+          _regeneratorRuntime.default.mark(function _callee(param) {
+            var Component = param.Component,
+              ctx = param.ctx;
+            var pageProps;
+            return _regeneratorRuntime.default.wrap(function _callee$(_ctx) {
+              while (1)
+                switch ((_ctx.prev = _ctx.next)) {
+                  case 0:
+                    _ctx.next = 2;
+                    return (0, _utils).loadGetInitialProps(Component, ctx);
+                  case 2:
+                    pageProps = _ctx.sent;
+                    return _ctx.abrupt("return", {
+                      pageProps: pageProps
+                    });
+                  case 4:
+                  case "end":
+                    return _ctx.stop();
+                }
+            }, _callee);
+          })
+        );
+        return _appGetInitialProps.apply(this, arguments);
+      }
+      function appGetInitialProps(_) {
+        return _appGetInitialProps.apply(this, arguments);
+      }
+      var App = /*#__PURE__*/ (function(_Component) {
+        _inherits(App, _Component);
+        function App() {
+          _classCallCheck(this, App);
+          return _possibleConstructorReturn(
+            this,
+            _getPrototypeOf(App).apply(this, arguments)
+          );
+        }
+        _createClass(App, [
+          {
+            key: "render",
+            value: function render() {
+              var _props = this.props,
+                Component = _props.Component,
+                pageProps = _props.pageProps;
+              return /*#__PURE__*/ _react.default.createElement(
+                Component,
+                Object.assign({}, pageProps)
+              );
+            }
+          }
+        ]);
+        return App;
+      })(_react.default.Component);
+      App.origGetInitialProps = appGetInitialProps;
+      App.getInitialProps = appGetInitialProps;
+      exports["default"] = App; //# sourceMappingURL=_app.js.map
+
+      /***/
+    }
+  },
+  /******/ function(__webpack_require__) {
+    // webpackRuntimeModules
+    /******/ var __webpack_exec__ = function(moduleId) {
+      return __webpack_require__((__webpack_require__.s = moduleId));
+    };
+    /******/ __webpack_require__.O(0, [774, 179], function() {
+      return __webpack_exec__(915), __webpack_exec__(387);
+    });
+    /******/ var __webpack_exports__ = __webpack_require__.O();
+    /******/ _N_E = __webpack_exports__;
+    /******/
+  }
+]);
Diff for _error-aca5c..e93349d16.js 
@@ -9,9 +9,11 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(3359);
+          return __webpack_require__(9185);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     }
Diff for amp-f1231d39..9bf52872b.js 
@@ -6,12 +6,29 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3237);
+      module.exports = __webpack_require__(3240);
 
       /***/
     },
 
-    /***/ 6739: /***/ function(
+    /***/ 6071: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/amp",
+        function() {
+          return __webpack_require__(1910);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 1910: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -40,21 +57,6 @@
           : "normal mode";
       }
 
-      /***/
-    },
-
-    /***/ 6071: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/amp",
-        function() {
-          return __webpack_require__(6739);
-        }
-      ]);
-
       /***/
     }
   },
Diff for css-93a777c5..488084cce.js 
@@ -1,53 +1,54 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [706],
   {
-    /***/ 5409: /***/ function(
+    /***/ 7083: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/css",
+        function() {
+          return __webpack_require__(5089);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 5089: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
     ) {
       "use strict";
       __webpack_require__.r(__webpack_exports__);
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
+        5893
+      );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        5964
+        3350
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
       );
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        5893
-      );
 
-      var Page = function Page() {
-        return /*#__PURE__*/ (0,
+      var Page = function() {
+        /*#__PURE__*/ return (0,
         react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
           className: _css_module_css__WEBPACK_IMPORTED_MODULE_1___default()
             .helloWorld,
-          children: "Hello world \uD83D\uDC4B"
+          children: "Hello world 👋"
         });
       };
-
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
     },
 
-    /***/ 7083: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/css",
-        function() {
-          return __webpack_require__(5409);
-        }
-      ]);
-
-      /***/
-    },
-
-    /***/ 5964: /***/ function(module) {
+    /***/ 3350: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__2Fhmt" };
Diff for dynamic-9e22..d928533ad.js 
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 8771: /***/ function(
+    /***/ 1893: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/dynamic",
+        function() {
+          return __webpack_require__(3286);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 638: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -9,57 +26,54 @@
       "use strict";
       var __webpack_unused_export__;
 
-      var _defineProperty = __webpack_require__(9713);
-
-      function ownKeys(object, enumerableOnly) {
-        var keys = Object.keys(object);
-        if (Object.getOwnPropertySymbols) {
-          var symbols = Object.getOwnPropertySymbols(object);
-          if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-          }
-          keys.push.apply(keys, symbols);
+      function _defineProperty(obj, key, value) {
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+        return obj;
+      }
+      function _instanceof(left, right) {
+        if (
+          right != null &&
+          typeof Symbol !== "undefined" &&
+          right[Symbol.hasInstance]
+        ) {
+          return right[Symbol.hasInstance](left);
+        } else {
+          return left instanceof right;
         }
-        return keys;
       }
-
       function _objectSpread(target) {
         for (var i = 1; i < arguments.length; i++) {
           var source = arguments[i] != null ? arguments[i] : {};
-          if (i % 2) {
-            ownKeys(Object(source), true).forEach(function(key) {
-              _defineProperty(target, key, source[key]);
-            });
-          } else if (Object.getOwnPropertyDescriptors) {
-            Object.defineProperties(
-              target,
-              Object.getOwnPropertyDescriptors(source)
+          var ownKeys = Object.keys(source);
+          if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(
+              Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+              })
             );
-          } else {
-            ownKeys(Object(source)).forEach(function(key) {
-              Object.defineProperty(
-                target,
-                key,
-                Object.getOwnPropertyDescriptor(source, key)
-              );
-            });
           }
+          ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+          });
         }
         return target;
       }
-
       __webpack_unused_export__ = {
         value: true
       };
       __webpack_unused_export__ = noSSR;
-      exports.default = dynamic;
-
+      exports["default"] = dynamic;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-
-      var _loadable = _interopRequireDefault(__webpack_require__(4860));
-
+      var _loadable = _interopRequireDefault(__webpack_require__(4302));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -67,22 +81,19 @@
               default: obj
             };
       }
-
-      var isServerSide = false;
-
+      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
-
+        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
-
+        var Loading = loadableOptions.loading;
+        // This will only be rendered on the server side
         return function() {
-          return /*#__PURE__*/ _react["default"].createElement(Loading, {
+          /*#__PURE__*/ return _react.default.createElement(Loading, {
             error: null,
             isLoading: true,
             pastDelay: false,
@@ -90,46 +101,38 @@
           });
         };
       }
-
       function dynamic(dynamicOptions, options) {
-        var loadableFn = _loadable["default"];
+        var loadableFn = _loadable.default;
         var loadableOptions = {
           // A loading component is not required, so we default it
-          loading: function loading(_ref) {
-            var error = _ref.error,
-              isLoading = _ref.isLoading,
-              pastDelay = _ref.pastDelay;
+          loading: function(param) {
+            var error = param.error,
+              isLoading = param.isLoading,
+              pastDelay = param.pastDelay;
             if (!pastDelay) return null;
-
             if (false) {
             }
-
             return null;
           }
-        }; // Support for direct import(), eg: dynamic(import('../hello-world'))
+        };
+        // Support for direct import(), eg: dynamic(import('../hello-world'))
         // Note that this is only kept for the edge case where someone is passing in a promise as first argument
         // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world'))
         // To make sure we don't execute the import without rendering first
-
-        if (dynamicOptions instanceof Promise) {
+        if (_instanceof(dynamicOptions, Promise)) {
           loadableOptions.loader = function() {
             return dynamicOptions;
-          }; // Support for having import as a function, eg: dynamic(() => import('../hello-world'))
+          };
+          // Support for having import as a function, eg: dynamic(() => import('../hello-world'))
         } else if (typeof dynamicOptions === "function") {
-          loadableOptions.loader = dynamicOptions; // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
+          loadableOptions.loader = dynamicOptions;
+          // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
         } else if (typeof dynamicOptions === "object") {
-          loadableOptions = _objectSpread(
-            _objectSpread({}, loadableOptions),
-            dynamicOptions
-          );
-        } // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
-
-        loadableOptions = _objectSpread(
-          _objectSpread({}, loadableOptions),
-          options
-        );
+          loadableOptions = _objectSpread({}, loadableOptions, dynamicOptions);
+        }
+        // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
+        loadableOptions = _objectSpread({}, loadableOptions, options);
         var suspenseOptions = loadableOptions;
-
         if (true) {
           // Error if react root is not enabled and `suspense` option is set to true
           if (true && suspenseOptions.suspense) {
@@ -139,35 +142,33 @@
             );
           }
         }
-
         if (suspenseOptions.suspense) {
           return loadableFn(suspenseOptions);
-        } // coming from build/babel/plugins/react-loadable-plugin.js
-
+        }
+        // coming from build/babel/plugins/react-loadable-plugin.js
         if (loadableOptions.loadableGenerated) {
           loadableOptions = _objectSpread(
-            _objectSpread({}, loadableOptions),
+            {},
+            loadableOptions,
             loadableOptions.loadableGenerated
           );
           delete loadableOptions.loadableGenerated;
-        } // support for disabling server side rendering, eg: dynamic(import('../hello-world'), {ssr: false})
-
+        }
+        // support for disabling server side rendering, eg: dynamic(import('../hello-world'), {ssr: false})
         if (typeof loadableOptions.ssr === "boolean") {
           if (!loadableOptions.ssr) {
             delete loadableOptions.ssr;
             return noSSR(loadableFn, loadableOptions);
           }
-
           delete loadableOptions.ssr;
         }
-
         return loadableFn(loadableOptions);
-      }
+      } //# sourceMappingURL=dynamic.js.map
 
       /***/
     },
 
-    /***/ 1083: /***/ function(
+    /***/ 6319: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -178,9 +179,7 @@
         value: true
       });
       exports.LoadableContext = void 0;
-
       var _react = _interopRequireDefault(__webpack_require__(7294));
-
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -188,156 +187,77 @@
               default: obj
             };
       }
-
-      var LoadableContext = _react["default"].createContext(null);
-
+      var LoadableContext = _react.default.createContext(null);
       exports.LoadableContext = LoadableContext;
-
       if (false) {
-      }
+      } //# sourceMappingURL=loadable-context.js.map
 
       /***/
     },
 
-    /***/ 4860: /***/ function(
+    /***/ 4302: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
     ) {
       "use strict";
 
-      var _classCallCheck = __webpack_require__(4575);
-
-      var _createClass = __webpack_require__(3913);
-
-      var _defineProperty = __webpack_require__(9713);
-
-      function ownKeys(object, enumerableOnly) {
-        var keys = Object.keys(object);
-        if (Object.getOwnPropertySymbols) {
-          var symbols = Object.getOwnPropertySymbols(object);
-          if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-          }
-          keys.push.apply(keys, symbols);
+      function _classCallCheck(instance, Constructor) {
+        if (!(instance instanceof Constructor)) {
+          throw new TypeError("Cannot call a class as a function");
         }
-        return keys;
       }
-
+      function _defineProperties(target, props) {
+        for (var i = 0; i < props.length; i++) {
+          var descriptor = props[i];
+          descriptor.enumerable = descriptor.enumerable || false;
+          descriptor.configurable = true;
+          if ("value" in descriptor) descriptor.writable = true;
+          Object.defineProperty(target, descriptor.key, descriptor);
+        }
+      }
+      function _createClass(Constructor, protoProps, staticProps) {
+        if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+        if (staticProps) _defineProperties(Constructor, staticProps);
+        return Constructor;
+      }
+      function _defineProperty(obj, key, value) {
+        if (key in obj) {
+          Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+          });
+        } else {
+          obj[key] = value;
+        }
+        return obj;
+      }
       function _objectSpread(target) {
         for (var i = 1; i < arguments.length; i++) {
           var source = arguments[i] != null ? arguments[i] : {};
-          if (i % 2) {
-            ownKeys(Object(source), true).forEach(function(key) {
-              _defineProperty(target, key, source[key]);
-            });
-          } else if (Object.getOwnPropertyDescriptors) {
-            Object.defineProperties(
-              target,
-              Object.getOwnPropertyDescriptors(source)
+          var ownKeys = Object.keys(source);
+          if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(
+              Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+              })
             );
-          } else {
-            ownKeys(Object(source)).forEach(function(key) {
-              Object.defineProperty(
-                target,
-                key,
-                Object.getOwnPropertyDescriptor(source, key)
-              );
-            });
           }
+          ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+          });
         }
         return target;
       }
-
-      function _createForOfIteratorHelper(o, allowArrayLike) {
-        var it =
-          (typeof Symbol !== "undefined" && o[Symbol.iterator]) ||
-          o["@@iterator"];
-        if (!it) {
-          if (
-            Array.isArray(o) ||
-            (it = _unsupportedIterableToArray(o)) ||
-            (allowArrayLike && o && typeof o.length === "number")
-          ) {
-            if (it) o = it;
-            var i = 0;
-            var F = function F() {};
-            return {
-              s: F,
-              n: function n() {
-                if (i >= o.length) return { done: true };
-                return { done: false, value: o[i++] };
-              },
-              e: function e(_e) {
-                throw _e;
-              },
-              f: F
-            };
-          }
-          throw new TypeError(
-            "Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-          );
-        }
-        var normalCompletion = true,
-          didErr = false,
-          err;
-        return {
-          s: function s() {
-            it = it.call(o);
-          },
-          n: function n() {
-            var step = it.next();
-            normalCompletion = step.done;
-            return step;
-          },
-          e: function e(_e2) {
-            didErr = true;
-            err = _e2;
-          },
-          f: function f() {
-            try {
-              if (!normalCompletion && it["return"] != null) it["return"]();
-            } finally {
-              if (didErr) throw err;
-            }
-          }
-        };
-      }
-
-      function _unsupportedIterableToArray(o, minLen) {
-        if (!o) return;
-        if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-        var n = Object.prototype.toString.call(o).slice(8, -1);
-        if (n === "Object" && o.constructor) n = o.constructor.name;
-        if (n === "Map" || n === "Set") return Array.from(o);
-        if (
-          n === "Arguments" ||
-          /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)
-        )
-          return _arrayLikeToArray(o, minLen);
-      }
-
-      function _arrayLikeToArray(arr, len) {
-        if (len == null || len > arr.length) len = arr.length;
-        for (var i = 0, arr2 = new Array(len); i < len; i++) {
-          arr2[i] = arr[i];
-        }
-        return arr2;
-      }
-
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      exports.default = void 0;
-
+      exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-
       var _useSubscription = __webpack_require__(7161);
-
-      var _loadableContext = __webpack_require__(1083);
-
+      var _loadableContext = __webpack_require__(6319);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -345,11 +265,9 @@
               default: obj
             };
       }
-
       var ALL_INITIALIZERS = [];
       var READY_INITIALIZERS = [];
       var initialized = false;
-
       function load(loader) {
         var promise = loader();
         var state = {
@@ -363,39 +281,18 @@
             state.loaded = loaded;
             return loaded;
           })
-          ["catch"](function(err) {
+          .catch(function(err) {
             state.loading = false;
             state.error = err;
             throw err;
           });
         return state;
       }
-
       function resolve(obj) {
-        return obj && obj.__esModule ? obj["default"] : obj;
+        return obj && obj.__esModule ? obj.default : obj;
       }
-
       function createLoadableComponent(loadFn, options) {
-        var opts = Object.assign(
-          {
-            loader: null,
-            loading: null,
-            delay: 200,
-            timeout: null,
-            webpack: null,
-            modules: null,
-            suspense: false
-          },
-          options
-        );
-
-        if (opts.suspense) {
-          opts.lazy = _react["default"].lazy(opts.loader);
-        }
-
-        var subscription = null;
-
-        function init() {
+        var init = function init() {
           if (!subscription) {
             var sub = new LoadableSubscription(loadFn, opts);
             subscription = {
@@ -405,51 +302,15 @@
               promise: sub.promise.bind(sub)
             };
           }
-
           return subscription.promise();
-        } // Server only
-
-        if (false) {
-        } // Client only
-
-        if (
-          !initialized &&
-          true &&
-          typeof opts.webpack === "function" &&
-          "function" === "function" &&
-          !opts.suspense
-        ) {
-          var moduleIds = opts.webpack();
-          READY_INITIALIZERS.push(function(ids) {
-            var _iterator = _createForOfIteratorHelper(moduleIds),
-              _step;
-
-            try {
-              for (_iterator.s(); !(_step = _iterator.n()).done; ) {
-                var moduleId = _step.value;
-
-                if (ids.indexOf(moduleId) !== -1) {
-                  return init();
-                }
-              }
-            } catch (err) {
-              _iterator.e(err);
-            } finally {
-              _iterator.f();
-            }
-          });
-        }
-
-        function LoadableImpl(props, ref) {
+        };
+        var LoadableImpl = function LoadableImpl(props, ref) {
           init();
-
-          var context = _react["default"].useContext(
+          var context = _react.default.useContext(
             _loadableContext.LoadableContext
           );
-
           var state = (0, _useSubscription).useSubscription(subscription);
-
-          _react["default"].useImperativeHandle(
+          _react.default.useImperativeHandle(
             ref,
             function() {
               return {
@@ -458,17 +319,15 @@
             },
             []
           );
-
           if (context && Array.isArray(opts.modules)) {
             opts.modules.forEach(function(moduleName) {
               context(moduleName);
             });
           }
-
-          return _react["default"].useMemo(
+          return _react.default.useMemo(
             function() {
               if (state.loading || state.error) {
-                return _react["default"].createElement(opts.loading, {
+                return _react.default.createElement(opts.loading, {
                   isLoading: state.loading,
                   pastDelay: state.pastDelay,
                   timedOut: state.timedOut,
@@ -476,7 +335,7 @@
                   retry: subscription.retry
                 });
               } else if (state.loaded) {
-                return _react["default"].createElement(
+                return _react.default.createElement(
                   resolve(state.loaded),
                   props
                 );
@@ -486,35 +345,84 @@
             },
             [props, state]
           );
-        }
-
-        function LazyImpl(props, ref) {
-          return _react["default"].createElement(
+        };
+        var LazyImpl = function LazyImpl(props, ref) {
+          return _react.default.createElement(
             opts.lazy,
-            _objectSpread(
-              _objectSpread({}, props),
-              {},
-              {
-                ref: ref
-              }
-            )
+            _objectSpread({}, props, {
+              ref: ref
+            })
           );
+        };
+        var opts = Object.assign(
+          {
+            loader: null,
+            loading: null,
+            delay: 200,
+            timeout: null,
+            webpack: null,
+            modules: null,
+            suspense: false
+          },
+          options
+        );
+        if (opts.suspense) {
+          opts.lazy = _react.default.lazy(opts.loader);
+        }
+        var subscription = null;
+        // Server only
+        if (false) {
+        }
+        // Client only
+        if (
+          !initialized &&
+          "object" !== "undefined" &&
+          typeof opts.webpack === "function" &&
+          "function" === "function" &&
+          !opts.suspense
+        ) {
+          var moduleIds = opts.webpack();
+          READY_INITIALIZERS.push(function(ids) {
+            var _iteratorNormalCompletion = true,
+              _didIteratorError = false,
+              _iteratorError = undefined;
+            try {
+              for (
+                var _iterator = moduleIds[Symbol.iterator](), _step;
+                !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
+                _iteratorNormalCompletion = true
+              ) {
+                var moduleId = _step.value;
+                if (ids.indexOf(moduleId) !== -1) {
+                  return init();
+                }
+              }
+            } catch (err) {
+              _didIteratorError = true;
+              _iteratorError = err;
+            } finally {
+              try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                  _iterator.return();
+                }
+              } finally {
+                if (_didIteratorError) {
+                  throw _iteratorError;
+                }
+              }
+            }
+          });
         }
-
         var LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
-
         LoadableComponent.preload = function() {
           return !opts.suspense && init();
         };
-
         LoadableComponent.displayName = "LoadableComponent";
-        return _react["default"].forwardRef(LoadableComponent);
+        return _react.default.forwardRef(LoadableComponent);
       }
-
       var LoadableSubscription = /*#__PURE__*/ (function() {
         function LoadableSubscription(loadFn, opts) {
           _classCallCheck(this, LoadableSubscription);
-
           this._loadFn = loadFn;
           this._opts = opts;
           this._callbacks = new Set();
@@ -522,7 +430,6 @@
           this._timeout = null;
           this.retry();
         }
-
         _createClass(LoadableSubscription, [
           {
             key: "promise",
@@ -533,52 +440,48 @@
           {
             key: "retry",
             value: function retry() {
-              var _this = this;
-
+              var _this = this,
+                _this1 = this;
               this._clearTimeouts();
-
               this._res = this._loadFn(this._opts.loader);
               this._state = {
                 pastDelay: false,
                 timedOut: false
               };
-              var res = this._res,
-                opts1 = this._opts;
-
+              var ref = this,
+                res = ref._res,
+                opts = ref._opts;
               if (res.loading) {
-                if (typeof opts1.delay === "number") {
-                  if (opts1.delay === 0) {
+                if (typeof opts.delay === "number") {
+                  if (opts.delay === 0) {
                     this._state.pastDelay = true;
                   } else {
+                    var _this2 = this;
                     this._delay = setTimeout(function() {
-                      _this._update({
+                      _this2._update({
                         pastDelay: true
                       });
-                    }, opts1.delay);
+                    }, opts.delay);
                   }
                 }
-
-                if (typeof opts1.timeout === "number") {
+                if (typeof opts.timeout === "number") {
+                  var _this3 = this;
                   this._timeout = setTimeout(function() {
-                    _this._update({
+                    _this3._update({
                       timedOut: true
                     });
-                  }, opts1.timeout);
+                  }, opts.timeout);
                 }
               }
-
               this._res.promise
                 .then(function() {
                   _this._update({});
-
                   _this._clearTimeouts();
                 })
-                ["catch"](function(_err) {
-                  _this._update({});
-
-                  _this._clearTimeouts();
+                .catch(function(_err) {
+                  _this1._update({});
+                  _this1._clearTimeouts();
                 });
-
               this._update({});
             }
           },
@@ -586,8 +489,8 @@
             key: "_update",
             value: function _update(partial) {
               this._state = _objectSpread(
-                _objectSpread({}, this._state),
                 {},
+                this._state,
                 {
                   error: this._res.error,
                   loaded: this._res.loaded,
@@ -595,7 +498,6 @@
                 },
                 partial
               );
-
               this._callbacks.forEach(function(callback) {
                 return callback();
               });
@@ -617,71 +519,57 @@
           {
             key: "subscribe",
             value: function subscribe(callback) {
-              var _this2 = this;
-
+              var _this = this;
               this._callbacks.add(callback);
-
               return function() {
-                _this2._callbacks["delete"](callback);
+                _this._callbacks.delete(callback);
               };
             }
           }
         ]);
-
         return LoadableSubscription;
       })();
-
-      function Loadable(opts1) {
-        return createLoadableComponent(load, opts1);
+      function Loadable(opts) {
+        return createLoadableComponent(load, opts);
       }
-
       function flushInitializers(initializers, ids) {
         var promises = [];
-
         while (initializers.length) {
           var init = initializers.pop();
           promises.push(init(ids));
         }
-
         return Promise.all(promises).then(function() {
           if (initializers.length) {
             return flushInitializers(initializers, ids);
           }
         });
       }
-
       Loadable.preloadAll = function() {
         return new Promise(function(resolveInitializers, reject) {
           flushInitializers(ALL_INITIALIZERS).then(resolveInitializers, reject);
         });
       };
-
-      Loadable.preloadReady = function() {
-        var ids =
-          arguments.length > 0 && arguments[0] !== undefined
-            ? arguments[0]
-            : [];
+      Loadable.preloadReady = function(param) {
+        var ids = param === void 0 ? [] : param;
         return new Promise(function(resolvePreload) {
-          var res = function res() {
+          var res = function() {
             initialized = true;
             return resolvePreload();
-          }; // We always will resolve, errors should be handled within loading UIs.
-
+          };
+          // We always will resolve, errors should be handled within loading UIs.
           flushInitializers(READY_INITIALIZERS, ids).then(res, res);
         });
       };
-
       if (true) {
         window.__NEXT_PRELOADREADY = Loadable.preloadReady;
       }
-
       var _default = Loadable;
-      exports.default = _default;
+      exports["default"] = _default; //# sourceMappingURL=loadable.js.map
 
       /***/
     },
 
-    /***/ 6598: /***/ function(
+    /***/ 3286: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -694,77 +582,60 @@
         }
         /* harmony export */
       });
-      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        5152
-      );
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
         5893
       );
+      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        5152
+      );
 
-      var DynamicHello = (0, next_dynamic__WEBPACK_IMPORTED_MODULE_0__.default)(
+      var DynamicHello = (0,
+      next_dynamic__WEBPACK_IMPORTED_MODULE_1__["default"])(
         function() {
           return __webpack_require__
-            .e(/* import() */ 745)
-            .then(__webpack_require__.bind(__webpack_require__, 7745));
+            .e(/* import() */ 450)
+            .then(__webpack_require__.bind(__webpack_require__, 6450));
         },
         {
           loadableGenerated: {
-            webpack: function webpack() {
-              return [/*require.resolve*/ 7745];
+            webpack: function() {
+              return [/*require.resolve*/ 6450];
             },
             modules: ["dynamic.js -> " + "../components/hello"]
           }
         }
       );
-
-      var Page = function Page() {
-        return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(
-          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,
+      var Page = function() {
+        /*#__PURE__*/ return (0,
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
           {
             children: [
               /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p", {
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
                 children: "testing next/dynamic size"
               }),
               /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
                 DynamicHello,
                 {}
               )
             ]
           }
         );
-      }; // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-
+      };
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
     },
 
-    /***/ 1893: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/dynamic",
-        function() {
-          return __webpack_require__(6598);
-        }
-      ]);
-
-      /***/
-    },
-
     /***/ 5152: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8771);
+      module.exports = __webpack_require__(638);
 
       /***/
     }
Diff for head-1b407c3..21b5154c2.js 
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
-    /***/ 5816: /***/ function(
+    /***/ 4251: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/head",
+        function() {
+          return __webpack_require__(5423);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 5423: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,66 +31,49 @@
         }
         /* harmony export */
       });
-      /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        9008
-      );
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
         5893
       );
+      /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        9008
+      );
 
-      var Page = function Page() {
-        return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(
-          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,
+      var Page = function() {
+        /*#__PURE__*/ return (0,
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
           {
             children: [
               /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(
-                next_head__WEBPACK_IMPORTED_MODULE_0__.default,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
+                next_head__WEBPACK_IMPORTED_MODULE_1__["default"],
                 {
                   children: /*#__PURE__*/ (0,
-                  react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("title", {
+                  react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("title", {
                     children: "hello world"
                   })
                 }
               ),
               /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p", {
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
                 children: "testing next/head size"
               })
             ]
           }
         );
-      }; // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-
+      };
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
     },
 
-    /***/ 4251: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/head",
-        function() {
-          return __webpack_require__(5816);
-        }
-      ]);
-
-      /***/
-    },
-
     /***/ 9008: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(639);
+      module.exports = __webpack_require__(5443);
 
       /***/
     }
Diff for hooks-HASH.js 
@@ -0,0 +1,147 @@
+(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
+  [757],
+  {
+    /***/ 1470: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/hooks",
+        function() {
+          return __webpack_require__(5017);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 5017: /***/ function(
+      __unused_webpack_module,
+      __webpack_exports__,
+      __webpack_require__
+    ) {
+      "use strict";
+      __webpack_require__.r(__webpack_exports__);
+      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+        /* harmony export */ default: function() {
+          return /* export default binding */ __WEBPACK_DEFAULT_EXPORT__;
+        }
+        /* harmony export */
+      });
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
+        5893
+      );
+      /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        7294
+      );
+
+      function _arrayWithHoles(arr) {
+        if (Array.isArray(arr)) return arr;
+      }
+      function _iterableToArrayLimit(arr, i) {
+        var _arr = [];
+        var _n = true;
+        var _d = false;
+        var _e = undefined;
+        try {
+          for (
+            var _i = arr[Symbol.iterator](), _s;
+            !(_n = (_s = _i.next()).done);
+            _n = true
+          ) {
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+          }
+        } catch (err) {
+          _d = true;
+          _e = err;
+        } finally {
+          try {
+            if (!_n && _i["return"] != null) _i["return"]();
+          } finally {
+            if (_d) throw _e;
+          }
+        }
+        return _arr;
+      }
+      function _nonIterableRest() {
+        throw new TypeError(
+          "Invalid attempt to destructure non-iterable instance"
+        );
+      }
+      function _slicedToArray(arr, i) {
+        return (
+          _arrayWithHoles(arr) ||
+          _iterableToArrayLimit(arr, i) ||
+          _nonIterableRest()
+        );
+      }
+      /* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__() {
+        var ref = _slicedToArray(
+            react__WEBPACK_IMPORTED_MODULE_1__.useState(0),
+            2
+          ),
+          clicks1 = ref[0],
+          setClicks1 = ref[1];
+        var ref1 = (0, react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
+          clicks2 = ref1[0],
+          setClicks2 = ref1[1];
+        var doClick1 = react__WEBPACK_IMPORTED_MODULE_1__.useCallback(
+          function() {
+            setClicks1(clicks1 + 1);
+          },
+          [clicks1]
+        );
+        var doClick2 = (0, react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(
+          function() {
+            setClicks2(clicks2 + 1);
+          },
+          [clicks2]
+        );
+        return /*#__PURE__*/ (0,
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
+          {
+            children: [
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("h3", {
+                children: ["Clicks ", clicks1]
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
+                onClick: doClick1,
+                children: "Click me"
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("h3", {
+                children: ["Clicks ", clicks2]
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {
+                onClick: doClick2,
+                children: "Click me"
+              })
+            ]
+          }
+        );
+      }
+
+      /***/
+    }
+  },
+  /******/ function(__webpack_require__) {
+    // webpackRuntimeModules
+    /******/ var __webpack_exec__ = function(moduleId) {
+      return __webpack_require__((__webpack_require__.s = moduleId));
+    };
+    /******/ __webpack_require__.O(0, [774, 888, 179], function() {
+      return __webpack_exec__(1470);
+    });
+    /******/ var __webpack_exports__ = __webpack_require__.O();
+    /******/ _N_E = __webpack_exports__;
+    /******/
+  }
+]);
Diff for hooks-f6efb8..4a96e150c.js 
deleted
Diff for image-44a80e..bfb52799e.js

Diff too large to display

Diff for index-952afd..218c22632.js 
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [405],
   {
-    /***/ 6124: /***/ function(
+    /***/ 8581: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/",
+        function() {
+          return __webpack_require__(3678);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 3678: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,29 +31,12 @@
         }
         /* harmony export */
       });
-      var Page = function Page() {
+      var Page = function() {
         return "Hello world 👋";
-      }; // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-
+      };
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
-      /***/
-    },
-
-    /***/ 8581: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/",
-        function() {
-          return __webpack_require__(6124);
-        }
-      ]);
-
       /***/
     }
   },
Diff for link-f62bdaa..11495bb85.js 
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [644],
   {
-    /***/ 2167: /***/ function(
+    /***/ 7847: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/link",
+        function() {
+          return __webpack_require__(4380);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 8418: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -9,21 +26,62 @@
       "use strict";
       var __webpack_unused_export__;
 
-      var _slicedToArray = __webpack_require__(3038);
-
+      function _arrayWithHoles(arr) {
+        if (Array.isArray(arr)) return arr;
+      }
+      function _iterableToArrayLimit(arr, i) {
+        var _arr = [];
+        var _n = true;
+        var _d = false;
+        var _e = undefined;
+        try {
+          for (
+            var _i = arr[Symbol.iterator](), _s;
+            !(_n = (_s = _i.next()).done);
+            _n = true
+          ) {
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+          }
+        } catch (err) {
+          _d = true;
+          _e = err;
+        } finally {
+          try {
+            if (!_n && _i["return"] != null) _i["return"]();
+          } finally {
+            if (_d) throw _e;
+          }
+        }
+        return _arr;
+      }
+      function _nonIterableRest() {
+        throw new TypeError(
+          "Invalid attempt to destructure non-iterable instance"
+        );
+      }
+      function _slicedToArray(arr, i) {
+        return (
+          _arrayWithHoles(arr) ||
+          _iterableToArrayLimit(arr, i) ||
+          _nonIterableRest()
+        );
+      }
+      var _typeof = function(obj) {
+        return obj &&
+          typeof Symbol !== "undefined" &&
+          obj.constructor === Symbol
+          ? "symbol"
+          : typeof obj;
+      };
       __webpack_unused_export__ = {
         value: true
       };
-      exports.default = void 0;
-
+      exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-
-      var _router = __webpack_require__(1063);
-
-      var _router1 = __webpack_require__(4651);
-
-      var _useIntersection = __webpack_require__(7426);
-
+      var _router = __webpack_require__(6273);
+      var _router1 = __webpack_require__(387);
+      var _useIntersection = __webpack_require__(7190);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -31,28 +89,25 @@
               default: obj
             };
       }
-
       var prefetched = {};
-
       function prefetch(router, href, as, options) {
         if (false || !router) return;
-        if (!(0, _router).isLocalURL(href)) return; // Prefetch the JSON page if asked (only in the client)
+        if (!(0, _router).isLocalURL(href)) return;
+        // Prefetch the JSON page if asked (only in the client)
         // We need to handle a prefetch error here since we may be
         // loading with priority which can reject but we don't
         // want to force navigation since this is only a prefetch
-
-        router.prefetch(href, as, options)["catch"](function(err) {
+        router.prefetch(href, as, options).catch(function(err) {
           if (false) {
           }
         });
         var curLocale =
           options && typeof options.locale !== "undefined"
             ? options.locale
-            : router && router.locale; // Join on an invalid URI character
-
+            : router && router.locale;
+        // Join on an invalid URI character
         prefetched[href + "%" + as + (curLocale ? "%" + curLocale : "")] = true;
       }
-
       function isModifiedEvent(event) {
         var target = event.currentTarget.target;
         return (
@@ -64,7 +119,6 @@
           (event.nativeEvent && event.nativeEvent.which === 2)
         );
       }
-
       function linkClicked(
         e,
         router,
@@ -76,7 +130,6 @@
         locale
       ) {
         var nodeName = e.currentTarget.nodeName;
-
         if (
           nodeName === "A" &&
           (isModifiedEvent(e) || !(0, _router).isLocalURL(href))
@@ -84,20 +137,18 @@
           // ignore click for browser’s default behavior
           return;
         }
-
-        e.preventDefault(); //  avoid scroll for urls with anchor refs
-
+        e.preventDefault();
+        //  avoid scroll for urls with anchor refs
         if (scroll == null && as.indexOf("#") >= 0) {
           scroll = false;
-        } // replace state instead of push if prop is present
-
+        }
+        // replace state instead of push if prop is present
         router[replace ? "replace" : "push"](href, as, {
           shallow: shallow,
           locale: locale,
           scroll: scroll
         });
       }
-
       function Link(props) {
         if (false) {
           var hasWarned,
@@ -107,21 +158,16 @@
             requiredPropsGuard,
             createPropError;
         }
-
         var p = props.prefetch !== false;
         var router = (0, _router1).useRouter();
-
-        var _react$default$useMem = _react["default"].useMemo(
+        var ref2 = _react.default.useMemo(
             function() {
-              var _resolveHref = (0, _router).resolveHref(
-                  router,
-                  props.href,
-                  true
+              var ref = _slicedToArray(
+                  (0, _router).resolveHref(router, props.href, true),
+                  2
                 ),
-                _resolveHref2 = _slicedToArray(_resolveHref, 2),
-                resolvedHref = _resolveHref2[0],
-                resolvedAs = _resolveHref2[1];
-
+                resolvedHref = ref[0],
+                resolvedAs = ref[1];
               return {
                 href: resolvedHref,
                 as: props.as
@@ -131,43 +177,39 @@
             },
             [router, props.href, props.as]
           ),
-          href = _react$default$useMem.href,
-          as = _react$default$useMem.as;
-
+          href = ref2.href,
+          as = ref2.as;
         var children = props.children,
           replace = props.replace,
           shallow = props.shallow,
           scroll = props.scroll,
-          locale = props.locale; // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
-
+          locale = props.locale;
+        // Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
         if (typeof children === "string") {
-          children = /*#__PURE__*/ _react["default"].createElement(
+          children = /*#__PURE__*/ _react.default.createElement(
             "a",
             null,
             children
           );
-        } // This will return the first child, if multiple are provided it will throw an error
-
+        }
+        // This will return the first child, if multiple are provided it will throw an error
         var child;
-
         if (false) {
         } else {
-          child = _react["default"].Children.only(children);
+          child = _react.default.Children.only(children);
         }
-
         var childRef = child && typeof child === "object" && child.ref;
-
-        var _useIntersection2 = (0, _useIntersection).useIntersection({
-            rootMargin: "200px"
-          }),
-          _useIntersection3 = _slicedToArray(_useIntersection2, 2),
-          setIntersectionRef = _useIntersection3[0],
-          isVisible = _useIntersection3[1];
-
-        var setRef = _react["default"].useCallback(
+        var ref1 = _slicedToArray(
+            (0, _useIntersection).useIntersection({
+              rootMargin: "200px"
+            }),
+            2
+          ),
+          setIntersectionRef = ref1[0],
+          isVisible = ref1[1];
+        var setRef = _react.default.useCallback(
           function(el) {
             setIntersectionRef(el);
-
             if (childRef) {
               if (typeof childRef === "function") childRef(el);
               else if (typeof childRef === "object") {
@@ -177,8 +219,7 @@
           },
           [childRef, setIntersectionRef]
         );
-
-        _react["default"].useEffect(
+        _react.default.useEffect(
           function() {
             var shouldPrefetch =
               isVisible && p && (0, _router).isLocalURL(href);
@@ -186,7 +227,6 @@
               typeof locale !== "undefined" ? locale : router && router.locale;
             var isPrefetched =
               prefetched[href + "%" + as + (curLocale ? "%" + curLocale : "")];
-
             if (shouldPrefetch && !isPrefetched) {
               prefetch(router, href, as, {
                 locale: curLocale
@@ -195,14 +235,12 @@
           },
           [as, href, isVisible, locale, p, router]
         );
-
         var childProps = {
           ref: setRef,
-          onClick: function onClick(e) {
+          onClick: function(e) {
             if (child.props && typeof child.props.onClick === "function") {
               child.props.onClick(e);
             }
-
             if (!e.defaultPrevented) {
               linkClicked(
                 e,
@@ -217,34 +255,31 @@
             }
           }
         };
-
         childProps.onMouseEnter = function(e) {
           if (!(0, _router).isLocalURL(href)) return;
-
           if (child.props && typeof child.props.onMouseEnter === "function") {
             child.props.onMouseEnter(e);
           }
-
           prefetch(router, href, as, {
             priority: true
           });
-        }; // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
+        };
+        // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
         // defined, we specify the current 'href', so that repetition is not needed by the user
-
         if (
           props.passHref ||
           (child.type === "a" && !("href" in child.props))
         ) {
-          var curLocale =
-            typeof locale !== "undefined" ? locale : router && router.locale; // we only render domain locales if we are currently on a domain locale
+          var curLocale1 =
+            typeof locale !== "undefined" ? locale : router && router.locale;
+          // we only render domain locales if we are currently on a domain locale
           // so that locale links are still visitable in development/preview envs
-
           var localeDomain =
             router &&
             router.isLocaleDomain &&
             (0, _router).getDomainLocale(
               as,
-              curLocale,
+              curLocale1,
               router && router.locales,
               router && router.domainLocales
             );
@@ -253,61 +288,89 @@
             (0, _router).addBasePath(
               (0, _router).addLocale(
                 as,
-                curLocale,
+                curLocale1,
                 router && router.defaultLocale
               )
             );
         }
-
-        return /*#__PURE__*/ _react["default"].cloneElement(child, childProps);
+        return /*#__PURE__*/ _react.default.cloneElement(child, childProps);
       }
-
       var _default = Link;
-      exports.default = _default;
+      exports["default"] = _default; //# sourceMappingURL=link.js.map
 
       /***/
     },
 
-    /***/ 7426: /***/ function(
+    /***/ 7190: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
     ) {
       "use strict";
 
-      var _slicedToArray = __webpack_require__(3038);
-
+      function _arrayWithHoles(arr) {
+        if (Array.isArray(arr)) return arr;
+      }
+      function _iterableToArrayLimit(arr, i) {
+        var _arr = [];
+        var _n = true;
+        var _d = false;
+        var _e = undefined;
+        try {
+          for (
+            var _i = arr[Symbol.iterator](), _s;
+            !(_n = (_s = _i.next()).done);
+            _n = true
+          ) {
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+          }
+        } catch (err) {
+          _d = true;
+          _e = err;
+        } finally {
+          try {
+            if (!_n && _i["return"] != null) _i["return"]();
+          } finally {
+            if (_d) throw _e;
+          }
+        }
+        return _arr;
+      }
+      function _nonIterableRest() {
+        throw new TypeError(
+          "Invalid attempt to destructure non-iterable instance"
+        );
+      }
+      function _slicedToArray(arr, i) {
+        return (
+          _arrayWithHoles(arr) ||
+          _iterableToArrayLimit(arr, i) ||
+          _nonIterableRest()
+        );
+      }
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.useIntersection = useIntersection;
-
       var _react = __webpack_require__(7294);
-
-      var _requestIdleCallback = __webpack_require__(3447);
-
+      var _requestIdleCallback = __webpack_require__(9311);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
-
-      function useIntersection(_ref) {
-        var rootMargin = _ref.rootMargin,
-          disabled = _ref.disabled;
+      function useIntersection(param) {
+        var rootMargin = param.rootMargin,
+          disabled = param.disabled;
         var isDisabled = disabled || !hasIntersectionObserver;
         var unobserve = (0, _react).useRef();
-
-        var _useState = (0, _react).useState(false),
-          _useState2 = _slicedToArray(_useState, 2),
-          visible = _useState2[0],
-          setVisible = _useState2[1];
-
+        var ref = _slicedToArray((0, _react).useState(false), 2),
+          visible = ref[0],
+          setVisible = ref[1];
         var setRef = (0, _react).useCallback(
           function(el) {
             if (unobserve.current) {
               unobserve.current();
               unobserve.current = undefined;
             }
-
             if (isDisabled || visible) return;
-
             if (el && el.tagName) {
               unobserve.current = observe(
                 el,
@@ -342,42 +405,35 @@
         );
         return [setRef, visible];
       }
-
       function observe(element, callback, options) {
-        var _createObserver = createObserver(options),
-          id = _createObserver.id,
-          observer = _createObserver.observer,
-          elements = _createObserver.elements;
-
+        var ref = createObserver(options),
+          id = ref.id,
+          observer = ref.observer,
+          elements = ref.elements;
         elements.set(element, callback);
         observer.observe(element);
         return function unobserve() {
-          elements["delete"](element);
-          observer.unobserve(element); // Destroy observer when there's nothing left to watch:
-
+          elements.delete(element);
+          observer.unobserve(element);
+          // Destroy observer when there's nothing left to watch:
           if (elements.size === 0) {
             observer.disconnect();
-            observers["delete"](id);
+            observers.delete(id);
           }
         };
       }
-
       var observers = new Map();
-
       function createObserver(options) {
         var id = options.rootMargin || "";
         var instance = observers.get(id);
-
         if (instance) {
           return instance;
         }
-
         var elements = new Map();
         var observer = new IntersectionObserver(function(entries) {
           entries.forEach(function(entry) {
             var callback = elements.get(entry.target);
             var isVisible = entry.isIntersecting || entry.intersectionRatio > 0;
-
             if (callback && isVisible) {
               callback(isVisible);
             }
@@ -392,12 +448,12 @@
           })
         );
         return instance;
-      }
+      } //# sourceMappingURL=use-intersection.js.map
 
       /***/
     },
 
-    /***/ 647: /***/ function(
+    /***/ 4380: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -410,24 +466,24 @@
         }
         /* harmony export */
       });
-      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        1664
-      );
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
         5893
       );
+      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        1664
+      );
 
       function aLink(props) {
         return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div", {
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
           children: [
             /*#__PURE__*/ (0,
-            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("h3", {
+            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3", {
               children: "A Link page!"
             }),
             /*#__PURE__*/ (0,
-            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(
-              next_link__WEBPACK_IMPORTED_MODULE_0__.default,
+            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
+              next_link__WEBPACK_IMPORTED_MODULE_1__["default"],
               {
                 href: "/",
                 children: "Go to /"
@@ -435,36 +491,19 @@
             )
           ]
         });
-      } // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-
+      }
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = aLink;
 
       /***/
     },
 
-    /***/ 7847: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/link",
-        function() {
-          return __webpack_require__(647);
-        }
-      ]);
-
-      /***/
-    },
-
     /***/ 1664: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2167);
+      module.exports = __webpack_require__(8418);
 
       /***/
     }
Diff for routerDirect..7a78806e3.js 
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [58],
   {
-    /***/ 2163: /***/ function(
+    /***/ 5448: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/routerDirect",
+        function() {
+          return __webpack_require__(6870);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 6870: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,22 +31,21 @@
         }
         /* harmony export */
       });
-      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        1163
-      );
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
         5893
       );
+      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        1163
+      );
+
       /* eslint-disable-next-line */
 
       function routerDirect(props) {
         return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
           children: "I import the router directly"
         });
-      } // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-
+      }
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__[
         "default"
@@ -38,27 +54,12 @@
       /***/
     },
 
-    /***/ 5448: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/routerDirect",
-        function() {
-          return __webpack_require__(2163);
-        }
-      ]);
-
-      /***/
-    },
-
     /***/ 1163: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4651);
+      module.exports = __webpack_require__(387);
 
       /***/
     }
Diff for script-21c58..3d5b2389e.js 
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [797],
   {
-    /***/ 1568: /***/ function(
+    /***/ 5344: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/script",
+        function() {
+          return __webpack_require__(549);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 549: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,26 +31,26 @@
         }
         /* harmony export */
       });
-      /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        4298
-      );
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
         5893
       );
+      /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        4298
+      );
 
-      var Page = function Page() {
-        return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(
-          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,
+      var Page = function() {
+        /*#__PURE__*/ return (0,
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
           {
             children: [
               /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("p", {
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
                 children: "testing next/dynamic size"
               }),
               /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(
-                next_script__WEBPACK_IMPORTED_MODULE_0__.default,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
+                next_script__WEBPACK_IMPORTED_MODULE_1__["default"],
                 {
                   dangerouslySetInnerHTML: {
                     __html: 'console.log("hello")'
@@ -43,36 +60,19 @@
             ]
           }
         );
-      }; // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-
+      };
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
     },
 
-    /***/ 5344: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/script",
-        function() {
-          return __webpack_require__(1568);
-        }
-      ]);
-
-      /***/
-    },
-
     /***/ 4298: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(7926);
+      module.exports = __webpack_require__(699);
 
       /***/
     }
Diff for withRouter-0..89cd17738.js 
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [807],
   {
-    /***/ 6222: /***/ function(
+    /***/ 6744: /***/ function(
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/withRouter",
+        function() {
+          return __webpack_require__(5330);
+        }
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 5330: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,39 +31,22 @@
         }
         /* harmony export */
       });
-      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        1163
-      );
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
         5893
       );
+      /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+        1163
+      );
 
       function useWithRouter(props) {
         return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div", {
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
           children: "I use withRouter"
         });
-      } // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-
+      }
       var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = (0,
-      next_router__WEBPACK_IMPORTED_MODULE_0__.withRouter)(useWithRouter);
-
-      /***/
-    },
-
-    /***/ 6744: /***/ function(
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/withRouter",
-        function() {
-          return __webpack_require__(6222);
-        }
-      ]);
+      next_router__WEBPACK_IMPORTED_MODULE_1__.withRouter)(useWithRouter);
 
       /***/
     },
@@ -56,7 +56,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4651);
+      module.exports = __webpack_require__(387);
 
       /***/
     }
Diff for 745.28433170..33c30eb1c.js 
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [745],
+  [450],
   {
-    /***/ 7745: /***/ function(
+    /***/ 6450: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -18,7 +18,7 @@
         5893
       );
 
-      var Hello = function Hello() {
+      var Hello = function() {
         return /*#__PURE__*/ (0,
         react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
           children: "hello world"
Diff for main-979148a..e4d680da1.js

Diff too large to display

Diff for webpack-e3a4..71df28cf0.js 
@@ -159,7 +159,7 @@
     /******/ __webpack_require__.u = function(chunkId) {
       /******/ // return url for filenames based on template
       /******/ return (
-        "static/chunks/" + chunkId + "." + "284331703de33c30eb1c" + ".js"
+        "static/chunks/" + chunkId + "." + "2f05e31c20cc50e8" + ".js"
       );
       /******/
     };
@@ -171,7 +171,7 @@
     /******/ // This function allow to reference all chunks
     /******/ __webpack_require__.miniCssF = function(chunkId) {
       /******/ // return url for filenames based on template
-      /******/ return "static/css/" + "59de118426c393f58653" + ".css";
+      /******/ return "static/css/" + "7edf9ee7c3885268" + ".css";
       /******/
     };
     /******/
Diff for 59de118426c393f58653.css 
deleted
Diff for 7edf9ee7c3885268.css 
@@ -0,0 +1,4 @@
+.css_helloWorld__2Fhmt {
+  color: green;
+  background: url(/_next/static/media/nextjs.cae0b805.png);
+}
Diff for index.html 
@@ -11,27 +11,31 @@
       src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-e3a4ea5707671df28cf0.js"
+      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-04992f11eed687ecc749.js"
+      src="/_next/static/chunks/framework-535325b9235a831f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-979148a80eee4d680da1.js"
+      src="/_next/static/chunks/main-28619f171130cd0c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-49ca463e4e9f4c42f3ec.js"
+      src="/_next/static/chunks/pages/_app-de3f211ea2b76ae1.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/index-952afde7a0f218c22632.js"
+      src="/_next/static/chunks/pages/index-22405fb865808942.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
     <script src="/_next/static/BUILD_ID/_ssgManifest.js" defer=""></script>
+    <script
+      src="/_next/static/BUILD_ID/_middlewareManifest.js"
+      defer=""
+    ></script>
   </head>
   <body>
     <div id="__next">Hello world 👋</div>
Diff for link.html 
@@ -11,27 +11,31 @@
       src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-e3a4ea5707671df28cf0.js"
+      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-04992f11eed687ecc749.js"
+      src="/_next/static/chunks/framework-535325b9235a831f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-979148a80eee4d680da1.js"
+      src="/_next/static/chunks/main-28619f171130cd0c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-49ca463e4e9f4c42f3ec.js"
+      src="/_next/static/chunks/pages/_app-de3f211ea2b76ae1.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-f62bdaa581311495bb85.js"
+      src="/_next/static/chunks/pages/link-fa969765a079642e.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
     <script src="/_next/static/BUILD_ID/_ssgManifest.js" defer=""></script>
+    <script
+      src="/_next/static/BUILD_ID/_middlewareManifest.js"
+      defer=""
+    ></script>
   </head>
   <body>
     <div id="__next">
Diff for withRouter.html 
@@ -11,27 +11,31 @@
       src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-e3a4ea5707671df28cf0.js"
+      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-04992f11eed687ecc749.js"
+      src="/_next/static/chunks/framework-535325b9235a831f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-979148a80eee4d680da1.js"
+      src="/_next/static/chunks/main-28619f171130cd0c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-49ca463e4e9f4c42f3ec.js"
+      src="/_next/static/chunks/pages/_app-de3f211ea2b76ae1.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-072a37cc0c889cd17738.js"
+      src="/_next/static/chunks/pages/withRouter-50f69b5840cc7abf.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
     <script src="/_next/static/BUILD_ID/_ssgManifest.js" defer=""></script>
+    <script
+      src="/_next/static/BUILD_ID/_middlewareManifest.js"
+      defer=""
+    ></script>
   </head>
   <body>
     <div id="__next"><div>I use withRouter</div></div>
Default Build with SWC (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
buildDuration 9.3s 17.2s ⚠️ +7.9s
buildDurationCached 3.1s 3.5s ⚠️ +418ms
nodeModulesSize 188 MB 475 MB ⚠️ +287 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.47 2.872 ⚠️ +0.4
/ avg req/sec 1012.22 870.6 ⚠️ -141.62
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.333 1.399 ⚠️ +0.07
/error-in-render avg req/sec 1875.65 1786.84 ⚠️ -88.81
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
264.bc2dc73c..48b6.js gzip 180 B 179 B -1 B
675-e25958d3..c0e9.js gzip 10.8 kB N/A N/A
framework-71..f2a5.js gzip 42.2 kB 42.2 kB ✓
main-31dff79..311c.js gzip 23.1 kB 27.7 kB ⚠️ +4.6 kB
webpack-05c3..13ba.js gzip 1.51 kB 1.45 kB -69 B
Overall change 77.8 kB 71.5 kB -6.23 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
polyfills-a4..dd70.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages Overall increase ⚠️
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
_app-6276aad..5ca1.js gzip 1.22 kB 1.23 kB ⚠️ +13 B
_error-116b7..78a9.js gzip 193 B 194 B ⚠️ +1 B
amp-7e433712..e3c1.js gzip 312 B 312 B ✓
css-5c37cfc0..6c45.js gzip 328 B 327 B -1 B
dynamic-f188..136b.js gzip 2.4 kB 2.38 kB -20 B
head-72d37b0..b3a9.js gzip 363 B 350 B -13 B
hooks-db697f..75f7.js gzip 635 B 635 B ✓
image-982d35..4b95.js gzip 590 B N/A N/A
index-589059..3d49.js gzip 277 B 263 B -14 B
link-c3ddc7a..be3a.js gzip 1.89 kB 1.87 kB -15 B
routerDirect..e9ae.js gzip 334 B N/A N/A
script-46470..3a62.js gzip 397 B 383 B -14 B
withRouter-1..34fc.js gzip 333 B N/A N/A
bb14e60e810b..30f.css gzip 125 B N/A N/A
image-HASH.js gzip N/A 4.44 kB N/A
routerDirect..HASH.js gzip N/A 321 B N/A
withRouter-HASH.js gzip N/A 318 B N/A
334f979574ae..6f4.css gzip N/A 106 B N/A
Overall change 9.39 kB 13.1 kB ⚠️ +3.74 kB
Client Build Manifests Overall decrease ✓
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
_buildManifest.js gzip 514 B 459 B -55 B
Overall change 514 B 459 B -55 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary v11.1.2 vercel/next.js refs/heads/canary Change
index.html gzip 539 B 534 B -5 B
link.html gzip 550 B 546 B -4 B
withRouter.html gzip 531 B 528 B -3 B
Overall change 1.62 kB 1.61 kB -12 B

Diffs

Diff for _buildManifest.js 
@@ -1,34 +1,25 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-538949a10a36e498111f.js"],
-  "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-972535c3242034b1042a.js"
-  ],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-a539c821b06da8751c00.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-22405fb865808942.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-97db2c91e74bb63f.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
   "/css": [
-    "static\u002Fcss\u002F59de118426c393f58653.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-c69b8371e1f908f5d42c.js"
+    "static\u002Fcss\u002F7edf9ee7c3885268.css",
+    "static\u002Fchunks\u002Fpages\u002Fcss-99ad492aad2c14e4.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-af499357612c07e6fe62.js"
-  ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-397143160741680a7175.js"],
-  "/hooks": [
-    "static\u002Fchunks\u002Fpages\u002Fhooks-b3fb1366b8a9b3bc4a94.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-0ead1841ed0002db.js"
   ],
-  "/image": [
-    "static\u002Fchunks\u002F675-8bbaa7edc3ffef6d5cc5.js",
-    "static\u002Fchunks\u002Fpages\u002Fimage-dbe931d645834f2126eb.js"
-  ],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa2dfaa49cd97d4cd82d.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-c60c37af3228a150.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-a5c2f491b0df021aac25.js"
-  ],
-  "/script": [
-    "static\u002Fchunks\u002Fpages\u002Fscript-77845d52f9ddf967e85b.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"
   ],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-52713a82413f16bb.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-7f69cf963aab937061e0.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-50f69b5840cc7abf.js"
   ],
   sortedPages: [
     "\u002F",
Diff for _app-e74ea37..f6405e73c.js 
@@ -9,20 +9,25 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(7592);
+          return __webpack_require__(6029);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 7592: /***/ function(
+    /***/ 6029: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
     ) {
       "use strict";
 
+      var _regeneratorRuntime = _interopRequireDefault(
+        __webpack_require__(5666)
+      );
       function _assertThisInitialized(self) {
         if (self === void 0) {
           throw new ReferenceError(
@@ -73,6 +78,13 @@
         });
         if (superClass) _setPrototypeOf(subClass, superClass);
       }
+      function _interopRequireDefault(obj) {
+        return obj && obj.__esModule
+          ? obj
+          : {
+              default: obj
+            };
+      }
       function _possibleConstructorReturn(self, call) {
         if (
           call &&
@@ -98,8 +110,6 @@
           ? "symbol"
           : typeof obj;
       };
-      var regeneratorRuntime = __webpack_require__(5666);
-      var _marked = regeneratorRuntime.mark(_appGetInitialProps);
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -115,9 +125,9 @@
           return _utils.NextWebVitalsMetric;
         }
       });
-      exports.default = void 0;
-      var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _utils = __webpack_require__(359);
+      exports["default"] = void 0;
+      var _react = _interopRequireDefault1(__webpack_require__(7294));
+      var _utils = __webpack_require__(3794);
       function asyncGeneratorStep(
         gen,
         resolve,
@@ -172,7 +182,7 @@
           });
         };
       }
-      function _interopRequireDefault(obj) {
+      function _interopRequireDefault1(obj) {
         return obj && obj.__esModule
           ? obj
           : {
@@ -184,11 +194,11 @@
          * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
          * This allows for keeping state between navigation, custom error handling, injecting additional data.
          */ _asyncToGenerator(
-          regeneratorRuntime.mark(function _callee(param) {
+          _regeneratorRuntime.default.mark(function _callee(param) {
             var Component = param.Component,
               ctx = param.ctx;
             var pageProps;
-            return regeneratorRuntime.wrap(function _callee$(_ctx) {
+            return _regeneratorRuntime.default.wrap(function _callee$(_ctx) {
               while (1)
                 switch ((_ctx.prev = _ctx.next)) {
                   case 0:
@@ -238,7 +248,7 @@
       })(_react.default.Component);
       App.origGetInitialProps = appGetInitialProps;
       App.getInitialProps = appGetInitialProps;
-      exports.default = App; //# sourceMappingURL=_app.js.map
+      exports["default"] = App; //# sourceMappingURL=_app.js.map
 
       /***/
     }
@@ -249,7 +259,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(915), __webpack_exec__(2508);
+      return __webpack_exec__(915), __webpack_exec__(387);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for _error-97253..034b1042a.js 
@@ -9,9 +9,11 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(1107);
+          return __webpack_require__(9185);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     }
Diff for amp-a539c821..da8751c00.js 
@@ -6,7 +6,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2234);
+      module.exports = __webpack_require__(3240);
 
       /***/
     },
@@ -19,14 +19,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(6579);
+          return __webpack_require__(1910);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 6579: /***/ function(
+    /***/ 1910: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for css-c69b8371..908f5d42c.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(4516);
+          return __webpack_require__(5089);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 4516: /***/ function(
+    /***/ 5089: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -27,7 +29,7 @@
         5893
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        5964
+        3350
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -46,7 +48,7 @@
       /***/
     },
 
-    /***/ 5964: /***/ function(module) {
+    /***/ 3350: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__2Fhmt" };
Diff for dynamic-af49..c07e6fe62.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(2169);
+          return __webpack_require__(3286);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 3601: /***/ function(
+    /***/ 638: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -69,9 +71,9 @@
         value: true
       };
       __webpack_unused_export__ = noSSR;
-      exports.default = dynamic;
+      exports["default"] = dynamic;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _loadable = _interopRequireDefault(__webpack_require__(3376));
+      var _loadable = _interopRequireDefault(__webpack_require__(4302));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -79,7 +81,7 @@
               default: obj
             };
       }
-      var isServerSide = typeof window === "undefined";
+      var isServerSide = "object" === "undefined";
       function noSSR(LoadableInitializer, loadableOptions) {
         // Removing webpack and modules means react-loadable won't try preloading
         delete loadableOptions.webpack;
@@ -166,7 +168,7 @@
       /***/
     },
 
-    /***/ 2930: /***/ function(
+    /***/ 6319: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -193,7 +195,7 @@
       /***/
     },
 
-    /***/ 3376: /***/ function(
+    /***/ 4302: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -252,10 +254,10 @@
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      exports.default = void 0;
+      exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
       var _useSubscription = __webpack_require__(7161);
-      var _loadableContext = __webpack_require__(2930);
+      var _loadableContext = __webpack_require__(6319);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -369,13 +371,12 @@
         }
         var subscription = null;
         // Server only
-        if (typeof window === "undefined" && !opts.suspense) {
-          ALL_INITIALIZERS.push(init);
+        if (false) {
         }
         // Client only
         if (
           !initialized &&
-          typeof window !== "undefined" &&
+          "object" !== "undefined" &&
           typeof opts.webpack === "function" &&
           "function" === "function" &&
           !opts.suspense
@@ -439,6 +440,8 @@
           {
             key: "retry",
             value: function retry() {
+              var _this = this,
+                _this1 = this;
               this._clearTimeouts();
               this._res = this._loadFn(this._opts.loader);
               this._state = {
@@ -447,46 +450,38 @@
               };
               var ref = this,
                 res = ref._res,
-                opts1 = ref._opts;
+                opts = ref._opts;
               if (res.loading) {
-                if (typeof opts1.delay === "number") {
-                  if (opts1.delay === 0) {
+                if (typeof opts.delay === "number") {
+                  if (opts.delay === 0) {
                     this._state.pastDelay = true;
                   } else {
-                    this._delay = setTimeout(
-                      function() {
-                        this._update({
-                          pastDelay: true
-                        });
-                      }.bind(this),
-                      opts1.delay
-                    );
+                    var _this2 = this;
+                    this._delay = setTimeout(function() {
+                      _this2._update({
+                        pastDelay: true
+                      });
+                    }, opts.delay);
                   }
                 }
-                if (typeof opts1.timeout === "number") {
-                  this._timeout = setTimeout(
-                    function() {
-                      this._update({
-                        timedOut: true
-                      });
-                    }.bind(this),
-                    opts1.timeout
-                  );
+                if (typeof opts.timeout === "number") {
+                  var _this3 = this;
+                  this._timeout = setTimeout(function() {
+                    _this3._update({
+                      timedOut: true
+                    });
+                  }, opts.timeout);
                 }
               }
               this._res.promise
-                .then(
-                  function() {
-                    this._update({});
-                    this._clearTimeouts();
-                  }.bind(this)
-                )
-                .catch(
-                  function(_err) {
-                    this._update({});
-                    this._clearTimeouts();
-                  }.bind(this)
-                );
+                .then(function() {
+                  _this._update({});
+                  _this._clearTimeouts();
+                })
+                .catch(function(_err) {
+                  _this1._update({});
+                  _this1._clearTimeouts();
+                });
               this._update({});
             }
           },
@@ -524,17 +519,18 @@
           {
             key: "subscribe",
             value: function subscribe(callback) {
+              var _this = this;
               this._callbacks.add(callback);
               return function() {
-                this._callbacks.delete(callback);
-              }.bind(this);
+                _this._callbacks.delete(callback);
+              };
             }
           }
         ]);
         return LoadableSubscription;
       })();
-      function Loadable(opts1) {
-        return createLoadableComponent(load, opts1);
+      function Loadable(opts) {
+        return createLoadableComponent(load, opts);
       }
       function flushInitializers(initializers, ids) {
         var promises = [];
@@ -564,16 +560,16 @@
           flushInitializers(READY_INITIALIZERS, ids).then(res, res);
         });
       };
-      if (typeof window !== "undefined") {
+      if (true) {
         window.__NEXT_PRELOADREADY = Loadable.preloadReady;
       }
       var _default = Loadable;
-      exports.default = _default; //# sourceMappingURL=loadable.js.map
+      exports["default"] = _default; //# sourceMappingURL=loadable.js.map
 
       /***/
     },
 
-    /***/ 2169: /***/ function(
+    /***/ 3286: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -581,8 +577,8 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ getServerSideProps: function() {
-          return /* binding */ getServerSideProps;
+        /* harmony export */ __N_SSP: function() {
+          return /* binding */ __N_SSP;
         }
         /* harmony export */
       });
@@ -593,11 +589,20 @@
         5152
       );
 
-      var DynamicHello = (0, next_dynamic__WEBPACK_IMPORTED_MODULE_1__.default)(
+      var DynamicHello = (0,
+      next_dynamic__WEBPACK_IMPORTED_MODULE_1__["default"])(
         function() {
           return __webpack_require__
-            .e(/* import() */ 264)
-            .then(__webpack_require__.bind(__webpack_require__, 5264));
+            .e(/* import() */ 450)
+            .then(__webpack_require__.bind(__webpack_require__, 6450));
+        },
+        {
+          loadableGenerated: {
+            webpack: function() {
+              return [/*require.resolve*/ 6450];
+            },
+            modules: ["dynamic.js -> " + "../components/hello"]
+          }
         }
       );
       var Page = function() {
@@ -619,13 +624,7 @@
           }
         );
       };
-      // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-      var getServerSideProps = function() {
-        return {
-          props: {}
-        };
-      };
+      var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
@@ -636,7 +635,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3601);
+      module.exports = __webpack_require__(638);
 
       /***/
     }
Diff for head-3971431..1680a7175.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function() {
-          return __webpack_require__(8326);
+          return __webpack_require__(5423);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 8326: /***/ function(
+    /***/ 5423: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -24,8 +26,8 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ getServerSideProps: function() {
-          return /* binding */ getServerSideProps;
+        /* harmony export */ __N_SSP: function() {
+          return /* binding */ __N_SSP;
         }
         /* harmony export */
       });
@@ -44,7 +46,7 @@
             children: [
               /*#__PURE__*/ (0,
               react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-                next_head__WEBPACK_IMPORTED_MODULE_1__.default,
+                next_head__WEBPACK_IMPORTED_MODULE_1__["default"],
                 {
                   children: /*#__PURE__*/ (0,
                   react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("title", {
@@ -60,13 +62,7 @@
           }
         );
       };
-      // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-      var getServerSideProps = function() {
-        return {
-          props: {}
-        };
-      };
+      var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
@@ -77,7 +73,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(1152);
+      module.exports = __webpack_require__(5443);
 
       /***/
     }
Diff for hooks-b3fb13..9b3bc4a94.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function() {
-          return __webpack_require__(3099);
+          return __webpack_require__(5017);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 3099: /***/ function(
+    /***/ 5017: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for image-HASH.js

Diff too large to display

Diff for image-dbe931..34f2126eb.js 
deleted
Diff for index-538949..6e498111f.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function() {
-          return __webpack_require__(5516);
+          return __webpack_require__(3678);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 5516: /***/ function(
+    /***/ 3678: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -24,21 +26,15 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ getServerSideProps: function() {
-          return /* binding */ getServerSideProps;
+        /* harmony export */ __N_SSP: function() {
+          return /* binding */ __N_SSP;
         }
         /* harmony export */
       });
       var Page = function() {
         return "Hello world 👋";
       };
-      // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-      var getServerSideProps = function() {
-        return {
-          props: {}
-        };
-      };
+      var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
Diff for link-fa2dfaa..97d4cd82d.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function() {
-          return __webpack_require__(2070);
+          return __webpack_require__(4380);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 666: /***/ function(
+    /***/ 8418: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -75,11 +77,11 @@
       __webpack_unused_export__ = {
         value: true
       };
-      exports.default = void 0;
+      exports["default"] = void 0;
       var _react = _interopRequireDefault(__webpack_require__(7294));
-      var _router = __webpack_require__(4306);
-      var _router1 = __webpack_require__(2508);
-      var _useIntersection = __webpack_require__(7520);
+      var _router = __webpack_require__(6273);
+      var _router1 = __webpack_require__(387);
+      var _useIntersection = __webpack_require__(7190);
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -89,7 +91,7 @@
       }
       var prefetched = {};
       function prefetch(router, href, as, options) {
-        if (typeof window === "undefined" || !router) return;
+        if (false || !router) return;
         if (!(0, _router).isLocalURL(href)) return;
         // Prefetch the JSON page if asked (only in the client)
         // We need to handle a prefetch error here since we may be
@@ -107,8 +109,7 @@
         prefetched[href + "%" + as + (curLocale ? "%" + curLocale : "")] = true;
       }
       function isModifiedEvent(event) {
-        var _currentTarget = event.currentTarget,
-          target = _currentTarget.target;
+        var target = event.currentTarget.target;
         return (
           (target && target !== "_self") ||
           event.metaKey ||
@@ -128,8 +129,7 @@
         scroll,
         locale
       ) {
-        var _currentTarget = e.currentTarget,
-          nodeName = _currentTarget.nodeName;
+        var nodeName = e.currentTarget.nodeName;
         if (
           nodeName === "A" &&
           (isModifiedEvent(e) || !(0, _router).isLocalURL(href))
@@ -160,14 +160,14 @@
         }
         var p = props.prefetch !== false;
         var router = (0, _router1).useRouter();
-        var ref = _react.default.useMemo(
+        var ref2 = _react.default.useMemo(
             function() {
-              var ref1 = _slicedToArray(
+              var ref = _slicedToArray(
                   (0, _router).resolveHref(router, props.href, true),
                   2
                 ),
-                resolvedHref = ref1[0],
-                resolvedAs = ref1[1];
+                resolvedHref = ref[0],
+                resolvedAs = ref[1];
               return {
                 href: resolvedHref,
                 as: props.as
@@ -177,8 +177,8 @@
             },
             [router, props.href, props.as]
           ),
-          href = ref.href,
-          as = ref.as;
+          href = ref2.href,
+          as = ref2.as;
         var children = props.children,
           replace = props.replace,
           shallow = props.shallow,
@@ -270,7 +270,7 @@
           props.passHref ||
           (child.type === "a" && !("href" in child.props))
         ) {
-          var curLocale =
+          var curLocale1 =
             typeof locale !== "undefined" ? locale : router && router.locale;
           // we only render domain locales if we are currently on a domain locale
           // so that locale links are still visitable in development/preview envs
@@ -279,7 +279,7 @@
             router.isLocaleDomain &&
             (0, _router).getDomainLocale(
               as,
-              curLocale,
+              curLocale1,
               router && router.locales,
               router && router.domainLocales
             );
@@ -288,7 +288,7 @@
             (0, _router).addBasePath(
               (0, _router).addLocale(
                 as,
-                curLocale,
+                curLocale1,
                 router && router.defaultLocale
               )
             );
@@ -296,12 +296,12 @@
         return /*#__PURE__*/ _react.default.cloneElement(child, childProps);
       }
       var _default = Link;
-      exports.default = _default; //# sourceMappingURL=link.js.map
+      exports["default"] = _default; //# sourceMappingURL=link.js.map
 
       /***/
     },
 
-    /***/ 7520: /***/ function(
+    /***/ 7190: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -354,7 +354,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(7294);
-      var _requestIdleCallback = __webpack_require__(5961);
+      var _requestIdleCallback = __webpack_require__(9311);
       var hasIntersectionObserver = typeof IntersectionObserver !== "undefined";
       function useIntersection(param) {
         var rootMargin = param.rootMargin,
@@ -453,7 +453,7 @@
       /***/
     },
 
-    /***/ 2070: /***/ function(
+    /***/ 4380: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -461,8 +461,8 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ getServerSideProps: function() {
-          return /* binding */ getServerSideProps;
+        /* harmony export */ __N_SSP: function() {
+          return /* binding */ __N_SSP;
         }
         /* harmony export */
       });
@@ -483,7 +483,7 @@
             }),
             /*#__PURE__*/ (0,
             react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-              next_link__WEBPACK_IMPORTED_MODULE_1__.default,
+              next_link__WEBPACK_IMPORTED_MODULE_1__["default"],
               {
                 href: "/",
                 children: "Go to /"
@@ -492,13 +492,7 @@
           ]
         });
       }
-      // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-      var getServerSideProps = function() {
-        return {
-          props: {}
-        };
-      };
+      var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = aLink;
 
       /***/
@@ -509,7 +503,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(666);
+      module.exports = __webpack_require__(8418);
 
       /***/
     }
Diff for routerDirect..f021aac25.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function() {
-          return __webpack_require__(4289);
+          return __webpack_require__(6870);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 4289: /***/ function(
+    /***/ 6870: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -24,8 +26,8 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ getServerSideProps: function() {
-          return /* binding */ getServerSideProps;
+        /* harmony export */ __N_SSP: function() {
+          return /* binding */ __N_SSP;
         }
         /* harmony export */
       });
@@ -44,13 +46,7 @@
           children: "I import the router directly"
         });
       }
-      // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-      var getServerSideProps = function() {
-        return {
-          props: {}
-        };
-      };
+      var __N_SSP = true;
       /* harmony default export */ __webpack_exports__[
         "default"
       ] = routerDirect;
@@ -63,7 +59,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2508);
+      module.exports = __webpack_require__(387);
 
       /***/
     }
Diff for script-77845..df967e85b.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function() {
-          return __webpack_require__(9122);
+          return __webpack_require__(549);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 9122: /***/ function(
+    /***/ 549: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -24,8 +26,8 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ getServerSideProps: function() {
-          return /* binding */ getServerSideProps;
+        /* harmony export */ __N_SSP: function() {
+          return /* binding */ __N_SSP;
         }
         /* harmony export */
       });
@@ -48,7 +50,7 @@
               }),
               /*#__PURE__*/ (0,
               react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-                next_script__WEBPACK_IMPORTED_MODULE_1__.default,
+                next_script__WEBPACK_IMPORTED_MODULE_1__["default"],
                 {
                   dangerouslySetInnerHTML: {
                     __html: 'console.log("hello")'
@@ -59,13 +61,7 @@
           }
         );
       };
-      // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-      var getServerSideProps = function() {
-        return {
-          props: {}
-        };
-      };
+      var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = Page;
 
       /***/
@@ -76,7 +72,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8767);
+      module.exports = __webpack_require__(699);
 
       /***/
     }
Diff for withRouter-7..b937061e0.js 
@@ -9,14 +9,16 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function() {
-          return __webpack_require__(3135);
+          return __webpack_require__(5330);
         }
       ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 3135: /***/ function(
+    /***/ 5330: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -24,8 +26,8 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ getServerSideProps: function() {
-          return /* binding */ getServerSideProps;
+        /* harmony export */ __N_SSP: function() {
+          return /* binding */ __N_SSP;
         }
         /* harmony export */
       });
@@ -42,13 +44,7 @@
           children: "I use withRouter"
         });
       }
-      // we add getServerSideProps to prevent static optimization
-      // to allow us to compare server-side changes
-      var getServerSideProps = function() {
-        return {
-          props: {}
-        };
-      };
+      var __N_SSP = true;
       /* harmony default export */ __webpack_exports__["default"] = (0,
       next_router__WEBPACK_IMPORTED_MODULE_1__.withRouter)(useWithRouter);
 
@@ -60,7 +56,7 @@
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2508);
+      module.exports = __webpack_require__(387);
 
       /***/
     }
Diff for 264.0f9e22e8..a4d0f0d7d.js 
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [264],
+  [450],
   {
-    /***/ 5264: /***/ function(
+    /***/ 6450: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
Diff for 675-8bbaa7ed..fef6d5cc5.js 
deleted
Diff for main-670eb91..54ca63c40.js

Diff too large to display

Diff for webpack-fe2e..7d13e0eb3.js 
@@ -159,7 +159,7 @@
     /******/ __webpack_require__.u = function(chunkId) {
       /******/ // return url for filenames based on template
       /******/ return (
-        "static/chunks/" + chunkId + "." + "0f9e22e8940a4d0f0d7d" + ".js"
+        "static/chunks/" + chunkId + "." + "2f05e31c20cc50e8" + ".js"
       );
       /******/
     };
@@ -171,26 +171,10 @@
     /******/ // This function allow to reference all chunks
     /******/ __webpack_require__.miniCssF = function(chunkId) {
       /******/ // return url for filenames based on template
-      /******/ return "static/css/" + "59de118426c393f58653" + ".css";
+      /******/ return "static/css/" + "7edf9ee7c3885268" + ".css";
       /******/
     };
     /******/
-  })(); /* webpack/runtime/global */
-  /******/
-
-  /******/ /******/ !(function() {
-    /******/ __webpack_require__.g = (function() {
-      /******/ if (typeof globalThis === "object") return globalThis;
-      /******/ try {
-        /******/ return this || new Function("return this")();
-        /******/
-      } catch (e) {
-        /******/ if (typeof window === "object") return window;
-        /******/
-      }
-      /******/
-    })();
-    /******/
   })(); /* webpack/runtime/hasOwnProperty shorthand */
   /******/
Diff for 59de118426c393f58653.css 
deleted
Diff for 7edf9ee7c3885268.css 
@@ -0,0 +1,4 @@
+.css_helloWorld__2Fhmt {
+  color: green;
+  background: url(/_next/static/media/nextjs.cae0b805.png);
+}
Diff for index.html 
@@ -11,27 +11,31 @@
       src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-fe2ec775b647d13e0eb3.js"
+      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-04992f11eed687ecc749.js"
+      src="/_next/static/chunks/framework-535325b9235a831f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-670eb9111d054ca63c40.js"
+      src="/_next/static/chunks/main-28619f171130cd0c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-e74ea377668f6405e73c.js"
+      src="/_next/static/chunks/pages/_app-de3f211ea2b76ae1.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/index-538949a10a36e498111f.js"
+      src="/_next/static/chunks/pages/index-22405fb865808942.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
     <script src="/_next/static/BUILD_ID/_ssgManifest.js" defer=""></script>
+    <script
+      src="/_next/static/BUILD_ID/_middlewareManifest.js"
+      defer=""
+    ></script>
   </head>
   <body>
     <div id="__next">Hello world 👋</div>
Diff for link.html 
@@ -11,27 +11,31 @@
       src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-fe2ec775b647d13e0eb3.js"
+      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-04992f11eed687ecc749.js"
+      src="/_next/static/chunks/framework-535325b9235a831f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-670eb9111d054ca63c40.js"
+      src="/_next/static/chunks/main-28619f171130cd0c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-e74ea377668f6405e73c.js"
+      src="/_next/static/chunks/pages/_app-de3f211ea2b76ae1.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/link-fa2dfaa49cd97d4cd82d.js"
+      src="/_next/static/chunks/pages/link-fa969765a079642e.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
     <script src="/_next/static/BUILD_ID/_ssgManifest.js" defer=""></script>
+    <script
+      src="/_next/static/BUILD_ID/_middlewareManifest.js"
+      defer=""
+    ></script>
   </head>
   <body>
     <div id="__next">
Diff for withRouter.html 
@@ -11,27 +11,31 @@
       src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-fe2ec775b647d13e0eb3.js"
+      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/framework-04992f11eed687ecc749.js"
+      src="/_next/static/chunks/framework-535325b9235a831f.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-670eb9111d054ca63c40.js"
+      src="/_next/static/chunks/main-28619f171130cd0c.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/_app-e74ea377668f6405e73c.js"
+      src="/_next/static/chunks/pages/_app-de3f211ea2b76ae1.js"
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/pages/withRouter-7f69cf963aab937061e0.js"
+      src="/_next/static/chunks/pages/withRouter-50f69b5840cc7abf.js"
       defer=""
     ></script>
     <script src="/_next/static/BUILD_ID/_buildManifest.js" defer=""></script>
     <script src="/_next/static/BUILD_ID/_ssgManifest.js" defer=""></script>
+    <script
+      src="/_next/static/BUILD_ID/_middlewareManifest.js"
+      defer=""
+    ></script>
   </head>
   <body>
     <div id="__next"><div>I use withRouter</div></div>

Please sign in to comment.