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