fix dynamic route interception not working when deployed with middleware #64923

ztanner · 2024-04-23T15:33:59Z

We currently have logic spread in multiple places that normalize nxtP parameters into their regular names, ie nxtPfoo -> foo. However we don't apply this same logic to nxtI, which conceptually is another parameter but for route interception. As a result, the interception route would 404 when deployed because it'd be missing the interception parameter.

This moves the normalization check into a util and updates the spots I could find where we handle nxtP to also handle nxtI.

Test Plan

Added a new test, and validated via these deploys:

Working: Link
Non-Working: Link

Fixes #62207
Closes NEXT-3204

ztanner · 2024-04-23T15:34:17Z

fix dynamic route interception not working when deployed with middleware #64923 👈
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ztanner and the rest of your teammates on Graphite

ijjk · 2024-04-23T15:45:37Z

Tests Passed

ijjk · 2024-04-23T15:57:51Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
buildDuration	14.9s	15.1s	⚠️ +187ms
buildDurationCached	8.3s	7s	N/A
nodeModulesSize	238 MB	238 MB	⚠️ +12.7 kB
nextStartRea..uration (ms)	409ms	411ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
2453-HASH.js gzip	31.5 kB	31.5 kB	N/A
3304.HASH.js gzip	169 B	169 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.09 kB	5.09 kB	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	228 B	227 B	N/A
main-HASH.js gzip	29.6 kB	31.6 kB	⚠️ +1.93 kB
webpack-HASH.js gzip	1.64 kB	1.65 kB	N/A
Overall change	80.1 kB	82 kB	⚠️ +1.93 kB

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
_app-HASH.js gzip	193 B	194 B	N/A
_error-HASH.js gzip	193 B	191 B	N/A
amp-HASH.js gzip	510 B	510 B	✓
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	2.51 kB	2.52 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	365 B	364 B	N/A
hooks-HASH.js gzip	389 B	391 B	N/A
image-HASH.js gzip	4.28 kB	4.28 kB	N/A
index-HASH.js gzip	269 B	268 B	N/A
link-HASH.js gzip	2.68 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	326 B	N/A
script-HASH.js gzip	395 B	397 B	N/A
withRouter-HASH.js gzip	323 B	323 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.2 kB	1.2 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
_buildManifest.js gzip	482 B	482 B	✓
Overall change	482 B	482 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
index.html gzip	528 B	530 B	N/A
link.html gzip	540 B	541 B	N/A
withRouter.html gzip	523 B	524 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
edge-ssr.js gzip	108 kB	108 kB	N/A
page.js gzip	3.05 kB	3.04 kB	N/A
Overall change	0 B	0 B	✓

Middleware size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
middleware-b..fest.js gzip	623 B	624 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	25.6 kB	27.8 kB	⚠️ +2.21 kB
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	26.4 kB	28.6 kB	⚠️ +2.21 kB

Next Runtimes

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	97.6 kB	97.6 kB	✓
app-page-tur..prod.js gzip	99.4 kB	99.4 kB	✓
app-page-tur..prod.js gzip	93.6 kB	93.6 kB	✓
app-page.run...dev.js gzip	145 kB	145 kB	✓
app-page.run..prod.js gzip	92.1 kB	92.1 kB	✓
app-route-ex...dev.js gzip	21.5 kB	21.5 kB	✓
app-route-ex..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	15.1 kB	15.1 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.2 kB	21.2 kB	✓
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.4 kB	21.4 kB	✓
pages.runtim...dev.js gzip	22.1 kB	22.1 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	65.3 kB	65.3 kB	N/A
Overall change	895 kB	895 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-23-fix_dynamic_route_interception_not_working_when_deployed	Change
0.pack gzip	1.6 MB	1.61 MB	⚠️ +13.3 kB
index.pack gzip	106 kB	106 kB	N/A
Overall change	1.6 MB	1.61 MB	⚠️ +13.3 kB

