fix: run edge middleware on data requests (#1382)

* fix: run middleware on data requests

* chore: add static page to middleware demo

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: ascorbic

demos/middleware/middleware.ts

@@ -3,7 +3,9 @@ import { NextFetchEvent, NextRequest } from 'next/server'
 
 export function middleware(request: NextRequest, ev: NextFetchEvent) {
   let response
-  const {nextUrl: {pathname}} = request
+  const {
+    nextUrl: { pathname },
+  } = request
 
   if (pathname.startsWith('/cookies')) {
     response = NextResponse.next()
@@ -30,10 +32,14 @@ export function middleware(request: NextRequest, ev: NextFetchEvent) {
     if (!response) {
       response = NextResponse.next()
     }
+
+    if (pathname.startsWith('/shows/static')) {
+      response.headers.set('x-middleware-date', new Date().toISOString())
+    }
+
     response.headers.set('x-modified-edge', 'true')
     response.headers.set('x-is-deno', 'Deno' in globalThis ? 'true' : 'false')
 
     return response
   }
-
 }

demos/middleware/package.json

@@ -9,7 +9,7 @@
     "ntl": "ntl-internal"
   },
   "dependencies": {
-    "next": "^12.1.7-canary.12",
+    "next": "^12.1.7-canary.33",
     "react": "18.0.0",
     "react-dom": "18.0.0"
   },

demos/middleware/pages/index.js

@@ -25,6 +25,9 @@ export default function Home() {
         <p>
           <Link href="/shows/rewrite-external">Rewrite to external URL</Link>
         </p>
+        <p>
+          <Link href="/shows/static/3">Add header to static page</Link>
+        </p>
         <p>
           <Link href="/cookies" prefetch={false}>
             Cookie API

demos/middleware/pages/shows/static/[id].js

@@ -0,0 +1,55 @@
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+const Show = ({ show }) => {
+  const router = useRouter()
+
+  if (router.isFallback) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div>
+      <p>
+        Check the network panel for the header <code>x-middleware-date</code> to ensure that it is running
+      </p>
+      <hr />
+      <p>
+        <Link href="/shows/static/3">Show 3</Link> and <Link href="/shows/static/4">show 4</Link> are pre-rendered
+      </p>
+      <h1>Show #{show.id}</h1>
+      <p>{show.name}</p>
+
+      <hr />
+
+      <Link href="/">
+        <a>Go back home</a>
+      </Link>
+    </div>
+  )
+}
+
+export async function getStaticPaths() {
+  // Set the paths we want to pre-render
+  const paths = [{ params: { id: '3' } }, { params: { id: '4' } }]
+
+  // We'll pre-render these paths at build time.
+  // { fallback: true } means other routes will be rendered at runtime.
+  return { paths, fallback: true }
+}
+
+export async function getStaticProps({ params }) {
+  // The ID to render
+  const { id } = params
+
+  const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
+  const data = await res.json()
+
+  return {
+    props: {
+      show: data,
+    },
+  }
+}
+
+export default Show