[Backport 15.0] Use React 19 stable in Pages Router #73564

eps1lon · 2024-12-05T20:11:25Z

Upgrade codemod works with canary.43 and internal sync is green. This should be good to backport so that we have a stable Next.js release with support for stable 19 as soon as possible.

ijjk · 2024-12-05T20:27:38Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
buildDuration	21.7s	20.7s	N/A
buildDurationCached	18.5s	15.8s	N/A
nodeModulesSize	409 MB	404 MB	N/A
nextStartRea..uration (ms)	490ms	489ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
1187-HASH.js gzip	49.2 kB	45.5 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.3 kB	5.27 kB	N/A
bccd1874-HASH.js gzip	53 kB	52.5 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	✓
main-app-HASH.js gzip	232 B	234 B	N/A
main-HASH.js gzip	33.7 kB	33.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	57.5 kB	57.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	513 B	511 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.44 kB	4.41 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.77 kB	⚠️ +430 B
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	4.09 kB	4.53 kB	⚠️ +430 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
_buildManifest.js gzip	746 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
index.html gzip	524 B	523 B	N/A
link.html gzip	538 B	539 B	N/A
withRouter.html gzip	520 B	520 B	✓
Overall change	520 B	520 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	200 kB	198 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
middleware-b..fest.js gzip	665 B	666 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.1 kB	31 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
797-experime...dev.js gzip	322 B	322 B	✓
797.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	321 kB	319 kB	N/A
app-page-exp..prod.js gzip	126 kB	123 kB	N/A
app-page-tur..prod.js gzip	139 kB	136 kB	N/A
app-page-tur..prod.js gzip	134 kB	131 kB	N/A
app-page.run...dev.js gzip	311 kB	309 kB	N/A
app-page.run..prod.js gzip	122 kB	119 kB	N/A
app-route-ex...dev.js gzip	36.8 kB	36 kB	N/A
app-route-ex..prod.js gzip	25 kB	24.4 kB	N/A
app-route-tu..prod.js gzip	25 kB	24.4 kB	N/A
app-route-tu..prod.js gzip	24.8 kB	24.2 kB	N/A
app-route.ru...dev.js gzip	38.5 kB	37.6 kB	N/A
app-route.ru..prod.js gzip	24.8 kB	24.2 kB	N/A
pages-api-tu..prod.js gzip	9.56 kB	9.59 kB	N/A
pages-api.ru...dev.js gzip	11.4 kB	11.4 kB	N/A
pages-api.ru..prod.js gzip	9.56 kB	9.58 kB	N/A
pages-turbo...prod.js gzip	21.3 kB	20.9 kB	N/A
pages.runtim...dev.js gzip	27 kB	26.5 kB	N/A
pages.runtim..prod.js gzip	21.3 kB	20.9 kB	N/A
server.runti..prod.js gzip	916 kB	915 kB	N/A
Overall change	636 B	636 B	✓

build cache

	vercel/next.js canary	vercel/next.js sebbie/backport-19	Change
