fix: i18n and dynamic routes (#275)

Author: enicio

lib/presets/custom/next/compute/default/handler/routing/index.js

@@ -67,10 +67,16 @@ async function generateResponse(
  * @param {object} reqCtx Request Context object (contains all we need in to know regarding the request in order to handle it).
  * @param {object} config The processed Vercel build output config.
  * @param {object} output Vercel build output.
+ * @param {Array} buildMetadata Information about the build to be used in the routing.
  * @returns {Response} An instance of the router.
  */
-async function handleRequest(reqCtx, config, output) {
-  const matcher = new RoutesMatcher(config.routes, output, reqCtx);
+async function handleRequest(reqCtx, config, output, buildMetadata) {
+  const matcher = new RoutesMatcher(
+    config.routes,
+    output,
+    reqCtx,
+    buildMetadata,
+  );
   const match = await findMatch(matcher);
 
   return generateResponse(reqCtx, match, output);

lib/presets/custom/next/compute/default/handler/routing/pcre.js

@@ -29,12 +29,15 @@ function matchPCRE(expr, val, caseSensitive) {
  * @returns {string} The processed string with replaced parameters.
  */
 function applyPCREMatches(rawStr, match, captureGroupKeys) {
-  return rawStr.replace(/\$([a-zA-Z0-9]+)/g, (_, key) => {
+  const rawPath = rawStr.replace(/\$([a-zA-Z0-9]+)/g, (_, key) => {
     const index = captureGroupKeys.indexOf(key);
+
     // If the extracted key does not exist as a named capture group from the matcher, we can
     // reasonably assume it's a number and return the matched index. Fallback to an empty string.
     return (index === -1 ? match[parseInt(key, 10)] : match[index + 1]) || '';
   });
+  // In some cases the path may have multiple slashes, so we need to normalize it.
+  return rawPath.replace(/^(\/)+/, '/');
 }
 
 export { applyPCREMatches, matchPCRE };

lib/presets/custom/next/compute/default/handler/routing/routes-matcher.js

@@ -21,6 +21,7 @@ class RoutesMatcher {
    * @param {object} routes The processed Vercel build output config routes.
    * @param {object} output Vercel build output.
    * @param {object} reqCtx Request context object; request object, assets fetcher, and execution context.
+   * @param {Array} buildMetadata Information about the build to be used in the routing.
    * @returns {void} The matched set of path, status, headers, and search params.
    */
   constructor(
@@ -30,6 +31,7 @@ class RoutesMatcher {
     output,
     /** Request Context object for the request to match */
     reqCtx,
+    buildMetadata,
   ) {
     this.routes = routes;
     this.output = output;
@@ -47,6 +49,7 @@ class RoutesMatcher {
 
     this.checkPhaseCounter = 0;
     this.middlewareInvoked = [];
+    this.locales = new Set(buildMetadata);
   }
 
   /**
@@ -238,7 +241,8 @@ class RoutesMatcher {
    * @returns {string }The previous path for the route before applying the destination.
    */
   applyRouteDest(route, srcMatch, captureGroupKeys) {
-    if (!route.dest) return this.path;
+    const localesMatchesRoute = this.locales.has(route.dest?.replace('/', ''));
+    if (!route.dest || localesMatchesRoute) return this.path;
 
     const prevPath = this.path;
 
@@ -476,6 +480,23 @@ class RoutesMatcher {
       return 'done';
     }
 
+    if (phase === 'none') {
+      // applications using the Pages router with i18n plus a catch-all root route
+      // redirect all requests (including /api/ ones) to the catch-all route, the only
+      // way to prevent this erroneous behavior is to remove the locale here if the
+      // path without the locale exists in the vercel build output
+      // eslint-disable-next-line no-restricted-syntax
+      for (const locale of this.locales) {
+        const localeRegExp = new RegExp(`/${locale}(/.*)`);
+        const match = this.path.match(localeRegExp);
+        const pathWithoutLocale = match?.[1];
+        if (pathWithoutLocale && pathWithoutLocale in this.output) {
+          this.path = pathWithoutLocale;
+          break;
+        }
+      }
+    }
+
     let pathExistsInOutput = this.path in this.output;
 
     // If a path with a trailing slash entered the `rewrite` phase and didn't find a match, it might

lib/presets/custom/next/compute/default/prebuild/index.js

@@ -6,6 +6,7 @@ import { VercelUtils, feedback, getAbsoluteLibDirPath } from '#utils';
 import { mapAndAdaptFunctions } from './mapping/index.js';
 import { assetsPaths } from './mapping/assets.js';
 import { processVercelOutput } from './mapping/process-mapping.js';
+import { getNextProjectConfig } from '../../utils/next.js';
 
 const { loadVercelConfigs } = VercelUtils;
 
@@ -108,6 +109,9 @@ async function run(prebuildContext) {
     processedVercelOutput.vercelOutput,
   );
 
+  const nextProjectConfig = await getNextProjectConfig();
+  const locales = nextProjectConfig?.i18n?.locales || [];
+
   return {
     // onEntry
     filesToInject: [
@@ -128,6 +132,7 @@ async function run(prebuildContext) {
     // defineVars (bundlers - define)
     defineVars: {
       __CONFIG__: JSON.stringify(processedVercelOutput.vercelConfig),
+      __BUILD_METADATA__: JSON.stringify(locales),
     },
     builderPlugins: [],
   };

lib/presets/custom/next/compute/default/prebuild/mapping/process-mapping.js

@@ -4,6 +4,46 @@ import { rmSync, statSync } from 'fs';
 import { feedback } from '#utils';
 import { addLeadingSlash, stripIndexRoute } from '../../../utils/routing.js';
 
+/**
+ * Given a source route it normalizes its src value if needed.
+ *
+ * (In this context normalization means tweaking the src value so that it follows
+ * a format which Vercel expects).
+ * Note: this function applies the change side-effectfully to the route object.
+ * @param {object} route Route which src we want to potentially normalize
+ */
+function normalizeRouteSrc(route) {
+  if (!route.src) return;
+
+  // we rely on locale root routes pointing to '/' to perform runtime checks
+  // so we cannot normalize such src values as that would break things later on
+  // see: https://github.com/cloudflare/next-on-pages/blob/654545/packages/next-on-pages/templates/_worker.js/routes-matcher.ts#L353-L358
+  if (route.locale && route.src === '/') return;
+
+  // Route src should always start with a '^'
+  // see: https://github.com/vercel/vercel/blob/ea5bc88/packages/routing-utils/src/index.ts#L77
+  if (!route.src.startsWith('^')) {
+    // eslint-disable-next-line no-param-reassign
+    route.src = `^${route.src}`;
+  }
+
+  // Route src should always end with a '$'
+  // see: https://github.com/vercel/vercel/blob/ea5bc88/packages/routing-utils/src/index.ts#L82
+  if (!route.src.endsWith('$')) {
+    // eslint-disable-next-line no-param-reassign
+    route.src = `${route.src}$`;
+  }
+}
+
+/**
+ * Check if a route is a Vercel handler.
+ * @param {object} route - The route to check.
+ * @returns {boolean} - Whether the route is a Vercel handler.
+ */
+export function isVercelHandler(route) {
+  return 'handle' in route;
+}
+
 /**
  * Process the Vercel config.
  * @param {object} config - The Vercel config.
@@ -25,13 +65,13 @@ function processVercelConfig(config) {
 
   let currentPhase = 'none';
   config.routes?.forEach((route) => {
-    if ('handle' in route) {
+    if (isVercelHandler(route)) {
       currentPhase = route.handle;
     } else {
+      normalizeRouteSrc(route);
       processedConfig.routes[currentPhase].push(route);
     }
   });
-
   return processedConfig;
 }
 

lib/presets/custom/next/compute/default/prebuild/validation/support.js

@@ -120,7 +120,6 @@ export async function validationSupportAndRetrieveFromVcConfig(
     throw new Error('No .vc-config.json files found');
 
   vcConfigObjects = await modifyVcConfigObjects(framework, vcConfigObjects);
-
   const runtimesConfig = [
     ...new Set(vcConfigObjects.map((config) => config.content.runtime)),
   ];

lib/presets/custom/next/compute/handler.js

@@ -39,7 +39,6 @@ async function main(request, env, ctx) {
     }
 
     const adjustedRequest = adjustRequestForVercel(request);
-
     return handleRequest(
       {
         request: adjustedRequest,
@@ -48,6 +47,7 @@ async function main(request, env, ctx) {
       },
       __CONFIG__,
       __BUILD_OUTPUT__,
+      __BUILD_METADATA__,
     );
   });
 }

lib/presets/custom/next/compute/utils/next.js

@@ -26,10 +26,9 @@ async function getNextProjectConfig() {
  */
 function isLocalePath(path, locales) {
   let isLangRoute = false;
-
   if (locales && locales?.length > 0) {
     locales.forEach((lang) => {
-      if (path.includes(`/${lang}/`)) {
+      if (path.includes(`/${lang}/`) || path.includes(`/${lang}.func/`)) {
         isLangRoute = true;
       }
     });