chore: indicate staleness more prominently in `next info` output #60376

balazsorban44 · 2024-01-08T11:16:18Z

What?

Improve the next info output.

Before:

After:

Why?

People have been ignoring the ask to check next@canary before opening a new issue, which results in triaging overhead. This PR inlines the warning into next info that would make it an extra effort to remove the warning without reading the message, hopefully leading to not ignoring the message anymore.

How?

Reusing the same logic from the version staleness indicator from Error Overlay.

Slack thread

balazsorban44 · 2024-01-08T11:22:59Z

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -40,13 +40,6 @@ body:
      placeholder: 'Following the steps from the previous section, I expected A to happen, but I observed B instead'
    validations:
      required: true
-  - type: checkboxes


Let me know if we should still leave this or not.

ijjk · 2024-01-08T11:23:47Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
buildDuration	11.9s	12.7s	⚠️ +795ms
buildDurationCached	6.2s	6s	N/A
nodeModulesSize	200 MB	200 MB	⚠️ +566 kB
nextStartRea..uration (ms)	427ms	429ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
193.HASH.js gzip	181 B	182 B	N/A
3f784ff6-HASH.js gzip	53.4 kB	53.3 kB	N/A
433-HASH.js gzip	29 kB	28.6 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	240 B	242 B	N/A
main-HASH.js gzip	31.8 kB	31.8 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	45.2 kB	45.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	183 B	181 B	N/A
amp-HASH.js gzip	504 B	502 B	N/A
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	253 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	369 B	369 B	✓
image-HASH.js gzip	4.18 kB	4.28 kB	N/A
index-HASH.js gzip	255 B	256 B	N/A
link-HASH.js gzip	2.61 kB	2.61 kB	✓
routerDirect..HASH.js gzip	312 B	311 B	N/A
script-HASH.js gzip	385 B	383 B	N/A
withRouter-HASH.js gzip	307 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.4 kB	3.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
_buildManifest.js gzip	484 B	484 B	✓
Overall change	484 B	484 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
index.html gzip	528 B	525 B	N/A
link.html gzip	540 B	540 B	✓
withRouter.html gzip	523 B	523 B	✓
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
edge-ssr.js gzip	94 kB	93.8 kB	N/A
page.js gzip	148 kB	147 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
middleware-b..fest.js gzip	624 B	624 B	✓
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	37.5 kB	37.4 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	2.7 kB	2.7 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js chore/tweak-cli-info-output	Change
app-page-exp...dev.js gzip	169 kB	169 kB	N/A
app-page-exp..prod.js gzip	95.6 kB	94.2 kB	N/A
app-page-tur..prod.js gzip	96.3 kB	94.9 kB	N/A
app-page-tur..prod.js gzip	90.8 kB	89.5 kB	N/A
app-page.run...dev.js gzip	142 kB	139 kB	N/A
app-page.run..prod.js gzip	90.2 kB	88.8 kB	N/A
app-route-ex...dev.js gzip	24.2 kB	24.1 kB	N/A
app-route-ex..prod.js gzip	16.8 kB	16.7 kB	N/A
app-route-tu..prod.js gzip	16.8 kB	16.7 kB	N/A
app-route-tu..prod.js gzip	16.4 kB	16.3 kB	N/A
app-route.ru...dev.js gzip	23.6 kB	23.5 kB	N/A
app-route.ru..prod.js gzip	16.4 kB	16.3 kB	N/A
pages-api-tu..prod.js gzip	9.39 kB	9.38 kB	N/A
pages-api.ru...dev.js gzip	9.67 kB	9.65 kB	N/A
pages-api.ru..prod.js gzip	9.39 kB	9.37 kB	N/A
pages-turbo...prod.js gzip	22 kB	21.9 kB	N/A
pages.runtim...dev.js gzip	22.6 kB	22.6 kB	N/A
pages.runtim..prod.js gzip	22 kB	21.9 kB	N/A
server.runti..prod.js gzip	49.7 kB	49.5 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 1552: /***/ function (
+    /***/ 4070: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8769);
+          return __webpack_require__(3697);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 359: /***/ function (module, exports, __webpack_require__) {
+    /***/ 2353: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4489)
+        __webpack_require__(2272)
       );
-      const _getimgprops = __webpack_require__(9997);
-      const _imageconfig = __webpack_require__(9747);
-      const _imageconfigcontextsharedruntime = __webpack_require__(9429);
-      const _warnonce = __webpack_require__(5761);
-      const _routercontextsharedruntime = __webpack_require__(2991);
+      const _getimgprops = __webpack_require__(2530);
+      const _imageconfig = __webpack_require__(4899);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9292);
+      const _warnonce = __webpack_require__(4213);
+      const _routercontextsharedruntime = __webpack_require__(7084);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5076)
+        __webpack_require__(7443)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -373,7 +373,7 @@
       /***/
     },
 
-    /***/ 9997: /***/ function (
+    /***/ 2530: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -389,9 +389,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(5761);
-      const _imageblursvg = __webpack_require__(8543);
-      const _imageconfig = __webpack_require__(9747);
+      const _warnonce = __webpack_require__(4213);
+      const _imageblursvg = __webpack_require__(3139);
+      const _imageconfig = __webpack_require__(4899);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -760,7 +760,7 @@
       /***/
     },
 
-    /***/ 8543: /***/ function (__unused_webpack_module, exports) {
+    /***/ 3139: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -815,7 +815,7 @@
       /***/
     },
 
