feat: add edge middleware support to ntl dev (#1546)

* feat: add edge middleware support to `ntl dev`

* chore: typo

* chore: null check for plugin instantiation

* chore: use plugin wrapper

* chore: refactor

* chore: fix test

* chore: update checks

* chore: use opt-out for edge at build/dev time

* chore: make build work

Author: ascorbic

.vscode/settings.json

@@ -4,6 +4,5 @@
     "demos/middleware/.netlify/edge-functions",
     "demos/server-components/.netlify/edge-functions",
   ],
-  "deno.unstable": true,
-  "deno.importMap": "demos/server-components/.netlify/edge-functions-import-map.json"
+  "deno.unstable": true
 }

demos/middleware/middleware.ts

@@ -5,16 +5,13 @@ import { MiddlewareRequest } from '@netlify/next'
 
 export async function middleware(req: NextRequest) {
   let response
-  const {
-    nextUrl: { pathname },
-  } = req
+  const { pathname } = req.nextUrl
 
   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}`
+    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)
@@ -58,6 +55,16 @@ export async function middleware(req: NextRequest) {
       response.headers.set('x-modified-in-rewrite', 'true')
     }
 
+    if (pathname.startsWith('/shows/redirectme')) {
+      const url = req.nextUrl.clone()
+      url.pathname = '/shows/100'
+      response = NextResponse.redirect(url)
+    }
+
+    if (pathname.startsWith('/shows/redirectexternal')) {
+      response = NextResponse.redirect('http://example.com/')
+    }
+
     if (!response) {
       response = NextResponse.next()
     }

demos/middleware/netlify.toml

@@ -4,6 +4,8 @@ publish = ".next"
 ignore = "if [ $CACHED_COMMIT_REF == $COMMIT_REF ]; then (exit 1); else git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../..; fi;"
 
 [[plugins]]
+# Switch these when testing `ntl dev`
+# package = "@netlify/plugin-nextjs"
 package = "../plugin-wrapper/"
 
 # This is a fake plugin, that makes it run npm install
@@ -15,16 +17,14 @@ included_files = [
     "!node_modules/sharp/vendor/8.12.2/darwin-*/**/*",
     "!node_modules/sharp/build/Release/sharp-darwin-*"
 ]
-
-[dev]
-framework = "#static"
-
-[[redirects]]
-from = "/_next/static/*"
-to = "/static/:splat"
-status = 200
-
-[[redirects]]
-from = "/*"
-to = "/.netlify/functions/___netlify-handler"
-status = 200
+# Uncomment this if testing the built files rather than dev
+# [dev]
+# framework = "#static"
+# [[redirects]]
+# from = "/_next/static/*"
+# to = "/static/:splat"
+# status = 200
+# [[redirects]]
+# from = "/*"
+# to = "/.netlify/functions/___netlify-handler"
+# status = 200

demos/middleware/package.json

@@ -9,8 +9,8 @@
     "ntl": "ntl-internal"
   },
   "dependencies": {
-    "@netlify/plugin-nextjs": "*",
     "@netlify/next": "*",
+    "@netlify/plugin-nextjs": "*",
     "next": "^12.2.0",
     "react": "18.0.0",
     "react-dom": "18.0.0"
@@ -24,4 +24,4 @@
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.3"
   }
-}
+}

demos/middleware/pages/index.js

@@ -25,6 +25,12 @@ export default function Home() {
         <p>
           <Link href="/shows/rewrite-external">Rewrite to external URL</Link>
         </p>
+        <p>
+          <Link href="/shows/redirectme">Redirect URL</Link>
+        </p>
+        <p>
+          <Link href="/shows/redirectexternal">Redirect to external URL</Link>
+        </p>
         <p>
           <Link href="/shows/static/3">Add header to static page</Link>
         </p>