0.pack gzip	2.03 MB	2 MB	N/A
index.pack gzip	146 kB	141 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([
   [2983],
   {
-    /***/ 3705: /***/ (
+    /***/ 8255: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8448);
+          return __webpack_require__(8926);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7342: /***/ (module, exports, __webpack_require__) => {
+    /***/ 4369: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(6049)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7196)
+        __webpack_require__(956)
       );
-      const _getimgprops = __webpack_require__(2661);
-      const _imageconfig = __webpack_require__(72);
-      const _imageconfigcontextsharedruntime = __webpack_require__(6386);
-      const _warnonce = __webpack_require__(4496);
-      const _routercontextsharedruntime = __webpack_require__(6443);
+      const _getimgprops = __webpack_require__(485);
+      const _imageconfig = __webpack_require__(4664);
+      const _imageconfigcontextsharedruntime = __webpack_require__(1250);
+      const _warnonce = __webpack_require__(1648);
+      const _routercontextsharedruntime = __webpack_require__(907);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
-      const _usemergedref = __webpack_require__(1942);
+      const _usemergedref = __webpack_require__(5942);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 1942: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5942: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 2661: /***/ (
+    /***/ 485: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4496);
-      const _imageblursvg = __webpack_require__(4796);
-      const _imageconfig = __webpack_require__(72);
+      const _warnonce = __webpack_require__(1648);
+      const _imageblursvg = __webpack_require__(4812);
+      const _imageconfig = __webpack_require__(4664);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -726,8 +726,8 @@
         }
         if (
           isDefaultLoader &&
-          !config.dangerouslyAllowSVG &&
-          src.split("?", 1)[0].endsWith(".svg")
+          src.endsWith(".svg") &&
+          !config.dangerouslyAllowSVG
         ) {
           // Special case to make svg serve as-is to avoid proxying
           // through the built-in Image Optimization API.
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 4796: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4812: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -879,7 +879,7 @@
       /***/
     },
 
-    /***/ 1969: /***/ (
+    /***/ 8273: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -906,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1739);
-      const _getimgprops = __webpack_require__(2661);
-      const _imagecomponent = __webpack_require__(7342);
+      const _getimgprops = __webpack_require__(485);
+      const _imagecomponent = __webpack_require__(4369);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 3433: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6489: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -965,7 +965,7 @@
           width +
           "&q=" +
           (quality || 75) +
-          (src.startsWith("/_next/static/media/") && false ? 0 : "")
+          (false ? 0 : "")
         );
       }
       // We use this to determine if the import is the default loader
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 8448: /***/ (
+    /***/ 8926: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -993,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5105);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/image.js
-      var next_image = __webpack_require__(8140);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/image.js
+      var next_image = __webpack_require__(5434);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 8140: /***/ (
+    /***/ 5434: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(1969);
+      module.exports = __webpack_require__(8273);
 
       /***/
     },
@@ -1039,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3705)
+      __webpack_exec__(8255)
     );
     /******/ 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([
   [4672],
   {
-    /***/ 3679: /***/ (
+    /***/ 6613: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function () {
-          return __webpack_require__(8562);
+          return __webpack_require__(2488);
         },
       ]);
       if (false) {
@@ -18,7 +18,85 @@
       /***/
     },
 
-    /***/ 7597: /***/ (module, exports, __webpack_require__) => {
+    /***/ 7002: /***/ (module, exports) => {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      0 && 0;
+      function _export(target, all) {
+        for (var name in all)
+          Object.defineProperty(target, name, {
+            enumerable: true,
+            get: all[name],
+          });
+      }
+      _export(exports, {
+        ACTION_HMR_REFRESH: function () {
+          return ACTION_HMR_REFRESH;
+        },
+        ACTION_NAVIGATE: function () {
+          return ACTION_NAVIGATE;
+        },
+        ACTION_PREFETCH: function () {
+          return ACTION_PREFETCH;
+        },
+        ACTION_REFRESH: function () {
+          return ACTION_REFRESH;
+        },
+        ACTION_RESTORE: function () {
+          return ACTION_RESTORE;
+        },
+        ACTION_SERVER_ACTION: function () {
+          return ACTION_SERVER_ACTION;
+        },
+        ACTION_SERVER_PATCH: function () {
+          return ACTION_SERVER_PATCH;
+        },
+        PrefetchCacheEntryStatus: function () {
+          return PrefetchCacheEntryStatus;
+        },
+        PrefetchKind: function () {
+          return PrefetchKind;
+        },
+      });
+      const ACTION_REFRESH = "refresh";
+      const ACTION_NAVIGATE = "navigate";
+      const ACTION_RESTORE = "restore";
+      const ACTION_SERVER_PATCH = "server-patch";
+      const ACTION_PREFETCH = "prefetch";
+      const ACTION_HMR_REFRESH = "hmr-refresh";
+      const ACTION_SERVER_ACTION = "server-action";
+      var PrefetchKind;
+      (function (PrefetchKind) {
+        PrefetchKind["AUTO"] = "auto";
+        PrefetchKind["FULL"] = "full";
+        PrefetchKind["TEMPORARY"] = "temporary";
+      })(PrefetchKind || (PrefetchKind = {}));
+      var PrefetchCacheEntryStatus;
+      (function (PrefetchCacheEntryStatus) {
+        PrefetchCacheEntryStatus["fresh"] = "fresh";
+        PrefetchCacheEntryStatus["reusable"] = "reusable";
+        PrefetchCacheEntryStatus["expired"] = "expired";
+        PrefetchCacheEntryStatus["stale"] = "stale";
+      })(PrefetchCacheEntryStatus || (PrefetchCacheEntryStatus = {}));
+      if (
+        (typeof exports.default === "function" ||
+          (typeof exports.default === "object" && exports.default !== null)) &&
+        typeof exports.default.__esModule === "undefined"
+      ) {
+        Object.defineProperty(exports.default, "__esModule", {
+          value: true,
+        });
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
+      } //# sourceMappingURL=router-reducer-types.js.map
+
+      /***/
+    },
+
+    /***/ 58: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -30,7 +108,7 @@
           return getDomainLocale;
         },
       });
