feat: add enhanced middleware support (#1479)

* fix: update patch syntax

* feat: add support for rewriting middleware responses

* chore: format

* chore: add extra content

* chore: use city in demo

* feat: add html rewriting

* feat: add request header support

* feat: add rewriting

* chore: move NetlifyReponse into a subpackage

* feat: allow returning `NetlifyReponse` directly

* chore: remove inlined types from middleware demo

* chore: remove modified toml

* chore: add demo links

* chore: add comments to example

* chore: don't lint generated types

* chore: rename class

* chore: add comment about source of htmlrewriter types

* refactor: use type guards

* chore: rename classes

* chore: rename again

* chore: rename again

* chore: update example

* chore: make req a subclass of Request

* chore: switch from hidden fields to global map

* ci: add cypress middleware tests

* ci: add tests for middleware headers

* ci: add tests for enhanced middleware

* chore: fix test

* fix: handle other HTTP verbs

* feat: add helper methods

* fix: less flaky test

Co-authored-by: Nick Taylor <[email protected]>

Author: ascorbic

.eslintignore

@@ -3,4 +3,6 @@ node_modules
 test
 lib
 demos
-plugin/src/templates/edge
+plugin/src/templates/edge
+plugin/lib
+plugin/dist-types

.github/workflows/cypress-middleware.yml

@@ -0,0 +1,73 @@
+name: Run e2e (middleware demo)
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled, synchronize]
+  push:
+    branches:
+      - main
+    paths:
+      - 'demos/middleware/**/*.{js,jsx,ts,tsx}'
+      - 'cypress/integration/middleware/**/*.{ts,js}'
+      - 'src/**/*.{ts,js}'
+jobs:
+  cypress:
+    name: Cypress
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3, 4]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Generate Github token
+        uses: navikt/github-app-token-generator@v1
+        id: get-token
+        with:
+          private-key: ${{ secrets.TOKENS_PRIVATE_KEY }}
+          app-id: ${{ secrets.TOKENS_APP_ID }}
+
+      - name: Checkout @netlify/wait-for-deploy-action
+        uses: actions/checkout@v2
+        with:
+          repository: netlify/wait-for-deploy-action
+          token: ${{ steps.get-token.outputs.token }}
+          path: ./.github/actions/wait-for-netlify-deploy
+
+      - name: Wait for Netlify Deploy
+        id: deploy
+        uses: ./.github/actions/wait-for-netlify-deploy
+        with:
+          site-name: next-plugin-edge-middleware
+          timeout: 300
+
+      - name: Deploy successful
+        if: ${{ steps.deploy.outputs.origin-url }}
+        run: echo ${{ steps.deploy.outputs.origin-url }}
+
+      - name: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - run: npm install
+
+      - name: Cypress run
+        if: ${{ steps.deploy.outputs.origin-url }}
+        id: cypress
+        uses: cypress-io/github-action@v2
+        with:
+          browser: chrome
+          headless: true
+          record: true
+          parallel: true
+          config-file: cypress/config/middleware.json
+          group: 'Next Plugin - Middleware'
+          spec: cypress/integration/middleware/*
+        env:
+          DEBUG: '@cypress/github-action'
+          CYPRESS_baseUrl: ${{ steps.deploy.outputs.origin-url }}
+          CYPRESS_NETLIFY_CONTEXT: ${{ steps.deploy.outputs.context }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.MIDDLEWARE_CYPRESS_RECORD_KEY }}

.gitignore

@@ -147,6 +147,7 @@ Temporary Items
 demos/default/.next
 .parcel-cache
 plugin/lib
+plugin/dist-types
 
 # Cypress
 cypress/screenshots

.prettierignore

@@ -21,6 +21,7 @@ node_modules
 lib
 tsconfig.json
 demos/nx-next-monorepo-demo
-plugin/src/templates/edge
 
-plugin/CHANGELOG.md
+plugin/CHANGELOG.md
+plugin/lib
+plugin/dist-types

cypress/config/middleware.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:8888",
+  "integrationFolder": "cypress/integration/middleware",
+  "projectId": "yn8qwi"
+}

cypress/integration/middleware/enhanced.spec.ts

@@ -0,0 +1,28 @@
+describe('Enhanced middleware', () => {
+  it('adds request headers', () => {
+    cy.request('/api/hello').then((response) => {
+      expect(response.body).to.have.nested.property('headers.x-hello', 'world')
+    })
+  })
+
+  it('adds request headers to a rewrite', () => {
+    cy.request('/headers').then((response) => {
+      expect(response.body).to.have.nested.property('headers.x-hello', 'world')
+    })
+  })
+
+  it('rewrites the response body', () => {
+    cy.visit('/static')
+    cy.get('#message').contains('This was static but has been transformed in')
+    cy.contains("This is an ad that isn't shown by default")
+  })
+
+  it('modifies the page props', () => {
+    cy.request('/_next/data/build-id/static.json').then((response) => {
+      expect(response.body).to.have.nested.property('pageProps.showAd', true)
+      expect(response.body)
+        .to.have.nested.property('pageProps.message')
+        .that.includes('This was static but has been transformed in')
+    })
+  })
+})

cypress/integration/middleware/standard.spec.ts

@@ -0,0 +1,22 @@
+describe('Standard middleware', () => {
+  it('rewrites to internal page', () => {
+    // preview mode is off by default
+    cy.visit('/shows/rewriteme')
+    cy.get('h1').should('contain', 'Show #100')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/shows/rewriteme`)
+  })
+
+  it('rewrites to external page', () => {
+    cy.visit('/shows/rewrite-external')
+    cy.get('h1').should('contain', 'Example Domain')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/shows/rewrite-external`)
+  })
+
+  it('adds headers to static pages', () => {
+    cy.request('/shows/static/3').then((response) => {
+      expect(response.headers).to.have.property('x-middleware-date')
+      expect(response.headers).to.have.property('x-is-deno', 'true')
+      expect(response.headers).to.have.property('x-modified-edge', 'true')
+    })
+  })
+})

demos/middleware/middleware.ts

@@ -1,11 +1,40 @@
 import { NextResponse } from 'next/server'
-import { NextFetchEvent, NextRequest } from 'next/server'
+import type { NextRequest } from 'next/server'
 
-export function middleware(request: NextRequest, ev: NextFetchEvent) {
+import { MiddlewareRequest } from '@netlify/plugin-nextjs/middleware'
+
+export async function middleware(req: NextRequest) {
   let response
   const {
     nextUrl: { pathname },
-  } = request
+  } = req
+
+  const request = new MiddlewareRequest(req)
+
+  if (pathname.startsWith('/static')) {
+    // Unlike NextResponse.next(), this actually sends the request to the origin
+    const res = await request.next()
+    const message = `This was static but has been transformed in ${req.geo.city}`
+
+    // Transform the response HTML and props
+    res.replaceText('p[id=message]', message)
+    res.setPageProp('message', message)
+    res.setPageProp('showAd', true)
+
+    return res
+  }
+
+  if (pathname.startsWith('/api/hello')) {
+    // Add a header to the request
+    req.headers.set('x-hello', 'world')
+    return request.next()
+  }
+
+  if (pathname.startsWith('/headers')) {
+    // Add a header to the rewritten request
+    req.headers.set('x-hello', 'world')
+    return request.rewrite('/api/hello')
+  }
 
   if (pathname.startsWith('/cookies')) {
     response = NextResponse.next()
@@ -15,15 +44,15 @@ export function middleware(request: NextRequest, ev: NextFetchEvent) {
 
   if (pathname.startsWith('/shows')) {
     if (pathname.startsWith('/shows/rewrite-absolute')) {
-      response = NextResponse.rewrite(new URL('/shows/100', request.url))
+      response = NextResponse.rewrite(new URL('/shows/100', req.url))
       response.headers.set('x-modified-in-rewrite', 'true')
     }
     if (pathname.startsWith('/shows/rewrite-external')) {
       response = NextResponse.rewrite('http://example.com/')
       response.headers.set('x-modified-in-rewrite', 'true')
     }
     if (pathname.startsWith('/shows/rewriteme')) {
-      const url = request.nextUrl.clone()
+      const url = req.nextUrl.clone()
       url.pathname = '/shows/100'
       response = NextResponse.rewrite(url)
       response.headers.set('x-modified-in-rewrite', 'true')

demos/middleware/netlify.toml

@@ -21,3 +21,13 @@ included_files = [
 
 [dev]
 framework = "#static"
+
+[[redirects]]
+from = "/_next/static/*"
+to = "/static/:splat"
+status = 200
+
+[[redirects]]
+from = "/*"
+to = "/.netlify/functions/___netlify-handler"
+status = 200

demos/middleware/next.config.js

@@ -6,6 +6,7 @@ const nextConfig = {
     // your project has ESLint errors.
     ignoreDuringBuilds: true,
   },
+  generateBuildId: () => 'build-id',
 }
 
 module.exports = nextConfig

demos/middleware/package.json

@@ -9,12 +9,12 @@
     "ntl": "ntl-internal"
   },
   "dependencies": {
+    "@netlify/plugin-nextjs": "*",
     "next": "^12.2.0",
     "react": "18.0.0",
     "react-dom": "18.0.0"
   },
   "devDependencies": {
-    "@netlify/plugin-nextjs": "*",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.25",
@@ -23,4 +23,4 @@
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.3"
   }
-}
+}

demos/middleware/pages/api/hello.js

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe', headers: req.headers })
 }

demos/middleware/pages/index.js

@@ -33,6 +33,15 @@ export default function Home() {
             Cookie API
           </Link>
         </p>
+        <p>
+          <Link href="/api/hello">Adds `x-hello` request header</Link>
+        </p>
+        <p>
+          <Link href="/static">Rewrite static page content</Link>
+        </p>
+        <p>
+          <Link href="/headers">Adds `x-hello` request header to a rewrite</Link>
+        </p>
       </main>
     </div>
   )

demos/middleware/pages/static.js

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+const useHydrated = () => {
+  const [hydrated, setHydrated] = React.useState(false)
+  React.useEffect(() => {
+    setHydrated(true)
+  }, [])
+  return hydrated
+}
+
+const Page = ({ message, showAd }) => {
+  const hydrated = useHydrated()
+  return (
+    <div>
+      <p id="message">{message}</p>
+      {hydrated && showAd ? (
+        <div>
+          <p>This is an ad that isn't shown by default</p>
+          <img src="http://placekitten.com/400/300" />
+        </div>
+      ) : (
+        <p>No ads for me</p>
+      )}
+    </div>
+  )
+}
+
+export async function getStaticProps() {
+  return {
+    props: {
+      message: 'This is a static page',
+      showAd: false,
+    },
+  }
+}
+
+export default Page