add attribution to web vitals #39368

kyliau · 2022-08-05T20:49:25Z

This commit implements the main proposal presented in
#39241
to add attribution to web vitals.

Attribution adds more specific debugging info to web vitals,
for example in the case of Cumulative Layout Shift (CLS),
we might want to know

What's the first element that shifted when the single largest layout shift occurred?

on in the case of Largest Contentful Paint (LCP),

What's the element corresponding to the LCP for the page?
If it is an image, what's the URL of the image resource?

Attribution is disabled by default because it could potentially
generate a lot data and overwhelm the RUM backend.
It is enabled per metric (LCP, FCP, CLS, etc)

As part of this change, web-vitals has been upgraded to v3.0.0
This version contains minor bug fixes, please see changelog at
GoogleChrome/web-vitals@9fe3cc0

Fixes #39241

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 pnpm lint
The examples guidelines are followed from our contributing doc

ijjk · 2022-08-05T21:16:04Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
buildDuration	36.9s	37.3s	⚠️ +448ms
buildDurationCached	14s	9.9s	-4.1s
nodeModulesSize	91.9 MB	92 MB	⚠️ +59.1 kB
nextStartRea..uration (ms)	330ms	326ms	-4ms
nextDevReadyDuration	388ms	388ms	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	11.843	12.157	⚠️ +0.31
/ avg req/sec	211.09	205.65	⚠️ -5.44
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	7.828	7.869	⚠️ +0.04
/error-in-render avg req/sec	319.36	317.68	⚠️ -1.68

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
709-HASH.js gzip	12.1 kB	12.1 kB	-4 B
719.HASH.js gzip	179 B	179 B	✓
app-internal..HASH.js gzip	405 B	408 B	⚠️ +3 B
framework-HASH.js gzip	48.7 kB	48.7 kB	✓
main-app-HASH.js gzip	3.96 kB	4.1 kB	⚠️ +145 B
main-HASH.js gzip	31 kB	31.2 kB	⚠️ +167 B
webpack-HASH.js gzip	1.73 kB	1.73 kB	-1 B
Overall change	98.1 kB	98.4 kB	⚠️ +310 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
_app-HASH.js gzip	202 B	202 B	✓
_error-HASH.js gzip	194 B	193 B	-1 B
amp-HASH.js gzip	494 B	494 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.03 kB	2.03 kB	⚠️ +2 B
edge-ssr-HASH.js gzip	271 B	272 B	⚠️ +1 B
head-HASH.js gzip	356 B	355 B	-1 B
hooks-HASH.js gzip	800 B	803 B	⚠️ +3 B
image-HASH.js gzip	4.89 kB	4.88 kB	-5 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.37 kB	2.36 kB	-7 B
routerDirect..HASH.js gzip	322 B	320 B	-2 B
script-HASH.js gzip	390 B	391 B	⚠️ +1 B
withRouter-HASH.js gzip	320 B	317 B	-3 B
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.3 kB	13.3 kB	-12 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
_buildManifest.js gzip	482 B	483 B	⚠️ +1 B
Overall change	482 B	483 B	⚠️ +1 B

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
index.html gzip	510 B	512 B	⚠️ +2 B
link.html gzip	526 B	526 B	✓
withRouter.html gzip	507 B	507 B	✓
Overall change	1.54 kB	1.54 kB	⚠️ +2 B

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
edge-ssr.js gzip	57.7 kB	57.7 kB	⚠️ +4 B
page.js gzip	66.4 kB	66.4 kB	⚠️ +7 B
Overall change	124 kB	124 kB	⚠️ +11 B

Middleware size Overall decrease ✓

	vercel/next.js canary	kyliau/next.js web-vitals-attribution-2	Change
middleware-b..fest.js gzip	605 B	605 B	✓
middleware-r..fest.js gzip	145 B	144 B	-1 B
middleware.js gzip	18.3 kB	18.3 kB	✓
edge-runtime..pack.js gzip	1.83 kB	1.83 kB	✓
Overall change	20.9 kB	20.9 kB	-1 B

Diffs

Diff for page.js

Diff too large to display

Diff for middleware-b..-manifest.js

@@ -7,96 +7,96 @@ self.__BUILD_MANIFEST = {
     "static/BUILD_ID/_ssgManifest.js"
   ],
   rootMainFiles: [
-    "static/chunks/webpack-1c53982890a0ee7a.js",
+    "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
     "static/chunks/framework-b11e50df1bb3c9a6.js",
-    "static/chunks/709-2309d9f5a00f628c.js",
-    "static/chunks/main-app-ba5ddbf004901ed4.js"
+    "static/chunks/989-4b9202152b7ac66a.js",
+    "static/chunks/main-app-20779a8de38f7210.js"
   ],
   pages: {
     "/": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/index-5eb0c6dd1b07f92f.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/index-f042f599c30d45db.js"
     ],
     "/_app": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/_app-25a28c06117c6d2f.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/_app-d940e48718ce3bec.js"
     ],
     "/_error": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/_error-e21edc8f3b0da91c.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/_error-aedd03913df85245.js"
     ],
     "/amp": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/amp-32e961200afb4fa3.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/amp-073ac0acb086c0f6.js"
     ],
     "/css": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
       "static/css/94fdbc56eafa2039.css",