-      const _normalizetrailingslash = __webpack_require__(4858);
+      const _normalizetrailingslash = __webpack_require__(8650);
       const basePath =
         /* unused pure expression or super */ null && (false || "");
       function getDomainLocale(path, locale, locales, domainLocales) {
@@ -54,7 +132,7 @@
       /***/
     },
 
-    /***/ 3000: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9400: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -71,26 +149,32 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(8101)
       );
-      const _resolvehref = __webpack_require__(9978);
-      const _islocalurl = __webpack_require__(1762);
-      const _formaturl = __webpack_require__(9835);
-      const _utils = __webpack_require__(4781);
-      const _addlocale = __webpack_require__(5244);
-      const _routercontextsharedruntime = __webpack_require__(6443);
-      const _useintersection = __webpack_require__(1587);
-      const _getdomainlocale = __webpack_require__(7597);
-      const _addbasepath = __webpack_require__(7439);
-      const _usemergedref = __webpack_require__(1942);
+      const _resolvehref = __webpack_require__(5066);
+      const _islocalurl = __webpack_require__(5266);
+      const _formaturl = __webpack_require__(4507);
+      const _utils = __webpack_require__(3085);
+      const _addlocale = __webpack_require__(8172);
+      const _routercontextsharedruntime = __webpack_require__(907);
+      const _approutercontextsharedruntime = __webpack_require__(1109);
+      const _useintersection = __webpack_require__(9347);
+      const _getdomainlocale = __webpack_require__(58);
+      const _addbasepath = __webpack_require__(943);
+      const _routerreducertypes = __webpack_require__(7002);
+      const _usemergedref = __webpack_require__(5942);
       const prefetched = new Set();
-      function prefetch(router, href, as, options) {
+      function prefetch(router, href, as, options, appOptions, isAppRouter) {
         if (false) {
         }
-        if (!(0, _islocalurl.isLocalURL)(href)) {
+        // app-router supports external urls out of the box so it shouldn't short-circuit here as support for e.g. `replace` is added in the app-router.
+        if (!isAppRouter && !(0, _islocalurl.isLocalURL)(href)) {
           return;
         }
         // We should only dedupe requests when experimental.optimisticClientCache is
-        // disabled.
-        if (!options.bypassPrefetchedCheck) {
+        // disabled & when we're not using the app router. App router handles
+        // reusing an existing prefetch entry (if it exists) for the same URL.
+        // If we dedupe in here, we will cause a race where different prefetch kinds
+        // to the same URL (ie auto vs true) will cause one to be ignored.
+        if (!options.bypassPrefetchedCheck && !isAppRouter) {
           const locale =
             typeof options.locale !== "undefined"
               ? options.locale
@@ -105,11 +189,20 @@
           // Mark this URL as prefetched.
           prefetched.add(prefetchedKey);
         }
+        const doPrefetch = async () => {
+          if (isAppRouter) {
+            // note that `appRouter.prefetch()` is currently sync,
+            // so we have to wrap this call in an async function to be able to catch() errors below.
+            return router.prefetch(href, appOptions);
+          } else {
+            return router.prefetch(href, as, options);
+          }
+        };
         // 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((err) => {
+        doPrefetch().catch((err) => {
           if (false) {
           }
         });
@@ -134,14 +227,16 @@
         replace,
         shallow,
         scroll,
-        locale
+        locale,
+        isAppRouter
       ) {
         const { nodeName } = e.currentTarget;
         // anchors inside an svg have a lowercase nodeName
         const isAnchorNodeName = nodeName.toUpperCase() === "A";
         if (
           isAnchorNodeName &&
-          (isModifiedEvent(e) || !(0, _islocalurl.isLocalURL)(href))
+          (isModifiedEvent(e) || // app-router supports external urls out of the box so it shouldn't short-circuit here as support for e.g. `replace` is added in the app-router.
+            (!isAppRouter && !(0, _islocalurl.isLocalURL)(href)))
         ) {
           // ignore click for browser’s default behavior
           return;
@@ -162,7 +257,11 @@
             });
           }
         };
-        navigate();
+        if (isAppRouter) {
+          _react.default.startTransition(navigate);
+        } else {
+          navigate();
+        }
       }
       function formatStringOrUrl(urlObjOrString) {
         if (typeof urlObjOrString === "string") {
@@ -205,14 +304,31 @@
               children: children,
             });
           }
