refactor: return single middleware from getMiddleware in dev server (#…

…39177)

Previous next versions supported nested version of middleware, now we simplify it to one global middleware. This PR clarify the middleware and edge functions usage in dev server

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

@@ -104,13 +104,7 @@ export default class DevServer extends Server {
   private pagesDir: string
   private appDir?: string
   private actualMiddlewareFile?: string
-
-  /**
-   * Since the dev server is stateful and middleware routes can be added and
-   * removed over time, we need to keep a list of all of the middleware
-   * routing items to be returned in `getMiddleware()`
-   */
-  private middleware?: RoutingItem[]
+  private middleware?: RoutingItem
   private edgeFunctions?: RoutingItem[]
 
   protected staticPathsWorker?: { [key: string]: any } & {
@@ -381,7 +375,6 @@ export default class DevServer extends Server {
         }
 
         this.appPathRoutes = appPaths
-        this.middleware = []
         this.edgeFunctions = []
         getSortedRoutes(routedMiddleware).forEach((page) => {
           const isRootMiddleware = page === '/' && !!middlewareMatcher
@@ -397,8 +390,9 @@ export default class DevServer extends Server {
             ssr: !isRootMiddleware,
           }
 
-          this.middleware!.push(routeItem)
-          if (!isRootMiddleware) {
+          if (isRootMiddleware) {
+            this.middleware = routeItem
+          } else {
             this.edgeFunctions!.push(routeItem)
           }
         })
@@ -906,7 +900,7 @@ export default class DevServer extends Server {
   }
 
   protected getMiddleware() {
-    return this.middleware ?? []
+    return this.middleware
   }
 
   protected getEdgeFunctions() {
@@ -977,14 +971,17 @@ export default class DevServer extends Server {
       type: 'route',
       name: `_next/${CLIENT_STATIC_FILES_PATH}/${this.buildId}/${DEV_MIDDLEWARE_MANIFEST}`,
       fn: async (_req, res) => {
+        const edgeRoutes = this.getEdgeFunctions().concat(
+          this.middleware ? [this.middleware] : []
+        )
         res.statusCode = 200
         res.setHeader('Content-Type', 'application/json; charset=utf-8')
         res
           .body(
             JSON.stringify(
-              this.getMiddleware().map((middleware) => [
-                middleware.re!.source,
-                !!middleware.ssr,
+              edgeRoutes.map((edgeRoute) => [
+                edgeRoute.re!.source,
+                !!edgeRoute.ssr,
               ])
             )
           )

packages/next/server/next-server.ts

@@ -1052,16 +1052,16 @@ export default class NextNodeServer extends BaseServer {
    * overridden by the development server in order to use a different source
    * to get the list.
    */
-  protected getMiddleware(): RoutingItem[] {
+  protected getMiddleware(): RoutingItem | undefined {
     const manifest = this.getMiddlewareManifest()
     if (!manifest) {
-      return []
+      return
     }
 
     return manifest.sortedMiddleware.map((page) => ({
       match: getMiddlewareMatcher(manifest.middleware[page]),
       page,
-    }))
+    }))[0]
   }
 
   protected getEdgeFunctions(): RoutingItem[] {
@@ -1076,6 +1076,13 @@ export default class NextNodeServer extends BaseServer {
     }))
   }
 
+  protected getEdgeRoutes(): RoutingItem[] {
+    const edgeFunctions = this.getEdgeFunctions()
+    const middleware = this.getMiddleware()
+
+    return edgeFunctions.concat(middleware ? [middleware] : [])
+  }
+
   /**
    * Get information for the edge function located in the provided page
    * folder. If the edge function info can't be found it will throw
@@ -1203,8 +1210,8 @@ export default class NextNodeServer extends BaseServer {
     let result: FetchEventResult | null = null
     const method = (params.request.method || 'GET').toUpperCase()
 
-    const middlewareList = this.getMiddleware()
-    for (const middleware of middlewareList) {
+    const edgeRoutesList = this.getEdgeRoutes()
+    for (const middleware of edgeRoutesList) {
       if (middleware.match(normalizedPathname)) {
         if (!(await this.hasMiddleware(middleware.page, middleware.ssr))) {
           console.warn(`The Edge Function for ${middleware.page} was not found`)
@@ -1329,7 +1336,7 @@ export default class NextNodeServer extends BaseServer {
       name: 'middleware catchall',
       fn: async (req, res, _params, parsed) => {
         const middleware = this.getMiddleware()
-        if (!middleware.length) {
+        if (!middleware) {
           return { finished: false }
         }
 
@@ -1341,11 +1348,13 @@ export default class NextNodeServer extends BaseServer {
 
         parsedUrl.pathname = pathnameInfo.pathname
         const normalizedPathname = removeTrailingSlash(parsed.pathname || '')
-        if (!middleware.some((m) => m.match(normalizedPathname))) {
+        if (!middleware.match(normalizedPathname)) {
           return { finished: false }
         }
 
-        let result: Awaited<ReturnType<typeof this.runMiddleware>>
+        let result: Awaited<
+          ReturnType<typeof NextNodeServer.prototype.runMiddleware>
+        >
 
         try {
           result = await this.runMiddleware({
@@ -1492,7 +1501,7 @@ export default class NextNodeServer extends BaseServer {
 
     const routes = []
     if (!this.renderOpts.dev || devReady) {
-      if (this.getMiddleware().length) routes[0] = middlewareCatchAllRoute
+      if (this.getMiddleware()) routes[0] = middlewareCatchAllRoute
       if (this.getEdgeFunctions().length) routes[1] = edgeCatchAllRoute
     }