feat: add dynamic route matching

Author: ascorbic

demos/custom-routes/next.config.js

@@ -86,7 +86,7 @@ module.exports = {
         },
         {
           source: '/proxy-me/:path*',
-          destination: 'http://localhost:__EXTERNAL_PORT__/:path*',
+          destination: 'http://localhost:8888/:path*',
         },
         {
           source: '/api-hello',

plugin/src/templates/edge/next-utils.ts

@@ -64,6 +64,24 @@ export type Redirect = {
   regex: string
 }
 
+export type DynamicRoute = {
+  page: string
+  regex: string
+  namedRegex?: string
+  routeKeys?: { [key: string]: string }
+}
+
+export type RoutesManifest = {
+  basePath: string
+  redirects: Redirect[]
+  headers: Header[]
+  rewrites: {
+    beforeFiles: Rewrite[]
+    afterFiles: Rewrite[]
+    fallback: Rewrite[]
+  }
+  dynamicRoutes: DynamicRoute[]
+}
 // escape-regexp.ts
 // regexp is based on https://github.com/sindresorhus/escape-string-regexp
 const reHasRegExp = /[|\\{}()[\]^$+*?.-]/

plugin/src/templates/edge/router.test.ts

@@ -1,5 +1,5 @@
 import { assert, assertEquals, assertFalse } from 'https://deno.land/std@0.148.0/testing/asserts.ts'
-import { Header, Redirect, Rewrite } from './next-utils.ts'
+import { Header, Redirect, Rewrite, RoutesManifest } from './next-utils.ts'
 import {
   applyHeaderRule,
   applyHeaders,
@@ -8,9 +8,10 @@ import {
   applyRewriteRule,
   applyRewrites,
   matchesRule,
+  runPostMiddleware,
 } from './router.ts'
-import manifest from './test-routes-manifest.json' assert { type: 'json' }
-
+import manifestImport from './test-routes-manifest.json' assert { type: 'json' }
+const manifest = manifestImport as unknown as RoutesManifest
 const staticRoutes = new Set([
   '/blog/data.json',
   '/static/hello.txt',
@@ -410,9 +411,22 @@ Deno.test('rewrites', async (t) => {
       staticRoutes,
     })
     assert(result)
+    assertEquals(result.headers.get('x-matched-path'), '/static/hello.txt')
     assertEquals(result.url, 'http://localhost/static/hello.txt')
   })
 
+  await t.step('afterFiles matching dynamic route', () => {
+    const result = applyRewrites({
+      request: new Request('http://localhost/test/nothing'),
+      rules: manifest.rewrites.afterFiles as Rewrite[],
+      checkStaticRoutes: true,
+      staticRoutes,
+    })
+    assert(result)
+    assertFalse(result.headers.get('x-matched-path'))
+    assertEquals(result.url, 'http://localhost/nothing')
+  })
+
   await t.step('non-matching', () => {
     const result = applyRewrites({
       request: new Request('http://localhost/no-match'),
@@ -422,4 +436,33 @@ Deno.test('rewrites', async (t) => {
     })
     assertFalse(result)
   })
+
+  await t.step('preserves query params', () => {
+    const result = applyRewrites({
+      request: new Request('http://localhost/proxy-me/first?keep=me&and=me'),
+      rules: manifest.rewrites.afterFiles as Rewrite[],
+      checkStaticRoutes: true,
+      staticRoutes,
+    })
+    assert(result)
+    assertEquals(result.url, 'http://external.example.com/first?keep=me&and=me&this=me')
+  })
+})
+
+Deno.test('router', async (t) => {
+  await t.step('static route overrides afterFiles rewrite', () => {
+    const result = runPostMiddleware(new Request('http://localhost/nav'), manifest, staticRoutes)
+    assert(result)
+    assertEquals(result.url, 'http://localhost/nav')
+  })
+
+  await t.step('proxy to external resource', () => {
+    const result = runPostMiddleware(
+      new Request('http://localhost/proxy-me/first?keep=me&and=me'),
+      manifest,
+      staticRoutes,
+    )
+    assert(result)
+    assertEquals(result.url, 'http://external.example.com/first?keep=me&and=me&this=me')
+  })
 })

plugin/src/templates/edge/router.ts

@@ -2,12 +2,14 @@ import { Match, match } from 'https://deno.land/x/path_to_regexp@v6.2.1/index.ts
 
 import {
   compileNonPath,
+  DynamicRoute,
   Header,
   matchHas as nextMatchHas,
   prepareDestination,
   Redirect,
   Rewrite,
   RouteHas,
+  RoutesManifest,
   searchParamsToUrlQuery,
 } from './next-utils.ts'
 
@@ -18,17 +20,12 @@ export type Rule = Rewrite | Header | Redirect
  * Converts Next.js's internal parsed URL response to a `URL` object.
  */
 
-function preparedDestinationToUrl({
-  newUrl,
-  destQuery,
-  parsedDestination,
-}: ReturnType<typeof prepareDestination>): URL {
+function preparedDestinationToUrl({ newUrl, parsedDestination }: ReturnType<typeof prepareDestination>): URL {
   const transformedUrl = new URL(newUrl, 'http://n')
   transformedUrl.hostname = parsedDestination.hostname ?? ''
   transformedUrl.port = parsedDestination.port ?? ''
   transformedUrl.protocol = parsedDestination.protocol ?? ''
-
-  for (const [name, value] of Object.entries(destQuery)) {
+  for (const [name, value] of Object.entries(parsedDestination.query)) {
     transformedUrl.searchParams.set(name, String(value))
   }
   return transformedUrl
@@ -212,11 +209,11 @@ export function applyRewrites({
   request,
   rules,
   staticRoutes,
-  checkStaticRoutes,
+  checkStaticRoutes = false,
 }: {
   request: Request
   rules: Rewrite[]
-  checkStaticRoutes: boolean
+  checkStaticRoutes?: boolean
   staticRoutes?: Set<string>
 }): Request | false {
   let result: Request | false = false
@@ -230,18 +227,101 @@ export function applyRewrites({
     const rewritten = applyRewriteRule({ request, rule })
     if (rewritten) {
       result = rewritten
+      if (!checkStaticRoutes) {
+        continue
+      }
+      const { pathname } = new URL(rewritten.url)
       // If a static route is matched, then we exit early
-      if (checkStaticRoutes && staticRoutes!.has(new URL(result.url).pathname)) {
+      if (staticRoutes!.has(pathname) || pathname.startsWith('/_next/static/')) {
+        result.headers.set('x-matched-path', pathname)
         return result
       }
     }
   }
   return result
 }
 
-export function matchesStaticRoute(route: string, staticRoutes: Set<string>, staticFiles: Set<string>): boolean {
-  if (staticFiles.has(route)) {
-    return true
+export function matchDynamicRoute(request: Request, routes: DynamicRoute[]): string | false {
+  const { pathname } = new URL(request.url)
+  const match = routes.find((route) => {
+    return new RegExp(route.regex).test(pathname)
+  })
+  if (match) {
+    return match.page
+  }
+  return false
+}
+
+/**
+ * Run the rules that run before middleware
+ */
+export function runPreMiddleware(request: Request, manifest: RoutesManifest): Request | Response {
+  const output: Request = applyHeaders(request, manifest.headers)
+  const redirect = applyRedirects(output, manifest.redirects)
+  if (redirect) {
+    return Response.redirect(redirect.url, redirect.status)
   }
-  return staticRoutes.has(route.endsWith('/') ? route.slice(0, -1) : route)
+  return output
+}
+
+/**
+ * Run the rules that run after middleware
+ */
+export function runPostMiddleware(
+  request: Request,
+  manifest: RoutesManifest,
+  staticRoutes: Set<string>,
+  skipBeforeFiles = false,
+): Request | Response {
+  // Everyone gets the beforeFiles rewrites, unless we're re-running after matching fallback
+  let result = skipBeforeFiles
+    ? request
+    : applyRewrites({
+        request,
+        rules: manifest.rewrites.beforeFiles,
+      }) || request
+
+  // Check if it matches a static route or file
+  const { pathname } = new URL(result.url)
+  if (staticRoutes.has(pathname) || pathname.startsWith('/_next/static/')) {
+    result.headers.set('x-matched-path', pathname)
+    return result
+  }
+
+  // afterFiles rewrites also check if it matches a static file after every match
+  const afterRewrite = applyRewrites({
+    request: result,
+    rules: manifest.rewrites.afterFiles,
+    checkStaticRoutes: true,
+    staticRoutes,
+  })
+
+  if (afterRewrite) {
+    result = afterRewrite
+    // If we match a rewrite, we check if it matches a static route or file
+    // If it does, we return right away
+    if (afterRewrite.headers.has('x-matched-path')) {
+      return afterRewrite
+    }
+  }
+
+  // Now we check dynamic routes, so we can
+  const dynamicRoute = matchDynamicRoute(result, manifest.dynamicRoutes)
+  if (dynamicRoute) {
+    result.headers.set('x-matched-path', dynamicRoute)
+    return result
+  }
+
+  // Finally, check for fallback rewrites
+  const fallbackRewrite = applyRewrites({
+    request: result,
+    rules: manifest.rewrites.fallback,
+  })
+
+  // If the fallback matched, we go right back to checking for static routes
+  if (fallbackRewrite) {
+    return runPostMiddleware(fallbackRewrite, manifest, staticRoutes, true)
+  }
+  // 404
+  return result
 }