-          const router = _react.default.useContext(
+          const pagesRouter = _react.default.useContext(
             _routercontextsharedruntime.RouterContext
           );
+          const appRouter = _react.default.useContext(
+            _approutercontextsharedruntime.AppRouterContext
+          );
+          const router = pagesRouter != null ? pagesRouter : appRouter;
+          // We're in the app directory if there is no pages router.
+          const isAppRouter = !pagesRouter;
           const prefetchEnabled = prefetchProp !== false;
+          /**
+           * The possible states for prefetch are:
+           * - null: this is the default "auto" mode, where we will prefetch partially if the link is in the viewport
+           * - true: we will prefetch if the link is visible and prefetch the full page, not just partially
+           * - false: we will not prefetch if in the viewport at all
+           */ const appPrefetchKind =
+            prefetchProp === null
+              ? _routerreducertypes.PrefetchKind.AUTO
+              : _routerreducertypes.PrefetchKind.FULL;
+          if (false) {
+          }
           if (false) {
           }
           const { href, as } = _react.default.useMemo(() => {
-            if (!router) {
+            if (!pagesRouter) {
               const resolvedHref = formatStringOrUrl(hrefProp);
               return {
                 href: resolvedHref,
@@ -220,17 +336,17 @@
               };
             }
             const [resolvedHref, resolvedAs] = (0, _resolvehref.resolveHref)(
-              router,
+              pagesRouter,
               hrefProp,
               true
             );
             return {
               href: resolvedHref,
               as: asProp
-                ? (0, _resolvehref.resolveHref)(router, asProp)
+                ? (0, _resolvehref.resolveHref)(pagesRouter, asProp)
                 : resolvedAs || resolvedHref,
             };
-          }, [router, hrefProp, asProp]);
+          }, [pagesRouter, hrefProp, asProp]);
           const previousHref = _react.default.useRef(href);
           const previousAs = _react.default.useRef(as);
           // This will return the first child, if multiple are provided it will throw an error
@@ -280,17 +396,28 @@
               return;
             }
             // Prefetch the URL.
-            prefetch(router, href, as, {
-              locale,
-            });
+            prefetch(
+              router,
+              href,
+              as,
+              {
+                locale,
+              },
+              {
+                kind: appPrefetchKind,
+              },
+              isAppRouter
+            );
           }, [
             as,
             href,
             isVisible,
             locale,
             prefetchEnabled,
-            router == null ? void 0 : router.locale,
+            pagesRouter == null ? void 0 : pagesRouter.locale,
             router,
+            isAppRouter,
+            appPrefetchKind,
           ]);
           const childProps = {
             ref: setRef,
@@ -321,7 +448,8 @@
                 replace,
                 shallow,
                 scroll,
-                locale
+                locale,
+                isAppRouter
               );
             },
             onMouseEnter(e) {
@@ -338,12 +466,27 @@
               if (!router) {
                 return;
               }
-              prefetch(router, href, as, {
-                locale,
-                priority: true,
-                // @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
-                bypassPrefetchedCheck: true,
-              });
+              if (
+                (!prefetchEnabled || "production" === "development") &&
+                isAppRouter
+              ) {
+                return;
+              }
+              prefetch(
+                router,
+                href,
+                as,
+                {
+                  locale,
+                  priority: true,
+                  // @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
+                  bypassPrefetchedCheck: true,
+                },
+                {
+                  kind: appPrefetchKind,
+                },
+                isAppRouter
+              );
             },
             onTouchStart: false
               ? 0