-      "static/chunks/pages/css-1a704b23b3813bc6.js"
+      "static/chunks/pages/css-5088098e50885674.js"
     ],
     "/dynamic": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/dynamic-e40a9b434c47923f.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/dynamic-12868c362d4814bc.js"
     ],
     "/edge-ssr": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/edge-ssr-947047b398cb06f5.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/edge-ssr-73aa9a5b806b4236.js"
     ],
     "/head": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/head-d5e73c8366eb85bd.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/head-68a0b44f1c2015af.js"
     ],
     "/hooks": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/hooks-e02e15e6cecf7921.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/hooks-0a030866b1a15149.js"
     ],
     "/image": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/image-8b477a162ec7f118.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/image-f6a01980ccd3687f.js"
     ],
     "/link": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/link-148081f7c6750b2a.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/link-0f5b51c598861a74.js"
     ],
     "/routerDirect": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/routerDirect-016d5dc573ac31d4.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/routerDirect-8e431afc6ceb21b8.js"
     ],
     "/script": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/script-28cec8809c10f397.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/script-51ddb09154eaa5d1.js"
     ],
     "/withRouter": [
-      "static/chunks/webpack-1c53982890a0ee7a.js",
+      "static/chunks/webpack-cd12e5a9fc2ac1bd.js",
       "static/chunks/framework-b11e50df1bb3c9a6.js",
-      "static/chunks/main-e639861c113a4028.js",
-      "static/chunks/pages/withRouter-4bec812943e988d1.js"
+      "static/chunks/main-2e08f5f3a5dddb7f.js",
+      "static/chunks/pages/withRouter-36009d7a2260315e.js"
     ]
   },
   ampFirstPages: []

Diff for middleware-r..-manifest.js

@@ -1,6 +1,6 @@
 self.__REACT_LOADABLE_MANIFEST = {
   "dynamic.js -> ../components/hello": {
-    id: 8719,
-    files: ["static/chunks/719.af92bec8d88a7c71.js"]
+    id: 384,
+    files: ["static/chunks/384.597e9611680302af.js"]
   }
 };

Diff for middleware.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [826],
   {
-    /***/ 3802: /***/ (
+    /***/ 2945: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,13 +14,13 @@
         /* harmony export */
       });
       /* harmony import */ var next_dist_server_web_adapter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        9965
+        4402
       );
 
       (0,
       next_dist_server_web_adapter__WEBPACK_IMPORTED_MODULE_0__ /* .enhanceGlobals */.gL)();
 
-      var mod = __webpack_require__(9181);
+      var mod = __webpack_require__(6009);
       var handler = mod.middleware || mod.default;
 
       if (typeof handler !== "function") {
@@ -46,7 +46,7 @@
       /***/
     },
 
-    /***/ 9181: /***/ (
+    /***/ 6009: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -58,7 +58,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        8646
+        253
       );
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_server__WEBPACK_IMPORTED_MODULE_0__
@@ -71,7 +71,7 @@
       /***/
     },
 
-    /***/ 9914: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7030: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -91,7 +91,7 @@
       /***/
     },
 
-    /***/ 981: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6180: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -129,7 +129,7 @@
       /***/
     },
 
-    /***/ 5793: /***/ (__unused_webpack_module, exports) => {
+    /***/ 318: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -161,7 +161,7 @@
       /***/
     },
 
-    /***/ 7430: /***/ (
+    /***/ 2146: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -172,8 +172,8 @@
         value: true
       });
       exports.addLocale = addLocale;
-      var _addPathPrefix = __webpack_require__(9159);
-      var _pathHasPrefix = __webpack_require__(9638);
+      var _addPathPrefix = __webpack_require__(2080);
+      var _pathHasPrefix = __webpack_require__(4389);
       function addLocale(path, locale, defaultLocale, ignorePrefix) {
         if (
           locale &&
@@ -193,7 +193,7 @@
       /***/
     },
 
-    /***/ 9159: /***/ (
+    /***/ 2080: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -204,7 +204,7 @@
         value: true
       });
       exports.addPathPrefix = addPathPrefix;
-      var _parsePath = __webpack_require__(1735);
+      var _parsePath = __webpack_require__(7490);
       function addPathPrefix(path, prefix) {
         if (!path.startsWith("/") || !prefix) {
           return path;
@@ -216,7 +216,7 @@
       /***/
     },
 
-    /***/ 9143: /***/ (
+    /***/ 7426: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -227,7 +227,7 @@
         value: true
       });
       exports.addPathSuffix = addPathSuffix;
-      var _parsePath = __webpack_require__(1735);
+      var _parsePath = __webpack_require__(7490);
       function addPathSuffix(path, suffix) {
         if (!path.startsWith("/") || !suffix) {
           return path;
@@ -239,7 +239,7 @@
       /***/
     },
 
-    /***/ 6957: /***/ (
+    /***/ 8794: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -250,10 +250,10 @@
         value: true
       });
       exports.formatNextPathnameInfo = formatNextPathnameInfo;
-      var _removeTrailingSlash = __webpack_require__(4816);
-      var _addPathPrefix = __webpack_require__(9159);
-      var _addPathSuffix = __webpack_require__(9143);
-      var _addLocale = __webpack_require__(7430);
+      var _removeTrailingSlash = __webpack_require__(8742);
+      var _addPathPrefix = __webpack_require__(2080);
+      var _addPathSuffix = __webpack_require__(7426);
+      var _addLocale = __webpack_require__(2146);
       function formatNextPathnameInfo(info) {
         let pathname = (0, _addLocale).addLocale(
           info.pathname,
@@ -281,7 +281,7 @@
       /***/
     },
 
-    /***/ 3804: /***/ (
+    /***/ 1733: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -292,9 +292,9 @@
         value: true
       });
       exports.getNextPathnameInfo = getNextPathnameInfo;
