fix: add missing data to middleware request object (#1634)

* fix: add missing data to middleware request object

When the middleware runs on the edge, it's missing data
that is hydrated by the NextServer when run in the context of the origin server.

Also fix which property is accessed on nextURL in the context of the MiddlewareRequest.

* docs: add limitations of edge middleware in local dev

* test: add test coverage for MiddlewareRequest

* fix: revert the change I made to focus on a test file

* test: remove some of the hard coded strings

Author: ericapisani

README.md

@@ -50,6 +50,12 @@ aware that this will result in slower performance, as all pages that match middl
 
 For more details on Next.js Middleware with Netlify, see the [middleware docs](https://github.com/netlify/next-runtime/blob/main/docs/middleware.md).
 
+### Limitations
+
+Due to how the site configuration is handled when it's run using Netlify Edge Functions, data such as `locale` and `defaultLocale` will be missing on the `req.nextUrl` object when running `netlify dev`. 
+
+However, this data is available on `req.nextUrl` in a production environment.
+
 ## Monorepos
 
 If you are using a monorepo you will need to change `publish` to point to the full path to the built `.next` directory,

jestSetup.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line n/no-unpublished-require
+require('jest-fetch-mock').enableMocks()

package-lock.json

@@ -63,6 +63,7 @@
     "eslint-plugin-unicorn": "^43.0.2",
     "husky": "^7.0.4",
     "jest": "^27.0.0",
+    "jest-fetch-mock": "^3.0.3",
     "netlify-plugin-cypress": "^2.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
@@ -81,6 +82,9 @@
     "node": ">=16.0.0"
   },
   "jest": {
+    "setupFiles": [
+      "./jestSetup.js"
+    ],
     "testMatch": [
       "**/test/**/*.js",
       "**/test/**/*.ts",
@@ -106,4 +110,4 @@
     "demos/custom-routes",
     "demos/next-with-edge-functions"
   ]
-}
+}

package.json

@@ -83,7 +83,7 @@ export class MiddlewareRequest extends Request {
   }
 
   get nextUrl() {
-    return this.nextRequest.url
+    return this.nextRequest.nextUrl
   }
 
   get url() {

packages/next/src/middleware/request.ts

@@ -0,0 +1,118 @@
+import Chance from 'chance'
+import { NextURL } from 'next/dist/server/web/next-url'
+import { NextCookies } from 'next/dist/server/web/spec-extension/cookies'
+import { NextRequest } from 'next/server'
+import { MiddlewareRequest } from '../src/middleware/request'
+
+const chance = new Chance()
+
+describe('MiddlewareRequest', () => {
+  let nextRequest, mockHeaders, mockHeaderValue, requestId, geo, ip, url
+
+  beforeEach(() => {
+    globalThis.Deno = {}
+    globalThis.NFRequestContextMap = new Map()
+
+    ip = chance.ip()
+    url = chance.url()
+
+    const context = {
+      geo: {
+        country: {
+          code: chance.country(),
+        },
+        subdivision: {
+          code: chance.province(),
+        },
+        city: chance.city(),
+      },
+      ip,
+    }
+
+    geo = {
+      country: context.geo.country?.code,
+      region: context.geo.subdivision?.code,
+      city: context.geo.city,
+    }
+
+    const req = new URL(url)
+
+    requestId = chance.guid()
+    globalThis.NFRequestContextMap.set(requestId, {
+      request: req,
+      context,
+    })
+
+    mockHeaders = new Headers()
+    mockHeaderValue = chance.word()
+
+    mockHeaders.append('foo', mockHeaderValue)
+    mockHeaders.append('x-nf-request-id', requestId)
+
+    const request = {
+      headers: mockHeaders,
+      geo,
+      method: 'GET',
+      ip: context.ip,
+      body: null,
+    }
+
+    nextRequest = new NextRequest(req, request)
+  })
+
+  afterEach(() => {
+    nextRequest = null
+    requestId = null
+    delete globalThis.Deno
+    delete globalThis.NFRequestContextMap
+  })
+
+  it('throws an error when MiddlewareRequest is run outside of edge environment', () => {
+    delete globalThis.Deno
+    expect(() => new MiddlewareRequest(nextRequest)).toThrowError(
+      'MiddlewareRequest only works in a Netlify Edge Function environment',
+    )
+  })
+
+  it('throws an error when x-nf-request-id header is missing', () => {
+    nextRequest.headers.delete('x-nf-request-id')
+    expect(() => new MiddlewareRequest(nextRequest)).toThrowError('Missing x-nf-request-id header')
+  })
+
+  it('throws an error when request context is missing', () => {
+    globalThis.NFRequestContextMap.delete(requestId)
+    expect(() => new MiddlewareRequest(nextRequest)).toThrowError(
+      `Could not find request context for request id ${requestId}`,
+    )
+  })
+
+  it('returns the headers object', () => {
+    const mwRequest = new MiddlewareRequest(nextRequest)
+    expect(mwRequest.headers).toStrictEqual(mockHeaders)
+  })
+
+  it('returns the cookies object', () => {
+    const mwRequest = new MiddlewareRequest(nextRequest)
+    expect(mwRequest.cookies).toBeInstanceOf(NextCookies)
+  })
+
+  it('returns the geo object', () => {
+    const mwRequest = new MiddlewareRequest(nextRequest)
+    expect(mwRequest.geo).toStrictEqual(geo)
+  })
+
+  it('returns the ip object', () => {
+    const mwRequest = new MiddlewareRequest(nextRequest)
+    expect(mwRequest.ip).toStrictEqual(ip)
+  })
+
+  it('returns the nextUrl object', () => {
+    const mwRequest = new MiddlewareRequest(nextRequest)
+    expect(mwRequest.nextUrl).toBeInstanceOf(NextURL)
+  })
+
+  it('returns the url', () => {
+    const mwRequest = new MiddlewareRequest(nextRequest)
+    expect(mwRequest.url).toEqual(url)
+  })
+})

packages/next/test/request.spec.ts

@@ -7,6 +7,8 @@ import { copy, copyFile, emptyDir, ensureDir, readJSON, readJson, writeJSON, wri
 import type { MiddlewareManifest } from 'next/dist/build/webpack/plugins/middleware-plugin'
 import type { RouteHas } from 'next/dist/lib/load-custom-routes'
 
+import { getRequiredServerFiles } from './config'
+
 // This is the format as of next@12.2
 interface EdgeFunctionDefinitionV1 {
   env: string[]
@@ -198,6 +200,11 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
 
   await copy(getEdgeTemplatePath('../edge-shared'), join(edgeFunctionRoot, 'edge-shared'))
 
+  const { publish } = netlifyConfig.build
+  const nextConfigFile = await getRequiredServerFiles(publish)
+  const nextConfig = nextConfigFile.config
+  await writeJSON(join(edgeFunctionRoot, 'edge-shared', 'nextConfig.json'), nextConfig)
+
   if (!process.env.NEXT_DISABLE_EDGE_IMAGES) {
     console.log(
       'Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.',