Migrate middleware ssr to edge functions

simplify code

use catch all routes

group middleware and edge routes

dynamic routes

rm clientInfo from middleware manifest

fix typing and rm log

fix trailing slash

define edge and middleware catch all routes

opt into edge ssr if there's any

impl edge functions in dev server

fix dev mode middleware

rename

fix middleware edge order

fix dev middleware

fix gssp test and rsc test head warning

fix dynamic routes

fix dynamic routes

catch find page and rendering error thrown

revert dynamic routes render change

reverts

fix middleware hmr test

fix extra space in test

adjust routes order

rm duplicated

reorder

ensure middleware for edge function

rm filter

packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts

@@ -106,16 +106,6 @@ export function getRender({
   const requestHandler = server.getRequestHandler()
 
   return async function render(request: NextRequest) {
-    // Preflight request
-    if (request.method === 'HEAD') {
-      // Hint the client that the matched route is a SSR page.
-      return new Response(null, {
-        headers: {
-          'x-middleware-ssr': '1',
-        },
-      })
-    }
-
     const extendedReq = new WebNextRequest(request)
     const extendedRes = new WebNextResponse()
     requestHandler(extendedReq, extendedRes)

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -26,7 +26,6 @@ interface EdgeFunctionDefinition {
 export interface MiddlewareManifest {
   version: 1
   sortedMiddleware: string[]
-  clientInfo: [location: string, isSSR: boolean][]
   middleware: { [page: string]: EdgeFunctionDefinition }
   functions: { [page: string]: EdgeFunctionDefinition }
 }
@@ -42,7 +41,6 @@ interface EntryMetadata {
 const NAME = 'MiddlewarePlugin'
 const middlewareManifest: MiddlewareManifest = {
   sortedMiddleware: [],
-  clientInfo: [],
   middleware: {},
   functions: {},
   version: 1,
@@ -512,7 +510,7 @@ function getCreateAssets(params: {
         wasm: Array.from(metadata.wasmBindings),
       }
 
-      if (metadata.edgeApiFunction /* || metadata.edgeSSR */) {
+      if (metadata.edgeApiFunction || metadata.edgeSSR) {
         middlewareManifest.functions[page] = edgeFunctionDefinition
       } else {
         middlewareManifest.middleware[page] = edgeFunctionDefinition
@@ -523,13 +521,6 @@ function getCreateAssets(params: {
       Object.keys(middlewareManifest.middleware)
     )
 
-    middlewareManifest.clientInfo = middlewareManifest.sortedMiddleware.map(
-      (key) => [
-        middlewareManifest.middleware[key].regexp,
-        !!metadataByEntry.get(middlewareManifest.middleware[key].name)?.edgeSSR,
-      ]
-    )
-
     assets[MIDDLEWARE_MANIFEST] = new sources.RawSource(
       JSON.stringify(middlewareManifest, null, 2)
     )
@@ -624,7 +615,7 @@ function makeUnsupportedApiError(
   loc: any
 ) {
   const error = new WebpackError(
-    `You're using a Node.js API (${name} at line: ${loc.start.line}) which is not supported in the Edge Runtime that Middleware uses. 
+    `You're using a Node.js API (${name} at line: ${loc.start.line}) which is not supported in the Edge Runtime that Middleware uses.
 Learn more: https://nextjs.org/docs/api-reference/edge-runtime`
   )
   error.name = NAME

packages/next/server/base-server.ts

@@ -82,6 +82,7 @@ export interface RoutingItem {
   page: string
   match: RouteMatch
   ssr?: boolean
+  re?: RegExp
 }
 
 export interface Options {
@@ -199,7 +200,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   protected abstract generateImageRoutes(): Route[]
   protected abstract generateStaticRoutes(): Route[]
   protected abstract generateFsStaticRoutes(): Route[]
-  protected abstract generateCatchAllMiddlewareRoute(): Route | undefined
+  protected abstract generateCatchAllMiddlewareRoute(): Route[]
   protected abstract generateRewrites({
     restrictedRedirectPaths,
   }: {
@@ -213,7 +214,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   protected abstract findPageComponents(
     pathname: string,
     query?: NextParsedUrlQuery,
-    params?: Params | null
+    params?: Params
   ): Promise<FindComponentsResult | null>
   protected abstract getPagePath(pathname: string, locales?: string[]): string
   protected abstract getFontManifest(): FontManifest | undefined
@@ -237,7 +238,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     req: BaseNextRequest,
     res: BaseNextResponse,
     query: ParsedUrlQuery,
-    params: Params | boolean,
+    params: Params | undefined,
     page: string,
     builtPagePath: string
   ): Promise<boolean>
@@ -714,7 +715,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     fsRoutes: Route[]
     redirects: Route[]
     catchAllRoute: Route
-    catchAllMiddleware?: Route | undefined
+    catchAllMiddleware: Route[]
     pageChecker: PageChecker
     useFileSystemPublicRoutes: boolean
     dynamicRoutes: DynamicRoutes | undefined
@@ -938,12 +939,12 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     query: ParsedUrlQuery
   ): Promise<boolean> {
     let page = pathname
-    let params: Params | false = false
+    let params: Params | undefined = undefined
     let pageFound = !isDynamicRoute(page) && (await this.hasPage(page))
 
     if (!pageFound && this.dynamicRoutes) {
       for (const dynamicRoute of this.dynamicRoutes) {
-        params = dynamicRoute.match(pathname)
+        params = dynamicRoute.match(pathname) || undefined
         if (dynamicRoute.page.startsWith('/api') && params) {
           page = dynamicRoute.page
           pageFound = true
@@ -1872,7 +1873,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     }
 
     if (
-      this.router.catchAllMiddleware &&
+      this.router.catchAllMiddleware[0] &&
       !!ctx.req.headers['x-nextjs-data'] &&
       (!res.statusCode || res.statusCode === 200 || res.statusCode === 404)
     ) {

packages/next/server/dev/next-dev-server.ts

@@ -112,6 +112,7 @@ export default class DevServer extends Server {
    * routing items to be returned in `getMiddleware()`
    */
   private middleware?: RoutingItem[]
+  private edgeFunctions?: RoutingItem[]
 
   protected staticPathsWorker?: { [key: string]: any } & {
     loadStaticPaths: typeof import('./static-paths-worker').loadStaticPaths
@@ -382,18 +383,25 @@ export default class DevServer extends Server {
         }
 
         this.appPathRoutes = appPaths
-        this.middleware = getSortedRoutes(routedMiddleware).map((page) => {
-          const middlewareRegex =
-            page === '/' && middlewareMatcher
-              ? { re: middlewareMatcher, groups: {} }
-              : getMiddlewareRegex(page, {
-                  catchAll: !ssrMiddleware.has(page),
-                })
-          return {
+        this.middleware = []
+        this.edgeFunctions = []
+        getSortedRoutes(routedMiddleware).forEach((page) => {
+          const isRootMiddleware = page === '/' && !!middlewareMatcher
+          const middlewareRegex = isRootMiddleware
+            ? { re: middlewareMatcher!, groups: {} }
+            : getMiddlewareRegex(page, {
+                catchAll: !ssrMiddleware.has(page),
+              })
+          const routeItem = {
             match: getRouteMatcher(middlewareRegex),
             page,
             re: middlewareRegex.re,
-            ssr: ssrMiddleware.has(page),
+            ssr: !isRootMiddleware,
+          }
+
+          this.middleware!.push(routeItem)
+          if (!isRootMiddleware) {
+            this.edgeFunctions!.push(routeItem)
           }
         })
 
@@ -690,6 +698,28 @@ export default class DevServer extends Server {
     }
   }
 
+  async runEdgeFunction(params: {
+    req: BaseNextRequest
+    res: BaseNextResponse
+    query: ParsedUrlQuery
+    params: Params | undefined
+    page: string
+  }) {
+    try {
+      return super.runEdgeFunction(params)
+    } catch (error) {
+      if (error instanceof DecodeError) {
+        throw error
+      }
+      this.logErrorWithOriginalStack(error, 'warning')
+      const err = getProperError(error)
+      const { req, res, page } = params
+      res.statusCode = 500
+      this.renderError(err, req, res, page)
+      return null
+    }
+  }
+
   async run(
     req: NodeNextRequest,
     res: NodeNextResponse,
@@ -859,6 +889,10 @@ export default class DevServer extends Server {
     return this.middleware ?? []
   }
 
+  protected getEdgeFunctions() {
+    return this.edgeFunctions ?? []
+  }
+
   protected getServerComponentManifest() {
     return undefined
   }
@@ -929,7 +963,7 @@ export default class DevServer extends Server {
           .body(
             JSON.stringify(
               this.getMiddleware().map((middleware) => [
-                (middleware as any).re.source,
+                middleware.re!.source,
                 !!middleware.ssr,
               ])
             )