@@ -364,12 +507,24 @@
                   if (!router) {
                     return;
                   }
-                  prefetch(router, href, as, {
-                    locale,
-                    priority: true,
-                    // @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
-                    bypassPrefetchedCheck: true,
-                  });
+                  if (!prefetchEnabled && isAppRouter) {
+                    return;
+                  }
+                  prefetch(
+                    router,
+                    href,
+                    as,
+                    {
+                      locale,
+                      priority: true,
+                      // @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
+                      bypassPrefetchedCheck: true,
+                    },
+                    {
+                      kind: appPrefetchKind,
+                    },
+                    isAppRouter
+                  );
                 },
           };
           // If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
@@ -385,18 +540,18 @@
             const curLocale =
               typeof locale !== "undefined"
                 ? locale
-                : router == null
+                : pagesRouter == null
                 ? void 0
-                : router.locale;
+                : pagesRouter.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
             const localeDomain =
-              (router == null ? void 0 : router.isLocaleDomain) &&
+              (pagesRouter == null ? void 0 : pagesRouter.isLocaleDomain) &&
               (0, _getdomainlocale.getDomainLocale)(
                 as,
                 curLocale,
-                router == null ? void 0 : router.locales,
-                router == null ? void 0 : router.domainLocales
+                pagesRouter == null ? void 0 : pagesRouter.locales,
+                pagesRouter == null ? void 0 : pagesRouter.domainLocales
               );
             childProps.href =
               localeDomain ||
@@ -404,7 +559,7 @@
                 (0, _addlocale.addLocale)(
                   as,
                   curLocale,
-                  router == null ? void 0 : router.defaultLocale
+                  pagesRouter == null ? void 0 : pagesRouter.defaultLocale
                 )
               );
           }
@@ -433,7 +588,7 @@
       /***/
     },
 
-    /***/ 1587: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9347: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -446,7 +601,7 @@
         },
       });
       const _react = __webpack_require__(8101);
-      const _requestidlecallback = __webpack_require__(7512);
+      const _requestidlecallback = __webpack_require__(5832);
       const hasIntersectionObserver =
         typeof IntersectionObserver === "function";
       const observers = new Map();
@@ -559,7 +714,7 @@
       /***/
     },
 
-    /***/ 1942: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5942: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -620,7 +775,7 @@
       /***/
     },
 
-    /***/ 8562: /***/ (
+    /***/ 2488: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -635,7 +790,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5105);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4101);
+        __webpack_require__(4779);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -666,12 +821,12 @@
       /***/
     },
 
-    /***/ 4101: /***/ (
+    /***/ 4779: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(3000);
+      module.exports = __webpack_require__(9400);
 
       /***/
     },
@@ -681,7 +836,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3679)
+      __webpack_exec__(6613)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 1187-HASH.js

Diff too large to display

Diff for 8377-HASH.js

@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [8377],
+  [2727],
   {
-    /***/ 8377: /***/ (module, exports, __webpack_require__) => {
+    /***/ 2727: /***/ (module, exports, __webpack_require__) => {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -13,27 +13,27 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(710);
-      const _interop_require_wildcard = __webpack_require__(4239);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(3790);
+      const _interop_require_wildcard = __webpack_require__(6535);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8307)
+        __webpack_require__(9221)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8050)
+        __webpack_require__(1116)
       );
-      const _getimgprops = __webpack_require__(3201);
-      const _imageconfig = __webpack_require__(6678);
-      const _imageconfigcontextsharedruntime = __webpack_require__(578);
-      const _warnonce = __webpack_require__(1971);
-      const _routercontextsharedruntime = __webpack_require__(7795);
+      const _getimgprops = __webpack_require__(5763);
+      const _imageconfig = __webpack_require__(6224);
+      const _imageconfigcontextsharedruntime = __webpack_require__(6720);
+      const _warnonce = __webpack_require__(894);
+      const _routercontextsharedruntime = __webpack_require__(9093);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1315)
+        __webpack_require__(2809)
       );