-    /***/ 3103: /***/ function (
+    /***/ 3067: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -834,20 +834,24 @@
           });
       }
       _export(exports, {
-        getImageProps: function () {
-          return getImageProps;
+        unstable_getImgProps: function () {
+          return unstable_getImgProps;
         },
         default: function () {
           return _default;
         },
       });
       const _interop_require_default = __webpack_require__(1351);
-      const _getimgprops = __webpack_require__(9997);
-      const _imagecomponent = __webpack_require__(359);
+      const _getimgprops = __webpack_require__(2530);
+      const _warnonce = __webpack_require__(4213);
+      const _imagecomponent = __webpack_require__(2353);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5076)
+        __webpack_require__(7443)
       );
-      const getImageProps = (imgProps) => {
+      const unstable_getImgProps = (imgProps) => {
+        (0, _warnonce.warnOnce)(
+          "Warning: unstable_getImgProps() is experimental and may change or be removed at any time. Use at your own risk."
+        );
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
           defaultLoader: _imageloader.default,
           // This is replaced by webpack define plugin
@@ -860,9 +864,6 @@
             unoptimized: false,
           },
         });
-        // Normally we don't care about undefined props because we pass to JSX,
-        // but this exported function could be used by the end user for anything
-        // so we delete undefined props to clean it up a little.
         for (const [key, value] of Object.entries(props)) {
           if (value === undefined) {
             delete props[key];
@@ -877,7 +878,7 @@
       /***/
     },
 
-    /***/ 5076: /***/ function (__unused_webpack_module, exports) {
+    /***/ 7443: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -912,7 +913,7 @@
       /***/
     },
 
-    /***/ 8769: /***/ function (
+    /***/ 3697: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -933,8 +934,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       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",
@@ -964,12 +965,12 @@
       /***/
     },
 
-    /***/ 1577: /***/ function (
+    /***/ 73: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3103);
+      module.exports = __webpack_require__(3067);
 
       /***/
     },
@@ -980,7 +981,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(1552);
+      return __webpack_exec__(4070);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 3f784ff6-HASH.js

Diff too large to display

Diff for 433-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for pages-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 716315d

ijjk · 2024-01-08T11:24:38Z

Failing test suites

Commit: 716315d

pnpm test test/integration/preload-viewport/test/index.test.js

Prefetching Links in viewport > production mode > should prefetch with non-bot UA

Expand output

● Prefetching Links in viewport › production mode › should prefetch with non-bot UA

expect(received).toHaveLength(expected)

Expected length: 1
Received length: 0
Received array:  []

  129 |         )
  130 |         const links = await browser.elementsByCss('link[rel=prefetch]')
> 131 |         expect(links).toHaveLength(1)
      |                       ^
  132 |       } finally {
  133 |         if (browser) await browser.close()
  134 |       }

  at Object.toHaveLength (integration/preload-viewport/test/index.test.js:131:23)

Read more about building and testing Next.js in contributing.md.

packages/next/src/cli/next-info.ts

samcx

:lgtm:

balazsorban44 added 2 commits January 8, 2024 12:09

chore: tweak next info output

49dec61

remove checkbox

bd018e6

balazsorban44 requested review from a team, timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners January 8, 2024 11:16

balazsorban44 requested review from timeyoutakeit and delbaoliveira and removed request for a team January 8, 2024 11:16

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Jan 8, 2024

balazsorban44 commented Jan 8, 2024

View reviewed changes

styfle reviewed Jan 8, 2024

View reviewed changes

packages/next/src/cli/next-info.ts Show resolved Hide resolved

Update next-info.ts

716315d

balazsorban44 requested a review from styfle January 19, 2024 17:26

samcx self-requested a review January 19, 2024 17:27

samcx approved these changes Jan 19, 2024

View reviewed changes

balazsorban44 merged commit dc109bf into canary Jan 19, 2024
57 of 65 checks passed

balazsorban44 deleted the chore/tweak-cli-info-output branch January 19, 2024 17:36

vordgi mentioned this pull request Jan 21, 2024

Remove obsolete ("remove after next minor") #60930

Open

github-actions bot added the locked label Feb 3, 2024

github-actions bot locked as resolved and limited conversation to collaborators Feb 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: indicate staleness more prominently in `next info` output #60376

chore: indicate staleness more prominently in `next info` output #60376

balazsorban44 commented Jan 8, 2024 •

edited

balazsorban44 Jan 8, 2024

ijjk commented Jan 8, 2024 •

edited

ijjk commented Jan 8, 2024 •

edited

samcx left a comment

chore: indicate staleness more prominently in next info output #60376

chore: indicate staleness more prominently in next info output #60376

Conversation

balazsorban44 commented Jan 8, 2024 • edited

What?

Why?

How?

balazsorban44 Jan 8, 2024

Choose a reason for hiding this comment

ijjk commented Jan 8, 2024 • edited

Stats from current PR

ijjk commented Jan 8, 2024 • edited

Failing test suites

samcx left a comment

Choose a reason for hiding this comment

chore: indicate staleness more prominently in `next info` output #60376

chore: indicate staleness more prominently in `next info` output #60376

balazsorban44 commented Jan 8, 2024 •

edited

ijjk commented Jan 8, 2024 •

edited

ijjk commented Jan 8, 2024 •

edited