feat: add enhanced middleware support

.eslintignore

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

.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

demos/middleware/middleware.ts

@@ -1,11 +1,53 @@
 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 page data
+    res.transformData((data) => {
+      data.pageProps.message = message
+      data.pageProps.showAd = true
+      return data
+    })
+
+    // Transform the response HTML
+    res.rewriteHTML('p[id=message]', {
+      text(textChunk) {
+        if (textChunk.lastInTextNode) {
+          textChunk.replace(message)
+        } else {
+          textChunk.remove()
+        }
+      },
+    })
+
+    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 +57,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/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,24 @@
+const Page = ({ message, showAd }) => (
+  <div>
+    <p id="message">{message}</p>
+    {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(context) {
+  return {
+    props: {
+      message: 'This is a static page',
+      showAd: false,
+    },
+  }
+}
+
+export default Page