add method to measure Interaction to Next Paint (INP)

`web-vitals` CHANGELOG for v3:

- [BREAKING] Report TTFB after a bfcache restore
- [BREAKING] Only include last LCP entry in metric entries
- Add support for the new INP metric
- Rename getXXX() functions to onXXX()
- Add a navigationType property to the Metric object

See https://github.com/GoogleChrome/web-vitals/blob/next/CHANGELOG.md

Author: Keen Yee Liau

packages/next/client/performance-relayer.ts

@@ -1,17 +1,18 @@
 /* global location */
 import {
-  getCLS,
-  getFCP,
-  getFID,
-  getLCP,
-  getTTFB,
+  onCLS,
+  onFCP,
+  onFID,
+  onINP,
+  onLCP,
+  onTTFB,
   Metric,
-  ReportHandler,
+  ReportCallback,
 } from 'next/dist/compiled/web-vitals'
 
 const initialHref = location.href
 let isRegistered = false
-let userReportHandler: ReportHandler | undefined
+let userReportHandler: ReportCallback | undefined
 
 function onReport(metric: Metric): void {
   if (userReportHandler) {
@@ -71,7 +72,7 @@ function onReport(metric: Metric): void {
   }
 }
 
-export default (onPerfEntry?: ReportHandler): void => {
+export default (onPerfEntry?: ReportCallback): void => {
   // Update function if it changes:
   userReportHandler = onPerfEntry
 
@@ -81,9 +82,10 @@ export default (onPerfEntry?: ReportHandler): void => {
   }
   isRegistered = true
 
-  getCLS(onReport)
-  getFID(onReport)
-  getFCP(onReport)
-  getLCP(onReport)
-  getTTFB(onReport)
+  onCLS(onReport)
+  onFID(onReport)
+  onFCP(onReport)
+  onLCP(onReport)
+  onTTFB(onReport)
+  onINP(onReport)
 }

packages/next/compiled/web-vitals/web-vitals.umd.js

@@ -266,7 +266,7 @@
     "vm-browserify": "1.1.2",
     "watchpack": "2.3.1",
     "web-streams-polyfill": "3.0.3",
-    "web-vitals": "2.1.0",
+    "web-vitals": "3.0.0-beta.1",
     "webpack-sources1": "npm:[email protected]",
     "webpack-sources3": "npm:[email protected]",
     "webpack4": "npm:[email protected]",

packages/next/package.json

@@ -21537,10 +21537,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.1.tgz#3b19b9817374b7cee06d374ba7eeb3aeb80e8c95"
   integrity sha512-3ux37gEX670UUphBF9AMCq8XM6iQ8Ac6A+DSRRjDoRBm1ufCkaCDdNVbaqq60PsEkdNlLKrGtv/YBP4EJXqNtQ==
 
-web-vitals@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.0.tgz#ebf5428875ab5bfc1056c2e80cd177001287de7b"
-  integrity sha512-npEyJP8jHf3J71t1tRTEtz9FeKp8H2udWJUUq5ykfPhhstr//TUxiYhIEzLNwk4zv2ybAilMn7v7N6Mxmuitmg==
+web-vitals@3.0.0-beta.1:
+  version "3.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.0.0-beta.1.tgz#cfa887f270be52d0bee1249d246d78271a71e55d"
+  integrity sha512-iXNgLB8vrEfeBEfKZYmJSQCcw3fUBP1TuO/3lorvD3L8Jn77ZLnU1oh2a9olUxuiAcEdfOdP98H4Idfigy8llg==
 
 webcrypto-core@^1.6.0:
   version "1.6.0"