fix: page chunk for root level catch-all is served incorrectly to client

Author: lindsaylevine

lib/constants/regex.js

@@ -0,0 +1,9 @@
+const CATCH_ALL_REGEX = /\/\[\.{3}(.*)\](.json)?$/;
+const OPTIONAL_CATCH_ALL_REGEX = /\/\[{2}\.{3}(.*)\]{2}(.json)?$/;
+const DYNAMIC_PARAMETER_REGEX = /\/\[(.*?)\]/g;
+
+module.exports = {
+  CATCH_ALL_REGEX,
+  OPTIONAL_CATCH_ALL_REGEX,
+  DYNAMIC_PARAMETER_REGEX,
+};

lib/helpers/getNetlifyRoutes.js

@@ -1,9 +1,11 @@
 // Adapted from @sls-next/lambda-at-edge (v1.2.0-alpha.3)
 // See: https://github.com/danielcondemarin/serverless-next.js/blob/57142970b08e6bc3faf0fc70749b3b0501ad7869/packages/lambda-at-edge/src/lib/expressifyDynamicRoute.ts#L4
 
-const CATCH_ALL_REGEX = /\/\[\.{3}(.*)\](.json)?$/;
-const OPTIONAL_CATCH_ALL_REGEX = /\/\[{2}\.{3}(.*)\]{2}(.json)?$/;
-const DYNAMIC_PARAMETER_REGEX = /\/\[(.*?)\]/g;
+const {
+  CATCH_ALL_REGEX,
+  OPTIONAL_CATCH_ALL_REGEX,
+  DYNAMIC_PARAMETER_REGEX,
+} = require("../constants/regex");
 
 // Convert dynamic NextJS routes into their Netlify-equivalent
 // Note that file endings (.json) must be removed for catch-all and optional

lib/helpers/isCatchAllRoute.js

@@ -0,0 +1,12 @@
+const {
+  CATCH_ALL_REGEX,
+  OPTIONAL_CATCH_ALL_REGEX,
+} = require("../constants/regex");
+
+// Return true if the route is a catch-all or optional catch-all
+// (e.g., /[...slug] or [[...slug]])
+const isCatchAllRoute = (route) => {
+  return route.match(OPTIONAL_CATCH_ALL_REGEX) || route.match(CATCH_ALL_REGEX);
+};
+
+module.exports = isCatchAllRoute;

lib/steps/setupRedirects.js

@@ -4,6 +4,7 @@ const { logTitle, logItem } = require("../helpers/logger");
 const { NETLIFY_PUBLISH_PATH, CUSTOM_REDIRECTS_PATH } = require("../config");
 const getSortedRoutes = require("../helpers/getSortedRoutes");
 const getNetlifyRoutes = require("../helpers/getNetlifyRoutes");
+const isCatchAllRoute = require("../helpers/isCatchAllRoute");
 
 // Setup _redirects file that routes all requests to the appropriate location,
 // such as one of the Netlify functions or one of the static files.
@@ -35,12 +36,17 @@ const setupRedirects = () => {
   // less-specific routes (e.g., catch-all)
   const sortedRoutes = getSortedRoutes(nextRedirects.map(({ route }) => route));
 
+  // Create variable for tracking if there is a catch-all route
+  let hasCatchAllRoute = false;
+
   // Assemble redirects for each route
   sortedRoutes.forEach((route) => {
     const nextRedirect = nextRedirects.find(
       (redirect) => redirect.route === route
     );
 
+    if (isCatchAllRoute(route)) hasCatchAllRoute = true;
+
     // One route may map to multiple Netlify routes: e.g., catch-all pages
     // require two Netlify routes in the _redirects file
     getNetlifyRoutes(route).map((netlifyRoute) => {
@@ -50,6 +56,12 @@ const setupRedirects = () => {
     });
   });
 
+  // This redirect takes care of this issue: https://github.com/netlify/next-on-netlify/issues/43
+  // where the page chunk for a root level catch-all is served incorrectly to the client.
+  // Add last because it's least specific.
+  if (nextRedirects.length >= 1 && hasCatchAllRoute)
+    redirects.push("/_next/*  /_next/static/*  200");
+
   // Write redirects to _redirects file
   writeFileSync(join(NETLIFY_PUBLISH_PATH, "_redirects"), redirects.join("\n"));
 };

tests/__snapshots__/defaults.test.js.snap

@@ -28,5 +28,6 @@ exports[`Routing creates Netlify redirects 1`] = `
 /getStaticProps/withRevalidate/withFallback/:id  /.netlify/functions/next_getStaticProps_withRevalidate_withFallback_id  200
 /shows/:id  /.netlify/functions/next_shows_id  200
 /shows/:params/*  /.netlify/functions/next_shows_params  200
-/static/:id  /static/[id].html  200"
+/static/:id  /static/[id].html  200
+/_next/*  /_next/static/*  200"
 `;

tests/__snapshots__/optionalCatchAll.test.js.snap

@@ -7,5 +7,6 @@ exports[`Routing creates Netlify redirects 1`] = `
 /_next/data/%BUILD_ID%/*  /.netlify/functions/next_all  200
 /page  /.netlify/functions/next_page  200
 /  /.netlify/functions/next_all  200
-/*  /.netlify/functions/next_all  200"
+/*  /.netlify/functions/next_all  200
+/_next/*  /_next/static/*  200"
 `;