-      var _normalizeLocalePath = __webpack_require__(5793);
-      var _removePathPrefix = __webpack_require__(1436);
-      var _pathHasPrefix = __webpack_require__(9638);
+      var _normalizeLocalePath = __webpack_require__(318);
+      var _removePathPrefix = __webpack_require__(4864);
+      var _pathHasPrefix = __webpack_require__(4389);
       function getNextPathnameInfo(pathname, options) {
         var _nextConfig;
         const { basePath, i18n, trailingSlash } =
@@ -344,7 +344,7 @@
       /***/
     },
 
-    /***/ 1735: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7490: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -378,7 +378,7 @@
       /***/
     },
 
-    /***/ 9638: /***/ (
+    /***/ 4389: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -389,7 +389,7 @@
         value: true
       });
       exports.pathHasPrefix = pathHasPrefix;
-      var _parsePath = __webpack_require__(1735);
+      var _parsePath = __webpack_require__(7490);
       function pathHasPrefix(path, prefix) {
         if (typeof path !== "string") {
           return false;
@@ -401,7 +401,7 @@
       /***/
     },
 
-    /***/ 8404: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6339: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -420,7 +420,7 @@
       /***/
     },
 
-    /***/ 1436: /***/ (
+    /***/ 4864: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -431,7 +431,7 @@
         value: true
       });
       exports.removePathPrefix = removePathPrefix;
