feat: add middleware routing (#146)

* refactor: create `src/build/functions/edge` directory

* feat: remove lookaheads from matchers

* feat: add routing logic to matchers

* chore: add test

* refactor: move things around and add test

* refactor: remove check for Netlify Dev

Author: eduardoboucas

edge-runtime/lib/routing.ts

@@ -0,0 +1 @@
+[]

edge-runtime/matchers.json

@@ -1,11 +1,20 @@
 import type { Context } from '@netlify/edge-functions'
 
+import matchers from './matchers.json' assert { type: 'json' }
+
 import { buildNextRequest, RequestData } from './lib/next-request.ts'
 import { buildResponse } from './lib/response.ts'
 import { FetchEventResult } from './lib/response.ts'
+import {
+  type MiddlewareRouteMatch,
+  getMiddlewareRouteMatcher,
+  searchParamsToUrlQuery,
+} from './lib/routing.ts'
 
 type NextHandler = (params: { request: RequestData }) => Promise<FetchEventResult>
 
+const matchesMiddleware: MiddlewareRouteMatch = getMiddlewareRouteMatcher(matchers || [])
+
 /**
  * Runs a Next.js middleware as a Netlify Edge Function. It translates a web
  * platform Request into a NextRequest instance on the way in, and translates
@@ -20,13 +29,17 @@ export async function handleMiddleware(
   context: Context,
   nextHandler: NextHandler,
 ) {
-  // Don't run in dev
-  if (Netlify.env.has('NETLIFY_DEV')) {
+  const nextRequest = buildNextRequest(request, context)
+  const url = new URL(request.url)
+
+  // While we have already checked the path when mapping to the edge function,
+  // Next.js supports extra rules that we need to check here too, because we
+  // might be running an edge function for a path we should not. If we find
+  // that's the case, short-circuit the execution.
+  if (!matchesMiddleware(url.pathname, request, searchParamsToUrlQuery(url.searchParams))) {
     return
   }
 
-  const nextRequest = buildNextRequest(request, context)
-
   try {
     const result = await nextHandler({ request: nextRequest })
     const response = await buildResponse({ result, request: request, context })

edge-runtime/middleware.ts

@@ -39,7 +39,6 @@
     "url": "https://github.com/netlify/next-runtime-minimal/issues"
   },
   "homepage": "https://github.com/netlify/next-runtime-minimal#readme",
-  "dependencies": {},
   "devDependencies": {
     "@fastly/http-compute-js": "1.1.1",
     "@netlify/blobs": "^6.4.0",

package.json

@@ -23,16 +23,25 @@ const writeEdgeManifest = async (ctx: PluginContext, manifest: NetlifyManifest)
   await writeFile(join(ctx.edgeFunctionsDir, 'manifest.json'), JSON.stringify(manifest, null, 2))
 }
 
-const writeHandlerFile = async (ctx: PluginContext, { name }: NextDefinition) => {
+const writeHandlerFile = async (ctx: PluginContext, { matchers, name }: NextDefinition) => {
   const handlerName = getHandlerName({ name })
+  const handlerDirectory = join(ctx.edgeFunctionsDir, handlerName)
+  const handlerRuntimeDirectory = join(handlerDirectory, 'edge-runtime')
 
-  await cp(
-    join(ctx.pluginDir, 'edge-runtime'),
-    join(ctx.edgeFunctionsDir, handlerName, 'edge-runtime'),
-    { recursive: true },
-  )
+  // Copying the runtime files. These are the compatibility layer between
+  // Netlify Edge Functions and the Next.js edge runtime.
+  await cp(join(ctx.pluginDir, 'edge-runtime'), handlerRuntimeDirectory, {
+    recursive: true,
+  })
+
+  // Writing a file with the matchers that should trigger this function. We'll
+  // read this file from the function at runtime.
+  await writeFile(join(handlerRuntimeDirectory, 'matchers.json'), JSON.stringify(matchers))
+
+  // Writing the function entry file. It wraps the middleware code with the
+  // compatibility layer mentioned above.
   await writeFile(
-    join(ctx.edgeFunctionsDir, handlerName, `${handlerName}.js`),
+    join(handlerDirectory, `${handlerName}.js`),
     `
     import {handleMiddleware} from './edge-runtime/middleware.ts';
     import handler from './server/${name}.js';

src/build/functions/edge.ts

@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Simple Next App',
+  description: 'Description for Simple Next App',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

tests/fixtures/middleware-conditions/app/layout.js

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <main>
+      <h1>Other</h1>
+    </main>
+  )
+}

tests/fixtures/middleware-conditions/app/other/page.js

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main>
+      <h1>Home</h1>
+    </main>
+  )
+}

tests/fixtures/middleware-conditions/app/page.js

@@ -0,0 +1,12 @@
+import { headers } from 'next/headers'
+
+export default function Page() {
+  const headersList = headers()
+  const message = headersList.get('x-hello-from-middleware-req')
+
+  return (
+    <main>
+      <h1>Message from middleware: {message}</h1>
+    </main>
+  )
+}

tests/fixtures/middleware-conditions/app/test/next/page.js

@@ -0,0 +1,7 @@
+export default function Redirect() {
+  return (
+    <main>
+      <h1>If middleware works, we shoudn't get here</h1>
+    </main>
+  )
+}

tests/fixtures/middleware-conditions/app/test/redirect/page.js

@@ -0,0 +1,7 @@
+export default function Rewrite() {
+  return (
+    <main>
+      <h1>If middleware works, we shoudn't get here</h1>
+    </main>
+  )
+}

tests/fixtures/middleware-conditions/app/test/rewrite/page.js

@@ -0,0 +1,19 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const response: NextResponse = NextResponse.next()
+
+  response.headers.set('x-hello-from-middleware-res', 'hello')
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    {
+      source: '/foo',
+      missing: [{ type: 'header', key: 'x-custom-header', value: 'custom-value' }],
+    },
+  ],
+}

tests/fixtures/middleware-conditions/middleware.ts

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+module.exports = nextConfig

tests/fixtures/middleware-conditions/next.config.js

@@ -0,0 +1,15 @@
+{
+  "name": "middleware",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "next build",
+    "dev": "next dev",
+    "build": "next build"
+  },
+  "dependencies": {
+    "next": "13.5.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

tests/fixtures/middleware-conditions/package-lock.json

@@ -1,5 +1,5 @@
 import { v4 } from 'uuid'
-import { beforeEach, expect, test, vi } from 'vitest'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import {
   createFixture,
   invokeEdgeFunction,
@@ -94,3 +94,73 @@ test<FixtureTestContext>('should rewrite to an external URL', async (ctx) => {
   expect(external.calls).toBe(1)
   expect(origin.calls).toBe(0)
 })
+
+describe("aborts middleware execution when the matcher conditions don't match the request", () => {
+  test<FixtureTestContext>('when the path is excluded', async (ctx) => {
+    await createFixture('middleware', ctx)
+    await runPlugin(ctx)
+
+    const origin = await LocalServer.run(async (req, res) => {
+      expect(req.url).toBe('/_next/data')
+      expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
+
+      res.write('Hello from origin!')
+      res.end()
+    })
+
+    ctx.cleanup?.push(() => origin.stop())
+
+    const response1 = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      url: '/_next/data',
+    })
+
+    expect(await response1.text()).toBe('Hello from origin!')
+    expect(response1.status).toBe(200)
+    expect(response1.headers.has('x-hello-from-middleware-res')).toBeFalsy()
+    expect(origin.calls).toBe(1)
+  })
+
+  test<FixtureTestContext>('when a request header matches a condition', async (ctx) => {
+    await createFixture('middleware-conditions', ctx)
+    await runPlugin(ctx)
+
+    const origin = await LocalServer.run(async (req, res) => {
+      expect(req.url).toBe('/foo')
+      expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
+
+      res.write('Hello from origin!')
+      res.end()
+    })
+
+    ctx.cleanup?.push(() => origin.stop())
+
+    // Request 1: Middleware should run because we're not sending the header.
+    const response1 = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      url: '/foo',
+    })
+
+    expect(await response1.text()).toBe('Hello from origin!')
+    expect(response1.status).toBe(200)
+    expect(response1.headers.has('x-hello-from-middleware-res')).toBeTruthy()
+    expect(origin.calls).toBe(1)
+
+    // Request 1: Middleware should not run because we're sending the header.
+    const response2 = await invokeEdgeFunction(ctx, {
+      headers: {
+        'x-custom-header': 'custom-value',
+      },
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      url: '/foo',
+    })
+
+    expect(await response2.text()).toBe('Hello from origin!')
+    expect(response2.status).toBe(200)
+    expect(response2.headers.has('x-hello-from-middleware-res')).toBeFalsy()
+    expect(origin.calls).toBe(2)
+  })
+})

tests/fixtures/middleware-conditions/package.json

@@ -368,6 +368,11 @@ export async function invokeEdgeFunction(
      */
     url?: string
 
+    /**
+     * Custom headers for the request
+     */
+    headers?: Record<string, string>
+
     /**
      * Whether to follow redirects
      */
@@ -397,6 +402,7 @@ export async function invokeEdgeFunction(
       'x-nf-passthrough-host': passthroughHost,
       'x-nf-passthrough-proto': 'http:',
       'x-nf-request-id': v4(),
+      ...options.headers,
     },
   })
 }