feat: normalise URLs in edge middleware (#176)

* feat: normalise URLs in edge middleware

* refactor: remove lib reference

* chore: update fixtures

* fix: remove unused import

* refactor: name things better

* refactor: rename parameter

Author: eduardoboucas

edge-runtime/lib/next-request.ts

@@ -1,5 +1,7 @@
 import type { Context } from '@netlify/edge-functions'
 
+import { normalizeDataUrl } from './util.ts'
+
 interface I18NConfig {
   defaultLocale: string
   localeDetection?: false
@@ -31,6 +33,23 @@ export interface RequestData {
   body?: ReadableStream<Uint8Array>
 }
 
+const normalizeRequestURL = (originalURL: string, enforceTrailingSlash: boolean) => {
+  const url = new URL(originalURL)
+
+  // We want to run middleware for data requests and expose the URL of the
+  // corresponding pages, so we have to normalize the URLs before running
+  // the handler.
+  url.pathname = normalizeDataUrl(url.pathname)
+
+  // Normalizing the trailing slash based on the `trailingSlash` configuration
+  // property from the Next.js config.
+  if (enforceTrailingSlash && url.pathname !== '/' && !url.pathname.endsWith('/')) {
+    url.pathname = `${url.pathname}/`
+  }
+
+  return url.toString()
+}
+
 export const buildNextRequest = (
   request: Request,
   context: Context,
@@ -50,7 +69,7 @@ export const buildNextRequest = (
   return {
     headers: Object.fromEntries(headers.entries()),
     geo,
-    url,
+    url: normalizeRequestURL(url, Boolean(nextConfig?.trailingSlash)),
     method,
     ip: context.ip,
     body: body ?? undefined,

edge-runtime/lib/response.ts

@@ -106,7 +106,7 @@ export const buildResponse = async ({ context, logger, request, result }: BuildR
   const isDataReq = request.headers.get('x-nextjs-data')
 
   if (rewrite) {
-    logger.withFields({ rewrite_url: rewrite }).debug('Is rewrite')
+    logger.withFields({ rewrite_url: rewrite }).debug('Found middleware rewrite')
 
     const rewriteUrl = new URL(rewrite, request.url)
     const baseUrl = new URL(request.url)

edge-runtime/lib/util.ts

@@ -1,16 +1,16 @@
-// If the redirect is a data URL, we need to normalize it.
+// If the URL path matches a data URL, we need to normalize it.
 // https://github.com/vercel/next.js/blob/25e0988e7c9033cb1503cbe0c62ba5de2e97849c/packages/next/src/shared/lib/router/utils/get-next-pathname-info.ts#L69-L76
-export function normalizeDataUrl(redirect: string) {
-  if (redirect.startsWith('/_next/data/') && redirect.includes('.json')) {
-    const paths = redirect
+export function normalizeDataUrl(urlPath: string) {
+  if (urlPath.startsWith('/_next/data/') && urlPath.includes('.json')) {
+    const paths = urlPath
       .replace(/^\/_next\/data\//, '')
       .replace(/\.json/, '')
       .split('/')
 
-    redirect = paths[1] !== 'index' ? `/${paths.slice(1).join('/')}` : '/'
+    urlPath = paths[1] !== 'index' ? `/${paths.slice(1).join('/')}` : '/'
   }
 
-  return redirect
+  return urlPath
 }
 
 /**

edge-runtime/middleware.ts

@@ -1,6 +1,7 @@
 import type { Context } from '@netlify/edge-functions'
 
 import matchers from './matchers.json' assert { type: 'json' }
+import nextConfig from './next.config.json' assert { type: 'json' }
 
 import { InternalHeaders } from './lib/headers.ts'
 import { logger, LogLevel } from './lib/logging.ts'
@@ -31,7 +32,7 @@ export async function handleMiddleware(
   context: Context,
   nextHandler: NextHandler,
 ) {
-  const nextRequest = buildNextRequest(request, context)
+  const nextRequest = buildNextRequest(request, context, nextConfig)
   const url = new URL(request.url)
   const reqLogger = logger
     .withLogLevel(

edge-runtime/next.config.json

@@ -0,0 +1 @@
+{}

src/build/functions/edge.ts

@@ -24,6 +24,7 @@ const writeEdgeManifest = async (ctx: PluginContext, manifest: NetlifyManifest)
 }
 
 const writeHandlerFile = async (ctx: PluginContext, { matchers, name }: NextDefinition) => {
+  const nextConfig = await ctx.getBuildConfig()
   const handlerName = getHandlerName({ name })
   const handlerDirectory = join(ctx.edgeFunctionsDir, handlerName)
   const handlerRuntimeDirectory = join(handlerDirectory, 'edge-runtime')
@@ -38,6 +39,20 @@ const writeHandlerFile = async (ctx: PluginContext, { matchers, name }: NextDefi
   // read this file from the function at runtime.
   await writeFile(join(handlerRuntimeDirectory, 'matchers.json'), JSON.stringify(matchers))
 
+  // The config is needed by the edge function to match and normalize URLs. To
+  // avoid shipping and parsing a large file at runtime, let's strip it down to
+  // just the properties that the edge function actually needs.
+  const minimalNextConfig = {
+    basePath: nextConfig.basePath,
+    i18n: nextConfig.i18n,
+    trailingSlash: nextConfig.trailingSlash,
+  }
+
+  await writeFile(
+    join(handlerRuntimeDirectory, 'next.config.json'),
+    JSON.stringify(minimalNextConfig),
+  )
+
   // Writing the function entry file. It wraps the middleware code with the
   // compatibility layer mentioned above.
   await writeFile(

src/run/config.ts

@@ -29,5 +29,5 @@ export const setRunConfig = (config: NextConfigComplete) => {
 export type TagsManifest = Record<string, string>
 
 export const getTagsManifest = async (): Promise<TagsManifest> => {
-  return JSON.parse(await readFile(resolve('.netlify/tags-manifest.json'), 'utf-8'))
+  return JSON.parse(await readFile(resolve(PLUGIN_DIR, '.netlify/tags-manifest.json'), 'utf-8'))
 }

tests/fixtures/middleware-conditions/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "middleware",
+  "name": "middleware-conditions",
   "version": "0.1.0",
   "private": true,
   "scripts": {

tests/fixtures/middleware-trailing-slash/app/layout.js

@@ -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-trailing-slash/app/other/page.js

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

tests/fixtures/middleware-trailing-slash/app/page.js

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

tests/fixtures/middleware-trailing-slash/app/test/next/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-trailing-slash/app/test/redirect/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-trailing-slash/app/test/rewrite/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-trailing-slash/middleware.ts

@@ -0,0 +1,58 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const response = getResponse(request)
+
+  response.headers.append('Deno' in globalThis ? 'x-deno' : 'x-node', Date.now().toString())
+  response.headers.set('x-hello-from-middleware-res', 'hello')
+
+  return response
+}
+
+const getResponse = (request: NextRequest) => {
+  const requestHeaders = new Headers(request.headers)
+
+  requestHeaders.set('x-hello-from-middleware-req', 'hello')
+
+  if (request.nextUrl.pathname === '/test/next/') {
+    return NextResponse.next({
+      request: {
+        headers: requestHeaders,
+      },
+    })
+  }
+
+  if (request.nextUrl.pathname === '/test/redirect/') {
+    return NextResponse.redirect(new URL('/other', request.url))
+  }
+
+  if (request.nextUrl.pathname === '/test/redirect-with-headers/') {
+    return NextResponse.redirect(new URL('/other', request.url), {
+      headers: { 'x-header-from-redirect': 'hello' },
+    })
+  }
+
+  if (request.nextUrl.pathname === '/test/rewrite-internal/') {
+    return NextResponse.rewrite(new URL('/rewrite-target', request.url), {
+      request: {
+        headers: requestHeaders,
+      },
+    })
+  }
+
+  if (request.nextUrl.pathname === '/test/rewrite-external/') {
+    const requestURL = new URL(request.url)
+    const externalURL = new URL(requestURL.searchParams.get('external-url') as string)
+
+    externalURL.searchParams.set('from', 'middleware')
+
+    return NextResponse.rewrite(externalURL, {
+      request: {
+        headers: requestHeaders,
+      },
+    })
+  }
+
+  return NextResponse.json({ error: 'Error' }, { status: 500 })
+}

tests/fixtures/middleware-trailing-slash/next.config.js

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

tests/fixtures/middleware-trailing-slash/package-lock.json

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

tests/fixtures/middleware-trailing-slash/package.json

@@ -84,9 +84,6 @@ describe('redirect', () => {
 
     ctx.cleanup?.push(() => origin.stop())
 
-    const foo = await response.text()
-    console.log(foo)
-
     expect(response.status).toBe(307)
     expect(response.headers.get('location'), 'added a location header').toBeTypeOf('string')
     expect(
@@ -199,3 +196,53 @@ describe("aborts middleware execution when the matcher conditions don't match th
     expect(origin.calls).toBe(2)
   })
 })
+
+describe('should run middleware on data requests', () => {
+  test<FixtureTestContext>('when `trailingSlash: false`', async (ctx) => {
+    await createFixture('middleware', ctx)
+    await runPlugin(ctx)
+
+    const origin = new LocalServer()
+    const response = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      redirect: 'manual',
+      url: '/_next/data/dJvEyLV8MW7CBLFf0Ecbk/test/redirect-with-headers.json',
+    })
+
+    ctx.cleanup?.push(() => origin.stop())
+
+    expect(response.status).toBe(307)
+    expect(response.headers.get('location'), 'added a location header').toBeTypeOf('string')
+    expect(
+      new URL(response.headers.get('location') as string).pathname,
+      'redirected to the correct path',
+    ).toEqual('/other')
+    expect(response.headers.get('x-header-from-redirect'), 'hello').toBe('hello')
+    expect(origin.calls).toBe(0)
+  })
+
+  test<FixtureTestContext>('when `trailingSlash: true`', async (ctx) => {
+    await createFixture('middleware-trailing-slash', ctx)
+    await runPlugin(ctx)
+
+    const origin = new LocalServer()
+    const response = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      redirect: 'manual',
+      url: '/_next/data/dJvEyLV8MW7CBLFf0Ecbk/test/redirect-with-headers.json',
+    })
+
+    ctx.cleanup?.push(() => origin.stop())
+
+    expect(response.status).toBe(307)
+    expect(response.headers.get('location'), 'added a location header').toBeTypeOf('string')
+    expect(
+      new URL(response.headers.get('location') as string).pathname,
+      'redirected to the correct path',
+    ).toEqual('/other')
+    expect(response.headers.get('x-header-from-redirect'), 'hello').toBe('hello')
+    expect(origin.calls).toBe(0)
+  })
+})