-      var _pathHasPrefix = __webpack_require__(9638);
+      var _pathHasPrefix = __webpack_require__(4389);
       function removePathPrefix(path, prefix) {
         if ((0, _pathHasPrefix).pathHasPrefix(path, prefix)) {
           const withoutPrefix = path.slice(prefix.length);
@@ -445,7 +445,7 @@
       /***/
     },
 
-    /***/ 4816: /***/ (__unused_webpack_module, exports) => {
+    /***/ 8742: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -459,7 +459,7 @@
       /***/
     },
 
-    /***/ 1948: /***/ module => {
+    /***/ 965: /***/ module => {
       var __dirname = "/";
       (() => {
         "use strict";
@@ -587,7 +587,7 @@
       /***/
     },
 
-    /***/ 3980: /***/ (module, exports, __webpack_require__) => {
+    /***/ 4803: /***/ (module, exports, __webpack_require__) => {
       var __dirname = "/";
       var __WEBPACK_AMD_DEFINE_RESULT__;
       (() => {
@@ -1429,7 +1429,7 @@
       /***/
     },
 
-    /***/ 2831: /***/ (__unused_webpack_module, exports) => {
+    /***/ 8784: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1471,7 +1471,7 @@
       /***/
     },
 
-    /***/ 9965: /***/ (
+    /***/ 4402: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1485,14 +1485,14 @@
       exports.VL = adapter;
       exports.OT = blockUnallowedResponse;
       exports.gL = enhanceGlobals;
-      var _error = __webpack_require__(3975);
-      var _utils = __webpack_require__(1657);
-      var _fetchEvent = __webpack_require__(1745);
-      var _request = __webpack_require__(3371);
-      var _response = __webpack_require__(9062);
-      var _relativizeUrl = __webpack_require__(8404);
-      var _nextUrl = __webpack_require__(130);
-      var _internalUtils = __webpack_require__(2831);
+      var _error = __webpack_require__(6140);
+      var _utils = __webpack_require__(4867);
+      var _fetchEvent = __webpack_require__(1222);
+      var _request = __webpack_require__(6751);
+      var _response = __webpack_require__(1244);
+      var _relativizeUrl = __webpack_require__(6339);
+      var _nextUrl = __webpack_require__(7329);
+      var _internalUtils = __webpack_require__(8784);
       class NextRequestHint extends _request.NextRequest {
         constructor(params) {
           super(params.input, params.init);
@@ -1718,7 +1718,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 3975: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6140: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1759,7 +1759,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 130: /***/ (
+    /***/ 7329: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1769,10 +1769,10 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _detectDomainLocale = __webpack_require__(981);
-      var _formatNextPathnameInfo = __webpack_require__(6957);
-      var _getHostname = __webpack_require__(9914);
-      var _getNextPathnameInfo = __webpack_require__(3804);
+      var _detectDomainLocale = __webpack_require__(6180);
+      var _formatNextPathnameInfo = __webpack_require__(8794);
+      var _getHostname = __webpack_require__(7030);
+      var _getNextPathnameInfo = __webpack_require__(1733);
       const REGEX_LOCALHOST_HOSTNAME = /(?!^https?:\/\/)(127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}|::1|localhost)/;
       function parseURL(url, base) {
         return new URL(
@@ -1997,7 +1997,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 3265: /***/ (
+    /***/ 1552: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2007,7 +2007,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _cookie = _interopRequireDefault(__webpack_require__(1948));
+      var _cookie = _interopRequireDefault(__webpack_require__(965));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -2142,7 +2142,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 1745: /***/ (
+    /***/ 1222: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2153,7 +2153,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.waitUntilSymbol = void 0;
-      var _error = __webpack_require__(3975);
+      var _error = __webpack_require__(6140);
       const responseSymbol = Symbol("response");
       const passThroughSymbol = Symbol("passThrough");
       const waitUntilSymbol = Symbol("waitUntil");
@@ -2206,7 +2206,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 3371: /***/ (
+    /***/ 6751: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2217,10 +2217,10 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.INTERNALS = void 0;
-      var _nextUrl = __webpack_require__(130);
-      var _utils = __webpack_require__(1657);
-      var _error = __webpack_require__(3975);
-      var _cookies = __webpack_require__(3265);
+      var _nextUrl = __webpack_require__(7329);
+      var _utils = __webpack_require__(4867);
+      var _error = __webpack_require__(6140);
+      var _cookies = __webpack_require__(1552);
       const INTERNALS = Symbol("internal request");
       exports.INTERNALS = INTERNALS;
       class NextRequest extends Request {
@@ -2301,7 +2301,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 9062: /***/ (
+    /***/ 1244: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2311,9 +2311,9 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _nextUrl = __webpack_require__(130);
-      var _utils = __webpack_require__(1657);
-      var _cookies = __webpack_require__(3265);
+      var _nextUrl = __webpack_require__(7329);
+      var _utils = __webpack_require__(4867);
+      var _cookies = __webpack_require__(1552);
       const INTERNALS = Symbol("internal response");
       const REDIRECTS = new Set([301, 302, 303, 307, 308]);
       class NextResponse extends Response {
@@ -2403,7 +2403,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 1264: /***/ (
+    /***/ 4112: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2417,7 +2417,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       __webpack_unused_export__ = isBot;
       exports.Nf = userAgentFromString;
       exports.WE = userAgent;
-      var _uaParserJs = _interopRequireDefault(__webpack_require__(3980));
+      var _uaParserJs = _interopRequireDefault(__webpack_require__(4803));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -2445,7 +2445,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 1657: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4867: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -2560,14 +2560,14 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 8646: /***/ (module, exports, __webpack_require__) => {
+    /***/ 253: /***/ (module, exports, __webpack_require__) => {
       const serverExports = {
-        NextRequest: __webpack_require__(3371).NextRequest,
-        NextResponse: __webpack_require__(9062).NextResponse,
+        NextRequest: __webpack_require__(6751).NextRequest,
+        NextResponse: __webpack_require__(1244).NextResponse,
         userAgentFromString: __webpack_require__(
-          1264
+          4112
         ) /* .userAgentFromString */.Nf,
-        userAgent: __webpack_require__(1264) /* .userAgent */.WE
+        userAgent: __webpack_require__(4112) /* .userAgent */.WE
       };
 
       if (typeof URLPattern !== "undefined") {
@@ -2593,7 +2593,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = moduleId =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ var __webpack_exports__ = __webpack_exec__(3802);
+    /******/ var __webpack_exports__ = __webpack_exec__(2945);
     /******/ (_ENTRIES =
       typeof _ENTRIES === "undefined"
         ? {}

Diff for edge-ssr.js

Diff too large to display

Diff for _buildManifest.js

@@ -1,28 +1,28 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-5eb0c6dd1b07f92f.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-e21edc8f3b0da91c.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-32e961200afb4fa3.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-f042f599c30d45db.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-aedd03913df85245.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-073ac0acb086c0f6.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-1a704b23b3813bc6.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-5088098e50885674.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-e40a9b434c47923f.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-12868c362d4814bc.js"
   ],
   "/edge-ssr": [
-    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-947047b398cb06f5.js"
+    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-73aa9a5b806b4236.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-d5e73c8366eb85bd.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-e02e15e6cecf7921.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-8b477a162ec7f118.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-148081f7c6750b2a.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-68a0b44f1c2015af.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-0a030866b1a15149.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-f6a01980ccd3687f.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-0f5b51c598861a74.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-016d5dc573ac31d4.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-8e431afc6ceb21b8.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-28cec8809c10f397.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-51ddb09154eaa5d1.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-4bec812943e988d1.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-36009d7a2260315e.js"
   ],
   sortedPages: [
     "\u002F",

Diff for _app-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [888],
   {
-    /***/ 8351: /***/ function(
+    /***/ 7006: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(4105);
+          return __webpack_require__(3729);
         }
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function() {
-      return __webpack_exec__(8351), __webpack_exec__(2383);
+      return __webpack_exec__(7006), __webpack_exec__(1134);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for _error-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [820],
   {
-    /***/ 9548: /***/ function(
+    /***/ 3020: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(7437);
+          return __webpack_require__(729);
         }
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(9548);
+      return __webpack_exec__(3020);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for amp-HASH.js

@@ -1,17 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [216],
   {
-    /***/ 3485: /***/ function(
+    /***/ 7481: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2930);
+      module.exports = __webpack_require__(3343);
 
       /***/
     },
 
-    /***/ 6530: /***/ function(
+    /***/ 2880: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(7249);
+          return __webpack_require__(1357);
         }
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 2930: /***/ function(module, exports, __webpack_require__) {
+    /***/ 3343: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -38,8 +38,8 @@
       var _interop_require_default = __webpack_require__(7022) /* ["default"] */
         .Z;
       var _react = _interop_require_default(__webpack_require__(6273));
-      var _ampContext = __webpack_require__(4602);
-      var _ampMode = __webpack_require__(4841);
+      var _ampContext = __webpack_require__(1391);
+      var _ampMode = __webpack_require__(9757);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampMode).isInAmpMode(
@@ -61,7 +61,7 @@
       /***/
     },
 
-    /***/ 7249: /***/ function(
+    /***/ 1357: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -78,7 +78,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        3485
+        7481
       );
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_amp__WEBPACK_IMPORTED_MODULE_0__
@@ -102,7 +102,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(6530);
+      return __webpack_exec__(2880);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for css-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [706],
   {
-    /***/ 631: /***/ function(
+    /***/ 1737: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(1293);
+          return __webpack_require__(7867);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1293: /***/ function(
+    /***/ 7867: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -29,7 +29,7 @@
         1760
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        2555
+        4449
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 2555: /***/ function(module) {
+    /***/ 4449: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
@@ -61,7 +61,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(631);
+      return __webpack_exec__(1737);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for dynamic-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 8963: /***/ function(
+    /***/ 9051: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(7522);
+          return __webpack_require__(6743);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6242: /***/ function(module, exports, __webpack_require__) {
+    /***/ 6343: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -34,7 +34,7 @@
       var _interop_require_default = __webpack_require__(7022) /* ["default"] */
         .Z;
       var _react = _interop_require_default(__webpack_require__(6273));
-      var _loadable = _interop_require_default(__webpack_require__(894));
+      var _loadable = _interop_require_default(__webpack_require__(5191));
       function dynamic(dynamicOptions, options) {
         var loadableFn = _loadable.default;
         var loadableOptions = (options == null
@@ -138,7 +138,7 @@
       /***/
     },
 
-    /***/ 6010: /***/ function(
+    /***/ 4144: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -160,7 +160,7 @@
       /***/
     },
 
-    /***/ 894: /***/ function(
+    /***/ 5191: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -180,7 +180,7 @@
       var _interop_require_default = __webpack_require__(7022) /* ["default"] */
         .Z;
       var _react = _interop_require_default(__webpack_require__(6273));
-      var _loadableContext = __webpack_require__(6010);
+      var _loadableContext = __webpack_require__(4144);
       var useSyncExternalStore = (true ? __webpack_require__(6273) : 0)
         .useSyncExternalStore;
       var ALL_INITIALIZERS = [];
@@ -494,7 +494,7 @@
       /***/
     },
 
-    /***/ 7522: /***/ function(
+    /***/ 6743: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -511,7 +511,7 @@
         1760
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        6706
+        9477
       );
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_dynamic__WEBPACK_IMPORTED_MODULE_1__
@@ -520,13 +520,13 @@
       var DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         function() {
           return __webpack_require__
-            .e(/* import() */ 719)
-            .then(__webpack_require__.bind(__webpack_require__, 8719));
+            .e(/* import() */ 384)
+            .then(__webpack_require__.bind(__webpack_require__, 384));
         },
         {
           loadableGenerated: {
             webpack: function() {
-              return [/*require.resolve*/ 8719];
+              return [/*require.resolve*/ 384];
             }
           }
         }
@@ -556,12 +556,12 @@
       /***/
     },
 
-    /***/ 6706: /***/ function(
+    /***/ 9477: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(6242);
+      module.exports = __webpack_require__(6343);
 
       /***/
     }
@@ -572,7 +572,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(8963);
+      return __webpack_exec__(9051);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for edge-ssr-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [800],
   {
-    /***/ 529: /***/ function(
+    /***/ 3839: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/edge-ssr",
         function() {
-          return __webpack_require__(8259);
+          return __webpack_require__(1646);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8259: /***/ function(
+    /***/ 1646: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -50,7 +50,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(529);
+      return __webpack_exec__(3839);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for head-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
-    /***/ 8780: /***/ function(
+    /***/ 2116: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function() {
-          return __webpack_require__(4169);
+          return __webpack_require__(815);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 4169: /***/ function(
+    /***/ 815: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         1760
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        8722
+        8631
       );
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_head__WEBPACK_IMPORTED_MODULE_1__
@@ -71,12 +71,12 @@
       /***/
     },
 
-    /***/ 8722: /***/ function(
+    /***/ 8631: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(4380);
+      module.exports = __webpack_require__(4860);
 
       /***/
     }
@@ -87,7 +87,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(8780);
+      return __webpack_exec__(2116);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for hooks-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [757],
   {
-    /***/ 4076: /***/ function(
+    /***/ 1042: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function() {
-          return __webpack_require__(9029);
+          return __webpack_require__(4556);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 9029: /***/ function(
+    /***/ 4556: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -132,7 +132,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(4076);
+      return __webpack_exec__(1042);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for image-HASH.js

@@ -26,7 +26,7 @@
       /***/
     },
 
-    /***/ 7735: /***/ function(
+    /***/ 7865: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -34,7 +34,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(2504);
+          return __webpack_require__(7347);
         }
       ]);
       if (false) {
@@ -43,7 +43,7 @@
       /***/
     },
 
-    /***/ 9130: /***/ function(module, exports, __webpack_require__) {
+    /***/ 460: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -66,12 +66,12 @@
         5997
       ) /* ["default"] */.Z;
       var _react = _interop_require_wildcard(__webpack_require__(6273));
-      var _head = _interop_require_default(__webpack_require__(4380));
-      var _imageConfig = __webpack_require__(628);
-      var _useIntersection = __webpack_require__(2754);
-      var _imageConfigContext = __webpack_require__(394);
-      var _utils = __webpack_require__(1077);
-      var _normalizeTrailingSlash = __webpack_require__(5423);
+      var _head = _interop_require_default(__webpack_require__(4860));
+      var _imageConfig = __webpack_require__(826);
+      var _useIntersection = __webpack_require__(9645);
+      var _imageConfigContext = __webpack_require__(789);
+      var _utils = __webpack_require__(346);
+      var _normalizeTrailingSlash = __webpack_require__(5623);
       function Image(_param) {
         var src = _param.src,
           sizes = _param.sizes,
@@ -929,7 +929,7 @@
       /***/
     },
 
-    /***/ 2754: /***/ function(module, exports, __webpack_require__) {
+    /***/ 9645: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -941,7 +941,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(6273);
-      var _requestIdleCallback = __webpack_require__(2696);
+      var _requestIdleCallback = __webpack_require__(4338);
       var hasIntersectionObserver = typeof IntersectionObserver === "function";
       var observers = new Map();
       var idList = [];
@@ -1066,7 +1066,7 @@
       /***/
     },
 
-    /***/ 2504: /***/ function(
+    /***/ 7347: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1087,8 +1087,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@0.0.0-experimental-cb5084d1c-20220924/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1760);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_bah4pvzs5m2jsombgoz6nngonm/node_modules/next/image.js
-      var next_image = __webpack_require__(1769);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_bah4pvzs5m2jsombgoz6nngonm/node_modules/next/image.js
+      var next_image = __webpack_require__(3608);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1118,12 +1118,12 @@
       /***/
     },
 
-    /***/ 1769: /***/ function(
+    /***/ 3608: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(9130);
+      module.exports = __webpack_require__(460);
 
       /***/
     }
@@ -1134,7 +1134,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(7735);
+      return __webpack_exec__(7865);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for index-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [405],
   {
-    /***/ 2047: /***/ function(
+    /***/ 1239: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function() {
-          return __webpack_require__(1593);
+          return __webpack_require__(7312);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1593: /***/ function(
+    /***/ 7312: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -46,7 +46,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function() {
-      return __webpack_exec__(2047);
+      return __webpack_exec__(1239);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for link-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [644],
   {
-    /***/ 9279: /***/ function(
+    /***/ 485: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function() {
-          return __webpack_require__(8220);
+          return __webpack_require__(244);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5030: /***/ function(module, exports) {
+    /***/ 2063: /***/ function(module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -54,7 +54,7 @@
       /***/
     },
 
-    /***/ 8399: /***/ function(module, exports, __webpack_require__) {
+    /***/ 2331: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -72,13 +72,13 @@
         5997
       ) /* ["default"] */.Z;
       var _react = _interop_require_default(__webpack_require__(6273));
-      var _router = __webpack_require__(775);
-      var _addLocale = __webpack_require__(1138);
-      var _routerContext = __webpack_require__(463);
-      var _appRouterContext = __webpack_require__(6456);
-      var _useIntersection = __webpack_require__(2754);
-      var _getDomainLocale = __webpack_require__(5030);
-      var _addBasePath = __webpack_require__(8569);
+      var _router = __webpack_require__(9305);
+      var _addLocale = __webpack_require__(253);
+      var _routerContext = __webpack_require__(9005);
+      var _appRouterContext = __webpack_require__(2456);
+      var _useIntersection = __webpack_require__(9645);
+      var _getDomainLocale = __webpack_require__(2063);
+      var _addBasePath = __webpack_require__(5524);
       ("client");
       var prefetched = {};
       function prefetch(router, href, as, options) {
@@ -429,7 +429,7 @@
       /***/
     },
 
-    /***/ 2754: /***/ function(module, exports, __webpack_require__) {
+    /***/ 9645: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -441,7 +441,7 @@
       });
       exports.useIntersection = useIntersection;
       var _react = __webpack_require__(6273);
-      var _requestIdleCallback = __webpack_require__(2696);
+      var _requestIdleCallback = __webpack_require__(4338);
       var hasIntersectionObserver = typeof IntersectionObserver === "function";
       var observers = new Map();
       var idList = [];
@@ -566,7 +566,7 @@
       /***/
     },
 
-    /***/ 6456: /***/ function(
+    /***/ 2456: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -594,7 +594,7 @@
       /***/
     },
 
-    /***/ 8220: /***/ function(
+    /***/ 244: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -611,7 +611,7 @@
         1760
       );
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        7892
+        1777
       );
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -642,12 +642,12 @@
       /***/
     },
 
-    /***/ 7892: /***/ function(
+    /***/ 1777: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8399);
+      module.exports = __webpack_require__(2331);
 
       /***/
     }
@@ -658,7 +658,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(9279);
+      return __webpack_exec__(485);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for routerDirect-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [58],
   {
-    /***/ 5847: /***/ function(
+    /***/ 4500: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function() {
-          return __webpack_require__(4570);
+          return __webpack_require__(8546);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 4570: /***/ function(
+    /***/ 8546: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         1760
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        3318
+        775
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -56,12 +56,12 @@
       /***/
     },
 
-    /***/ 3318: /***/ function(
+    /***/ 775: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2383);
+      module.exports = __webpack_require__(1134);
 
       /***/
     }
@@ -72,7 +72,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(5847);
+      return __webpack_exec__(4500);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for script-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [797],
   {
-    /***/ 7992: /***/ function(
+    /***/ 7140: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function() {
-          return __webpack_require__(1161);
+          return __webpack_require__(3391);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1161: /***/ function(
+    /***/ 3391: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         1760
       );
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        3785
+        4861
       );
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_script__WEBPACK_IMPORTED_MODULE_1__
@@ -70,12 +70,12 @@
       /***/
     },
 
-    /***/ 3785: /***/ function(
+    /***/ 4861: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = false ? 0 : __webpack_require__(3921);
+      module.exports = false ? 0 : __webpack_require__(1649);
 
       /***/
     }
@@ -86,7 +86,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(7992);
+      return __webpack_exec__(7140);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for withRouter-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [807],
   {
-    /***/ 5996: /***/ function(
+    /***/ 3377: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function() {
-          return __webpack_require__(4554);
+          return __webpack_require__(7728);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 4554: /***/ function(
+    /***/ 7728: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,7 +35,7 @@
         1760
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        3318
+        775
       );
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -54,12 +54,12 @@
       /***/
     },
 
-    /***/ 3318: /***/ function(
+    /***/ 775: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(2383);
+      module.exports = __webpack_require__(1134);
 
       /***/
     }
@@ -70,7 +70,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function() {
-      return __webpack_exec__(5996);
+      return __webpack_exec__(3377);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 709-HASH.js

@@ -1,6 +1,6 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [709],
+  [989],
   {
     /***/ 8286: /***/ function(__unused_webpack_module, exports) {
       Object.defineProperty(exports, "__esModule", {
@@ -711,7 +711,7 @@
       /***/
     },
 
-    /***/ 8833: /***/ function(module, exports, __webpack_require__) {
+    /***/ 347: /***/ function(module, exports, __webpack_require__) {
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -727,11 +727,11 @@
         8889
       ) /* ["default"] */.Z;
       var _react = _interop_require_wildcard(__webpack_require__(6273));
-      var _reactServerDomWebpack = __webpack_require__(6769);
-      var _appRouterContext = __webpack_require__(6456);
-      var _reducer = __webpack_require__(5316);
-      var _hooksClientContext = __webpack_require__(8571);
-      var _useReducerWithDevtools = __webpack_require__(5007);
+      var _reactServerDomWebpack = __webpack_require__(2418);
+      var _appRouterContext = __webpack_require__(2456);
+      var _reducer = __webpack_require__(2707);
+      var _hooksClientContext = __webpack_require__(2515);
+      var _useReducerWithDevtools = __webpack_require__(7527);
       function AppRouter(param) {
         var initialTree = param.initialTree,
           initialCanonicalUrl = param.initialCanonicalUrl,
@@ -1137,7 +1137,7 @@
       /***/
     },
 
-    /***/ 8571: /***/ function(module, exports, __webpack_require__) {
+    /***/ 2515: /***/ function(module, exports, __webpack_require__) {
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -1168,7 +1168,7 @@
       /***/
     },
 
-    /***/ 8445: /***/ function(module, exports) {
+    /***/ 3128: /***/ function(module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -1204,7 +1204,7 @@
       /***/
     },
 
-    /***/ 3709: /***/ function(module, exports, __webpack_require__) {
+    /***/ 7989: /***/ function(module, exports, __webpack_require__) {
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -1225,9 +1225,9 @@
         8889
       ) /* ["default"] */.Z;
       var _react = _interop_require_wildcard(__webpack_require__(6273));
-      var _appRouterContext = __webpack_require__(6456);
-      var _appRouterClient = __webpack_require__(8833);
-      var _infinitePromise = __webpack_require__(8445);
+      var _appRouterContext = __webpack_require__(2456);
+      var _appRouterClient = __webpack_require__(347);
+      var _infinitePromise = __webpack_require__(3128);
       function OuterLayoutRouter(param) {
         var parallelRouterKey = param.parallelRouterKey,
           segmentPath = param.segmentPath,
@@ -1801,7 +1801,7 @@
       /***/
     },
 
-    /***/ 5635: /***/ function(module, exports) {
+    /***/ 7098: /***/ function(module, exports) {
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -1839,7 +1839,7 @@
       /***/
     },
 
-    /***/ 5316: /***/ function(module, exports, __webpack_require__) {
+    /***/ 2707: /***/ function(module, exports, __webpack_require__) {
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -1851,8 +1851,8 @@
       });
       exports.reducer = exports.ACTION_PREFETCH = exports.ACTION_SERVER_PATCH = exports.ACTION_RESTORE = exports.ACTION_NAVIGATE = exports.ACTION_RELOAD = void 0;
       var _extends = __webpack_require__(5506) /* ["default"] */.Z;
-      var _matchSegments = __webpack_require__(5635);
-      var _appRouterClient = __webpack_require__(8833); // TODO-APP: change `any` to type inference.
+      var _matchSegments = __webpack_require__(7098);
+      var _appRouterClient = __webpack_require__(347); // TODO-APP: change `any` to type inference.
       /**
        * Create data fetching record for Promise.
        */ function createRecordFromThenable(thenable) {
@@ -2806,7 +2806,7 @@
       /***/
     },
 
-    /***/ 5007: /***/ function(module, exports, __webpack_require__) {
+    /***/ 7527: /***/ function(module, exports, __webpack_require__) {
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
@@ -2981,7 +2981,7 @@
       /***/
     },
 
-    /***/ 6456: /***/ function(
+    /***/ 2456: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -3007,7 +3007,7 @@
       /***/
     },
 
-    /***/ 2712: /***/ function(
+    /***/ 6314: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -3446,13 +3446,13 @@
       /***/
     },
 
-    /***/ 6769: /***/ function(
+    /***/ 2418: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
       if (true) {
-        module.exports = __webpack_require__(2712);
+        module.exports = __webpack_require__(6314);
       } else {
       }

Diff for 719.HASH.js

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

Diff for app-internals-HASH.js

@@ -1,25 +1,25 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [532],
   {
-    /***/ 1719: /***/ function(
+    /***/ 2162: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 3709, 23)
+        __webpack_require__.t.bind(__webpack_require__, 347, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4579, 23)
+        __webpack_require__.t.bind(__webpack_require__, 7989, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 8833, 23)
+        __webpack_require__.t.bind(__webpack_require__, 3410, 23)
       );
 
       /***/
     },
 
-    /***/ 4579: /***/ function(module, exports, __webpack_require__) {
+    /***/ 3410: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -30,7 +30,7 @@
         8889
       ) /* ["default"] */.Z;
       var _react = _intero
Post job cleanup.
[command]/usr/bin/git version
git version 2.37.3
Temporarily overriding HOME='/home/runner/work/_temp/b836a507-3fcf-40f0-ab82-4cc1b7af77c9' before making global git config changes
Adding repository directory to the temporary git global config as a safe directory
[command]/usr/bin/git config --global --add safe.directory /home/runner/work/next.js/next.js
[command]/usr/bin/git config --local --name-only --get-regexp core\.sshCommand
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'core\.sshCommand' && git config --local --unset-all 'core.sshCommand' || :
[command]/usr/bin/git config --local --name-only --get-regexp http\.https\:\/\/github\.com\/\.extraheader
http.https://github.com/.extraheader
[command]/usr/bin/git config --local --unset-all http.https://github.com/.extraheader
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'http\.https\:\/\/github\.com\/\.extraheader' && git config --local --unset-all 'http.https://github.com/.extraheader' || :
Cleaning up orphan processes
Commit: f6468f3c7e87cd07317458b9fe9690249ec7ea8b

docs/advanced-features/measuring-performance.md

packages/next/client/performance-relayer.ts

docs/advanced-features/measuring-performance.md

leerob

Docs LGTM

This commit implements the main proposal presented in vercel#39241 to add attribution to web vitals. Attribution adds more specific debugging info to web vitals, for example in the case of Cumulative Layout Shift (CLS), we might want to know > What's the first element that shifted when the single largest layout shift occurred? on in the case of Largest Contentful Paint (LCP), > What's the element corresponding to the LCP for the page? > If it is an image, what's the URL of the image resource? Attribution is *disabled* by default because it could potentially generate a lot data and overwhelm the RUM backend. It is enabled *per metric* (LCP, FCP, CLS, etc) As part of this change, `web-vitals` has been upgraded to v3.0.0-rc.0 This version contains minor bug fixes, please see changelog at GoogleChrome/web-vitals@9fe3cc0

ijjk

Thanks!

changes applied

This commit implements the main proposal presented in vercel#39241 to add attribution to web vitals. Attribution adds more specific debugging info to web vitals, for example in the case of Cumulative Layout Shift (CLS), we might want to know > What's the first element that shifted when the single largest layout shift occurred? on in the case of Largest Contentful Paint (LCP), > What's the element corresponding to the LCP for the page? > If it is an image, what's the URL of the image resource? Attribution is *disabled* by default because it could potentially generate a lot data and overwhelm the RUM backend. It is enabled *per metric* (LCP, FCP, CLS, etc) As part of this change, `web-vitals` has been upgraded to v3.0.0 This version contains minor bug fixes, please see changelog at GoogleChrome/web-vitals@9fe3cc0 Fixes vercel#39241 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] 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 `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

kyliau requested review from timneutkens, ijjk, shuding, styfle, huozhi, padmaia, leerob and balazsorban44 as code owners August 5, 2022 20:49

ijjk added area: documentation created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Aug 5, 2022

kyliau force-pushed the web-vitals-attribution-2 branch from 4044000 to f82e03b Compare August 8, 2022 22:23

ijjk reviewed Aug 9, 2022

View reviewed changes

docs/advanced-features/measuring-performance.md Outdated Show resolved Hide resolved

leerob previously requested changes Aug 9, 2022

View reviewed changes

docs/advanced-features/measuring-performance.md Outdated Show resolved Hide resolved

kyliau force-pushed the web-vitals-attribution-2 branch from c2b6bd6 to 30f665a Compare August 9, 2022 18:43

kyliau requested a review from leerob August 9, 2022 18:43

leerob reviewed Aug 12, 2022

View reviewed changes

docs/advanced-features/measuring-performance.md Outdated Show resolved Hide resolved

kyliau force-pushed the web-vitals-attribution-2 branch 4 times, most recently from c479b9b to fd3d3d8 Compare August 29, 2022 19:36

kyliau force-pushed the web-vitals-attribution-2 branch 2 times, most recently from 5a751c6 to 5d11bf3 Compare September 6, 2022 18:37

kyliau requested a review from leerob September 6, 2022 18:39

kyliau force-pushed the web-vitals-attribution-2 branch from 2e331ac to 6b3076f Compare September 27, 2022 18:11

ijjk reviewed Sep 27, 2022

View reviewed changes

packages/next/client/performance-relayer.ts Outdated Show resolved Hide resolved

ijjk reviewed Sep 27, 2022

View reviewed changes

docs/advanced-features/measuring-performance.md Outdated Show resolved Hide resolved

leerob reviewed Sep 27, 2022

View reviewed changes

kyliau force-pushed the web-vitals-attribution-2 branch from c78810d to 6ca72f2 Compare September 28, 2022 18:36

kyliau force-pushed the web-vitals-attribution-2 branch from 6ca72f2 to cdb5c64 Compare September 28, 2022 20:06

kyliau requested a review from ijjk September 28, 2022 23:02

Keen Yee Liau added 3 commits October 3, 2022 15:14

lazy load web-vitals and web-vitals/attribution

6d05e44

make web vitals attribution experimental

cc51c1e

kyliau force-pushed the web-vitals-attribution-2 branch from cdb5c64 to cc51c1e Compare October 3, 2022 21:14

ijjk added 2 commits October 3, 2022 15:33

update handling

a39c6d5

tweak imports

9872b15

ijjk approved these changes Oct 3, 2022

View reviewed changes

Merge branch 'canary' into web-vitals-attribution-2

331ae32

Merge branch 'canary' into web-vitals-attribution-2

f6468f3

kodiakhq bot merged commit c7ab831 into vercel:canary Oct 4, 2022

ijjk added the hacktoberfest-accepted label Oct 4, 2022

kyliau deleted the web-vitals-attribution-2 branch October 11, 2022 03:01

github-actions bot locked as resolved and limited conversation to collaborators Nov 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add attribution to web vitals #39368

add attribution to web vitals #39368

kyliau commented Aug 5, 2022 •

edited

Loading

ijjk commented Aug 5, 2022 •

edited

Loading

Diffs

leerob left a comment

ijjk left a comment

add attribution to web vitals #39368

add attribution to web vitals #39368

Conversation

kyliau commented Aug 5, 2022 • edited Loading

Bug

Feature

Documentation / Examples

ijjk commented Aug 5, 2022 • edited Loading

Stats from current PR

Diffs

leerob left a comment

Choose a reason for hiding this comment

ijjk left a comment

Choose a reason for hiding this comment

kyliau commented Aug 5, 2022 •

edited

Loading

ijjk commented Aug 5, 2022 •

edited

Loading