-      const _usemergedref = __webpack_require__(592);
+      const _usemergedref = __webpack_require__(1329);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -355,7 +355,7 @@
       /***/
     },
 
-    /***/ 592: /***/ (module, exports, __webpack_require__) => {
+    /***/ 1329: /***/ (module, exports, __webpack_require__) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -365,7 +365,7 @@
           return useMergedRef;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       function useMergedRef(refA, refB) {
         const cleanupA = (0, _react.useRef)(() => {});
         const cleanupB = (0, _react.useRef)(() => {});
@@ -414,7 +414,7 @@
       /***/
     },
 
-    /***/ 5318: /***/ (
+    /***/ 272: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -428,9 +428,9 @@
           return AmpStateContext;
         },
       });
-      const _interop_require_default = __webpack_require__(710);
+      const _interop_require_default = __webpack_require__(3790);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const AmpStateContext = _react.default.createContext({});
       if (false) {
@@ -439,7 +439,7 @@
       /***/
     },
 
-    /***/ 1210: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1467: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -461,7 +461,7 @@
       /***/
     },
 
-    /***/ 3201: /***/ (
+    /***/ 5763: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -475,9 +475,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(1971);
-      const _imageblursvg = __webpack_require__(3482);
-      const _imageconfig = __webpack_require__(6678);
+      const _warnonce = __webpack_require__(894);
+      const _imageblursvg = __webpack_require__(5868);
+      const _imageconfig = __webpack_require__(6224);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -753,8 +753,8 @@
         }
         if (
           isDefaultLoader &&
-          !config.dangerouslyAllowSVG &&
-          src.split("?", 1)[0].endsWith(".svg")
+          src.endsWith(".svg") &&
+          !config.dangerouslyAllowSVG
         ) {
           // Special case to make svg serve as-is to avoid proxying
           // through the built-in Image Optimization API.
@@ -851,8 +851,8 @@
       /***/
     },
 
-    /***/ 8050: /***/ (module, exports, __webpack_require__) => {
-      /* provided dependency */ var process = __webpack_require__(6611);
+    /***/ 1116: /***/ (module, exports, __webpack_require__) => {
+      /* provided dependency */ var process = __webpack_require__(9829);
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -873,19 +873,19 @@
           return defaultHead;
         },
       });
-      const _interop_require_default = __webpack_require__(710);
-      const _interop_require_wildcard = __webpack_require__(4239);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(3790);
+      const _interop_require_wildcard = __webpack_require__(6535);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4607)
+        __webpack_require__(4101)
       );
-      const _ampcontextsharedruntime = __webpack_require__(5318);
-      const _headmanagercontextsharedruntime = __webpack_require__(7060);
-      const _ampmode = __webpack_require__(1210);
-      const _warnonce = __webpack_require__(1971);
+      const _ampcontextsharedruntime = __webpack_require__(272);
+      const _headmanagercontextsharedruntime = __webpack_require__(1790);
+      const _ampmode = __webpack_require__(1467);
+      const _warnonce = __webpack_require__(894);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -1069,7 +1069,7 @@
       /***/
     },
 
-    /***/ 3482: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5868: /***/ (__unused_webpack_module, exports) => {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -1123,7 +1123,7 @@
       /***/
     },
 
-    /***/ 578: /***/ (
+    /***/ 6720: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1137,11 +1137,11 @@
           return ImageConfigContext;
         },
       });
-      const _interop_require_default = __webpack_require__(710);
+      const _interop_require_default = __webpack_require__(3790);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
-      const _imageconfig = __webpack_require__(6678);
+      const _imageconfig = __webpack_require__(6224);
       const ImageConfigContext = _react.default.createContext(
         _imageconfig.imageConfigDefault
       );
@@ -1151,7 +1151,7 @@
       /***/
     },
 
-    /***/ 6678: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6224: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1199,7 +1199,7 @@
       /***/
     },
 