Diff details

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([
   [8358],
   {
-    /***/ 1552: /***/ (
+    /***/ 4070: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5237);
+          return __webpack_require__(396);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2016: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8490: /***/ (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__(6074)
+        __webpack_require__(2457)
       );
-      const _getimgprops = __webpack_require__(9571);
-      const _imageconfig = __webpack_require__(6567);
-      const _imageconfigcontextsharedruntime = __webpack_require__(419);
-      const _warnonce = __webpack_require__(4486);
-      const _routercontextsharedruntime = __webpack_require__(162);
+      const _getimgprops = __webpack_require__(7932);
+      const _imageconfig = __webpack_require__(5706);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9483);
+      const _warnonce = __webpack_require__(9035);
+      const _routercontextsharedruntime = __webpack_require__(4829);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -379,7 +379,7 @@
       /***/
     },
 
-    /***/ 9571: /***/ (
+    /***/ 7932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4486);
-      const _imageblursvg = __webpack_require__(133);
-      const _imageconfig = __webpack_require__(6567);
+      const _warnonce = __webpack_require__(9035);
+      const _imageblursvg = __webpack_require__(2642);
+      const _imageconfig = __webpack_require__(5706);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -772,7 +772,7 @@
       /***/
     },
 
-    /***/ 133: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2642: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -827,7 +827,7 @@
       /***/
     },
 
-    /***/ 4085: /***/ (
+    /***/ 503: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -854,10 +854,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(7456);
-      const _getimgprops = __webpack_require__(9571);
-      const _imagecomponent = __webpack_require__(2016);
+      const _getimgprops = __webpack_require__(7932);
+      const _imagecomponent = __webpack_require__(8490);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -889,7 +889,7 @@
       /***/
     },
 
-    /***/ 6996: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7240: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -924,7 +924,7 @@
       /***/
     },
 
-    /***/ 5237: /***/ (
+    /***/ 396: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -941,8 +941,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected][email protected]/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected][email protected]/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 */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -972,12 +972,8 @@
       /***/
     },
 
-    /***/ 1577: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(4085);
+    /***/ 73: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(503);
 
       /***/
     },
@@ -987,7 +983,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(1552)
+      __webpack_exec__(4070)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 2453-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 6711d8a

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

ztanner added 4 commits April 23, 2024 10:37

fix dynamic route interception not working when deployed

3841353

force e2e to run on interception-dynamic-segment

6a76d59

remove forced e2e

73586f7

add a test

ec6cba1

ztanner force-pushed the 04-23-fix_dynamic_route_interception_not_working_when_deployed branch from 6711d8a to ec6cba1 Compare April 23, 2024 17:37

ijjk added the tests label Apr 23, 2024

ztanner changed the title ~~fix dynamic route interception not working when deployed~~ fix dynamic route interception not working when deployed with middleware Apr 23, 2024

ztanner marked this pull request as ready for review April 23, 2024 17:56

ztanner requested review from timneutkens, ijjk, shuding, huozhi, feedthejim and wyattjoh as code owners April 23, 2024 17:56

ijjk approved these changes Apr 23, 2024

View reviewed changes

ztanner merged commit f50ef62 into canary Apr 23, 2024

ztanner deleted the 04-23-fix_dynamic_route_interception_not_working_when_deployed branch April 23, 2024 19:02

github-actions bot added the locked label May 9, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix dynamic route interception not working when deployed with middleware #64923

fix dynamic route interception not working when deployed with middleware #64923

Uh oh!

ztanner commented Apr 23, 2024 •

edited

Loading

Uh oh!

ztanner commented Apr 23, 2024

Uh oh!

ijjk commented Apr 23, 2024 •

edited

Loading

Uh oh!

ijjk commented Apr 23, 2024

Uh oh!

Uh oh!

fix dynamic route interception not working when deployed with middleware #64923

fix dynamic route interception not working when deployed with middleware #64923

Uh oh!

Conversation

ztanner commented Apr 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Plan

Uh oh!

ztanner commented Apr 23, 2024

Uh oh!

ijjk commented Apr 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tests Passed

Uh oh!

ijjk commented Apr 23, 2024

Stats from current PR

Uh oh!

Uh oh!

ztanner commented Apr 23, 2024 •

edited

Loading

ijjk commented Apr 23, 2024 •

edited

Loading