fix: handle trailing slash redirects

Author: ascorbic

packages/runtime/src/helpers/edge.ts

@@ -203,13 +203,15 @@ const writeEdgeFunction = async ({
   edgeFunctionRoot,
   netlifyConfig,
   functionName,
-  matchers,
+  matchers = [],
+  middleware = false,
 }: {
   edgeFunctionDefinition: EdgeFunctionDefinition
   edgeFunctionRoot: string
   netlifyConfig: NetlifyConfig
   functionName: string
-  matchers: Array<MiddlewareMatcher>
+  matchers?: Array<MiddlewareMatcher>
+  middleware?: boolean
 }) => {
   const edgeFunctionDir = join(edgeFunctionRoot, functionName)
 
@@ -223,11 +225,14 @@ const writeEdgeFunction = async ({
 
   await copyEdgeSourceFile({
     edgeFunctionDir,
-    file: 'runtime.ts',
+    file: middleware ? 'middleware-runtime.ts' : 'function-runtime.ts',
     target: 'index.ts',
   })
 
-  await writeJson(join(edgeFunctionDir, 'matchers.json'), matchers)
+  if (middleware) {
+    // Functions don't have complex matchers, so we can rely on the Netlify matcher
+    await writeJson(join(edgeFunctionDir, 'matchers.json'), matchers)
+  }
 }
 
 const generateEdgeFunctionMiddlewareMatchers = ({
@@ -440,6 +445,7 @@ export const writeEdgeFunctions = async ({
         netlifyConfig,
         functionName,
         matchers,
+        middleware: true,
       })
 
       manifest.functions.push(
@@ -465,7 +471,6 @@ export const writeEdgeFunctions = async ({
           edgeFunctionRoot,
           netlifyConfig,
           functionName,
-          matchers: edgeFunctionDefinition.matchers,
         })
         const pattern = getEdgeFunctionPatternForPage({
           edgeFunctionDefinition,

packages/runtime/src/templates/edge-shared/utils.test.ts

@@ -1,6 +1,6 @@
 import { assertEquals } from 'https://deno.land/std@0.167.0/testing/asserts.ts'
 import { beforeEach, describe, it } from 'https://deno.land/std@0.167.0/testing/bdd.ts'
-import { updateModifiedHeaders, FetchEventResult } from './utils.ts'
+import { redirectTrailingSlash, updateModifiedHeaders } from './utils.ts'
 
 describe('updateModifiedHeaders', () => {
   it("does not modify the headers if 'x-middleware-override-headers' is not found", () => {
@@ -62,3 +62,53 @@ describe('updateModifiedHeaders', () => {
     })
   })
 })
+
+describe('trailing slash redirects', () => {
+  it('adds a trailing slash to the pathn if trailingSlash is enabled', () => {
+    const url = new URL('https://example.com/foo')
+    const result = redirectTrailingSlash(url, true)
+    assertEquals(result?.status, 308)
+    assertEquals(result?.headers.get('location'), 'https://example.com/foo/')
+  })
+
+  it("doesn't add a trailing slash if trailingSlash is false", () => {
+    const url = new URL('https://example.com/foo')
+    const result = redirectTrailingSlash(url, false)
+    assertEquals(result, undefined)
+  })
+
+  it("doesn't add a trailing slash if the path is a file", () => {
+    const url = new URL('https://example.com/foo.txt')
+    const result = redirectTrailingSlash(url, true)
+    assertEquals(result, undefined)
+  })
+  it('adds a trailing slash if there is a dot in the path', () => {
+    const url = new URL('https://example.com/foo.bar/baz')
+    const result = redirectTrailingSlash(url, true)
+    assertEquals(result?.status, 308)
+    assertEquals(result?.headers.get('location'), 'https://example.com/foo.bar/baz/')
+  })
+  it("doesn't add a trailing slash if the path is /", () => {
+    const url = new URL('https://example.com/')
+    const result = redirectTrailingSlash(url, true)
+    assertEquals(result, undefined)
+  })
+  it('removes a trailing slash from the path if trailingSlash is false', () => {
+    const url = new URL('https://example.com/foo/')
+    const result = redirectTrailingSlash(url, false)
+    assertEquals(result?.status, 308)
+    assertEquals(result?.headers.get('location'), 'https://example.com/foo')
+  })
+  it("doesn't remove a trailing slash if trailingSlash is true", () => {
+    const url = new URL('https://example.com/foo/')
+    const result = redirectTrailingSlash(url, true)
+    assertEquals(result, undefined)
+  })
+
+  it('removes a trailing slash from the path if the path is a file', () => {
+    const url = new URL('https://example.com/foo.txt/')
+    const result = redirectTrailingSlash(url, false)
+    assertEquals(result?.status, 308)
+    assertEquals(result?.headers.get('location'), 'https://example.com/foo.txt')
+  })
+})

packages/runtime/src/templates/edge-shared/utils.ts

@@ -56,6 +56,37 @@ interface MiddlewareRequest {
   rewrite(destination: string | URL, init?: ResponseInit): Response
 }
 
+export interface I18NConfig {
+  defaultLocale: string
+  localeDetection?: false
+  locales: string[]
+}
+
+export interface RequestData {
+  geo?: {
+    city?: string
+    country?: string
+    region?: string
+    latitude?: string
+    longitude?: string
+    timezone?: string
+  }
+  headers: Record<string, string>
+  ip?: string
+  method: string
+  nextConfig?: {
+    basePath?: string
+    i18n?: I18NConfig | null
+    trailingSlash?: boolean
+  }
+  page?: {
+    name?: string
+    params?: { [key: string]: string }
+  }
+  url: string
+  body?: ReadableStream<Uint8Array>
+}
+
 function isMiddlewareRequest(response: Response | MiddlewareRequest): response is MiddlewareRequest {
   return 'originalRequest' in response
 }
@@ -90,6 +121,34 @@ export function updateModifiedHeaders(requestHeaders: Headers, responseHeaders:
   responseHeaders.delete('x-middleware-override-headers')
 }
 
+export const buildNextRequest = (
+  request: Request,
+  context: Context,
+  nextConfig?: RequestData['nextConfig'],
+): RequestData => {
+  const { url, method, body, headers } = request
+
+  const { country, subdivision, city, latitude, longitude, timezone } = context.geo
+
+  const geo: RequestData['geo'] = {
+    country: country?.code,
+    region: subdivision?.code,
+    city,
+    latitude: latitude?.toString(),
+    longitude: longitude?.toString(),
+    timezone,
+  }
+
+  return {
+    headers: Object.fromEntries(headers.entries()),
+    geo,
+    url,
+    method,
+    ip: context.ip,
+    body: body ?? undefined,
+    nextConfig,
+  }
+}
 export const buildResponse = async ({
   result,
   request,
@@ -196,3 +255,19 @@ export const buildResponse = async ({
   }
   return res
 }
+
+export const redirectTrailingSlash = (url: URL, trailingSlash: boolean): Response | undefined => {
+  const { pathname } = url
+  if (pathname === '/') {
+    return
+  }
+  if (!trailingSlash && pathname.endsWith('/')) {
+    url.pathname = pathname.slice(0, -1)
+    return Response.redirect(url, 308)
+  }
+  // Add a slash, unless there's a file extension
+  if (trailingSlash && !pathname.endsWith('/') && !pathname.split('/').pop()?.includes('.')) {
+    url.pathname = `${pathname}/`
+    return Response.redirect(url, 308)
+  }
+}

packages/runtime/src/templates/edge/function-runtime.ts

@@ -0,0 +1,23 @@
+import type { Context } from 'https://edge.netlify.com'
+// Available at build time
+import edgeFunction from './bundle.js'
+import { buildNextRequest, buildResponse, redirectTrailingSlash } from '../edge-shared/utils.ts'
+import nextConfig from '../edge-shared/nextConfig.json' assert { type: 'json' }
+
+const handler = async (req: Request, context: Context) => {
+  const url = new URL(req.url)
+  const redirect = redirectTrailingSlash(url, nextConfig.trailingSlash)
+  if (redirect) {
+    return redirect
+  }
+  const request = buildNextRequest(req, context, nextConfig)
+  try {
+    const result = await edgeFunction({ request })
+    return buildResponse({ result, request: req, context })
+  } catch (error) {
+    console.error(error)
+    return new Response(error.message, { status: 500 })
+  }
+}
+
+export default handler

packages/runtime/src/templates/edge/runtime.ts renamed to packages/runtime/src/templates/edge/middleware-runtime.ts

@@ -1,49 +1,13 @@
 import type { Context } from 'https://edge.netlify.com'
 // Available at build time
 import matchers from './matchers.json' assert { type: 'json' }
-import nextConfig from '../edge-shared/nextConfig.json' assert { type: 'json' }
 import edgeFunction from './bundle.js'
-import { buildResponse } from '../edge-shared/utils.ts'
+import { buildNextRequest, buildResponse } from '../edge-shared/utils.ts'
 import { getMiddlewareRouteMatcher, MiddlewareRouteMatch, searchParamsToUrlQuery } from '../edge-shared/next-utils.ts'
+import nextConfig from '../edge-shared/nextConfig.json' assert { type: 'json' }
 
 const matchesMiddleware: MiddlewareRouteMatch = getMiddlewareRouteMatcher(matchers || [])
 
-export interface FetchEventResult {
-  response: Response
-  waitUntil: Promise<any>
-}
-
-export interface I18NConfig {
-  defaultLocale: string
-  localeDetection?: false
-  locales: string[]
-}
-
-export interface RequestData {
-  geo?: {
-    city?: string
-    country?: string
-    region?: string
-    latitude?: string
-    longitude?: string
-    timezone?: string
-  }
-  headers: Record<string, string>
-  ip?: string
-  method: string
-  nextConfig?: {
-    basePath?: string
-    i18n?: I18NConfig | null
-    trailingSlash?: boolean
-  }
-  page?: {
-    name?: string
-    params?: { [key: string]: string }
-  }
-  url: string
-  body?: ReadableStream<Uint8Array>
-}
-
 export interface RequestContext {
   request: Request
   context: Context
@@ -70,15 +34,6 @@ const handler = async (req: Request, context: Context) => {
     return
   }
 
-  const geo: RequestData['geo'] = {
-    country: context.geo.country?.code,
-    region: context.geo.subdivision?.code,
-    city: context.geo.city,
-    latitude: context.geo.latitude?.toString(),
-    longitude: context.geo.longitude?.toString(),
-    timezone: context.geo.timezone,
-  }
-
   const requestId = req.headers.get('x-nf-request-id')
   if (!requestId) {
     console.error('Missing x-nf-request-id header')
@@ -89,15 +44,7 @@ const handler = async (req: Request, context: Context) => {
     })
   }
 
-  const request: RequestData = {
-    headers: Object.fromEntries(req.headers.entries()),
-    geo,
-    url: req.url,
-    method: req.method,
-    ip: context.ip,
-    body: req.body ?? undefined,
-    nextConfig,
-  }
+  const request = buildNextRequest(req, context, nextConfig)
 
   try {
     const result = await edgeFunction({ request })