-    /***/ 1315: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2809: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1221,7 +1221,7 @@
           width +
           "&q=" +
           (quality || 75) +
-          (src.startsWith("/_next/static/media/") && false ? 0 : "")
+          (false ? 0 : "")
         );
       }
       // We use this to determine if the import is the default loader
@@ -1232,7 +1232,7 @@
       /***/
     },
 
-    /***/ 7795: /***/ (
+    /***/ 9093: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1246,9 +1246,9 @@
           return RouterContext;
         },
       });
-      const _interop_require_default = __webpack_require__(710);
+      const _interop_require_default = __webpack_require__(3790);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const RouterContext = _react.default.createContext(null);
       if (false) {
@@ -1257,7 +1257,7 @@
       /***/
     },
 
-    /***/ 4607: /***/ (
+    /***/ 4101: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1271,7 +1271,7 @@
           return SideEffect;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       const isServer = typeof window === "undefined";
       const useClientOnlyLayoutEffect = isServer
         ? () => {}

Diff for bccd1874-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

failed to diff

Commit: 4bcdd13

ijjk · 2024-12-05T20:37:41Z

Tests Passed

S-YOU · 2024-12-06T05:06:54Z

I think you can update these types too @eps1lon, tried to create at PR here too. (PR includes other rc updates)

      "@types/react": "npm:types-react@19.0.0-rc.0",
      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",

eps1lon · 2024-12-06T15:31:29Z

This is only for local development so no need to backport.

Use React 19 stable

38434ad

ijjk added create-next-app Related to our CLI tool for quickly starting a new Next.js application. created-by: Next.js team PRs by the Next.js team. examples Issue was opened via the examples template. tests type: next labels Dec 5, 2024

eps1lon changed the base branch from canary to next-15-0 December 5, 2024 20:12

non-breaking change

77e6ffc

thanachotnual approved these changes Dec 5, 2024

View reviewed changes

eps1lon requested a review from huozhi December 5, 2024 21:41

eps1lon marked this pull request as ready for review December 5, 2024 21:41

create-next-app: Use stable React 19 types

4bcdd13

ztanner approved these changes Dec 5, 2024

View reviewed changes

eps1lon merged commit 8774088 into next-15-0 Dec 5, 2024
104 of 109 checks passed

eps1lon deleted the sebbie/backport-19 branch December 5, 2024 22:40

eps1lon changed the title ~~[Backport 15.0] Use React 19 stable~~ [Backport 15.0] Use React 19 stable in Pages Router Dec 5, 2024

S-YOU mentioned this pull request Dec 6, 2024

Use React 19 stable for related packages and types #73579

Closed

bayromest approved these changes Dec 7, 2024

View reviewed changes

renovate bot mentioned this pull request Dec 10, 2024

chore(deps): update all non-major dependencies zenlinkpro/zenlink-interface#291

Merged

1 task

github-actions bot added the locked label Dec 21, 2024

github-actions bot locked as resolved and limited conversation to collaborators Dec 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Backport 15.0] Use React 19 stable in Pages Router #73564

[Backport 15.0] Use React 19 stable in Pages Router #73564

eps1lon commented Dec 5, 2024 •

edited

Loading

ijjk commented Dec 5, 2024 •

edited

Loading

ijjk commented Dec 5, 2024 •

edited

Loading

S-YOU commented Dec 6, 2024 •

edited

Loading

eps1lon commented Dec 6, 2024

[Backport 15.0] Use React 19 stable in Pages Router #73564

[Backport 15.0] Use React 19 stable in Pages Router #73564

Conversation

eps1lon commented Dec 5, 2024 • edited Loading

ijjk commented Dec 5, 2024 • edited Loading

Stats from current PR

ijjk commented Dec 5, 2024 • edited Loading

Tests Passed

S-YOU commented Dec 6, 2024 • edited Loading

eps1lon commented Dec 6, 2024

eps1lon commented Dec 5, 2024 •

edited

Loading

ijjk commented Dec 5, 2024 •

edited

Loading

ijjk commented Dec 5, 2024 •

edited

Loading

S-YOU commented Dec 6, 2024 •

edited

Loading