Implement Middleware RFC (#30081)

This PR adds support for [Middleware as per RFC ](#29750). 

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes

Author: javivelasco

packages/next/build/entries.ts

@@ -2,16 +2,19 @@ import chalk from 'chalk'
 import { posix, join } from 'path'
 import { stringify } from 'querystring'
 import { API_ROUTE, DOT_NEXT_ALIAS, PAGES_DIR_ALIAS } from '../lib/constants'
+import { MIDDLEWARE_ROUTE } from '../lib/constants'
 import { __ApiPreviewProps } from '../server/api-utils'
 import { isTargetLikeServerless } from '../server/config'
 import { normalizePagePath } from '../server/normalize-page-path'
 import { warn } from './output/log'
+import { MiddlewareLoaderOptions } from './webpack/loaders/next-middleware-loader'
 import { ClientPagesLoaderOptions } from './webpack/loaders/next-client-pages-loader'
 import { ServerlessLoaderQuery } from './webpack/loaders/next-serverless-loader'
 import { LoadedEnvFiles } from '@next/env'
 import { NextConfigComplete } from '../server/config-shared'
 import type webpack5 from 'webpack5'
 
+type ObjectValue<T> = T extends { [key: string]: infer V } ? V : never
 type PagesMapping = {
   [page: string]: string
 }
@@ -118,6 +121,18 @@ export function createEntrypoints(
 
     const isLikeServerless = isTargetLikeServerless(target)
 
+    if (page.match(MIDDLEWARE_ROUTE)) {
+      const loaderOpts: MiddlewareLoaderOptions = {
+        absolutePagePath: pages[page],
+        page,
+      }
+
+      client[clientBundlePath] = `next-middleware-loader?${stringify(
+        loaderOpts
+      )}!`
+      return
+    }
+
     if (isApiRoute && isLikeServerless) {
       const serverlessLoaderOptions: ServerlessLoaderQuery = {
         page,
@@ -170,54 +185,56 @@ export function createEntrypoints(
   }
 }
 
-export function finalizeEntrypoint(
-  name: string,
-  value: any,
+export function finalizeEntrypoint({
+  name,
+  value,
+  isServer,
+}: {
   isServer: boolean
-): any {
+  name: string
+  value: ObjectValue<webpack5.EntryObject>
+}): ObjectValue<webpack5.EntryObject> {
+  const entry =
+    typeof value !== 'object' || Array.isArray(value)
+      ? { import: value }
+      : value
+
   if (isServer) {
     const isApi = name.startsWith('pages/api/')
-    const runtime = isApi ? 'webpack-api-runtime' : 'webpack-runtime'
-    const layer = isApi ? 'api' : undefined
-    const publicPath = isApi ? '' : undefined
-    if (typeof value === 'object' && !Array.isArray(value)) {
-      return {
-        publicPath,
-        runtime,
-        layer,
-        ...value,
-      }
-    } else {
-      return {
-        import: value,
-        publicPath,
-        runtime,
-        layer,
-      }
+    return {
+      publicPath: isApi ? '' : undefined,
+      runtime: isApi ? 'webpack-api-runtime' : 'webpack-runtime',
+      layer: isApi ? 'api' : undefined,
+      ...entry,
     }
-  } else {
-    if (
-      name !== 'polyfills' &&
-      name !== 'main' &&
-      name !== 'amp' &&
-      name !== 'react-refresh'
-    ) {
-      const dependOn =
+  }
+
+  if (name.match(MIDDLEWARE_ROUTE)) {
+    return {
+      filename: 'server/[name].js',
+      layer: 'middleware',
+      library: {
+        name: ['_ENTRIES', `middleware_[name]`],
+        type: 'assign',
+      },
+      ...entry,
+    }
+  }
+
+  if (
+    name !== 'polyfills' &&
+    name !== 'main' &&
+    name !== 'amp' &&
+    name !== 'react-refresh'
+  ) {
+    return {
+      dependOn:
         name.startsWith('pages/') && name !== 'pages/_app'
           ? 'pages/_app'
-          : 'main'
-      if (typeof value === 'object' && !Array.isArray(value)) {
-        return {
-          dependOn,
-          ...value,
-        }
-      } else {
-        return {
-          import: value,
-          dependOn,
-        }
-      }
+          : 'main',
+      ...entry,
     }
   }
-  return value
+
+  return entry
 }

packages/next/build/index.ts

@@ -13,6 +13,7 @@ import formatWebpackMessages from '../client/dev/error-overlay/format-webpack-me
 import {
   STATIC_STATUS_PAGE_GET_INITIAL_PROPS_ERROR,
   PUBLIC_DIR_MIDDLEWARE_CONFLICT,
+  MIDDLEWARE_ROUTE,
 } from '../lib/constants'
 import { fileExists } from '../lib/file-exists'
 import { findPagesDir } from '../lib/find-pages-dir'
@@ -46,6 +47,7 @@ import {
   SERVER_DIRECTORY,
   SERVER_FILES_MANIFEST,
   STATIC_STATUS_PAGES,
+  MIDDLEWARE_MANIFEST,
 } from '../shared/lib/constants'
 import {
   getRouteRegex,
@@ -94,6 +96,9 @@ import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
 import { NextConfigComplete } from '../server/config-shared'
 import isError from '../lib/is-error'
 import { TelemetryPlugin } from './webpack/plugins/telemetry-plugin'
+import { MiddlewareManifest } from './webpack/plugins/middleware-plugin'
+
+const RESERVED_PAGE = /^\/(_app|_error|_document|api(\/|$))/
 
 export type SsgRoute = {
   initialRevalidateSeconds: number | false
@@ -394,6 +399,12 @@ export default async function build(
             fallback: Array<ReturnType<typeof buildCustomRoute>>
           }
       headers: Array<ReturnType<typeof buildCustomRoute>>
+      staticRoutes: Array<{
+        page: string
+        regex: string
+        namedRegex?: string
+        routeKeys?: { [key: string]: string }
+      }>
       dynamicRoutes: Array<{
         page: string
         regex: string
@@ -424,16 +435,16 @@ export default async function build(
       redirects: redirects.map((r: any) => buildCustomRoute(r, 'redirect')),
       headers: headers.map((r: any) => buildCustomRoute(r, 'header')),
       dynamicRoutes: getSortedRoutes(pageKeys)
-        .filter(isDynamicRoute)
-        .map((page) => {
-          const routeRegex = getRouteRegex(page)
-          return {
-            page,
-            regex: normalizeRouteRegex(routeRegex.re.source),
-            routeKeys: routeRegex.routeKeys,
-            namedRegex: routeRegex.namedRegex,
-          }
-        }),
+        .filter((page) => isDynamicRoute(page) && !page.match(MIDDLEWARE_ROUTE))
+        .map(pageToRoute),
+      staticRoutes: getSortedRoutes(pageKeys)
+        .filter(
+          (page) =>
+            !isDynamicRoute(page) &&
+            !page.match(MIDDLEWARE_ROUTE) &&
+            !page.match(RESERVED_PAGE)
+        )
+        .map(pageToRoute),
       dataRoutes: [],
       i18n: config.i18n || undefined,
     }))
@@ -833,11 +844,7 @@ export default async function build(
             let isHybridAmp = false
             let ssgPageRoutes: string[] | null = null
 
-            const nonReservedPage = !page.match(
-              /^\/(_app|_error|_document|api(\/|$))/
-            )
-
-            if (nonReservedPage) {
+            if (!page.match(MIDDLEWARE_ROUTE) && !page.match(RESERVED_PAGE)) {
               try {
                 let isPageStaticSpan =
                   checkPageSpan.traceChild('is-page-static')
@@ -1694,6 +1701,25 @@ export default async function build(
       )
     }
 
+    const middlewareManifest: MiddlewareManifest = JSON.parse(
+      await promises.readFile(
+        path.join(distDir, SERVER_DIRECTORY, MIDDLEWARE_MANIFEST),
+        'utf8'
+      )
+    )
+
+    await promises.writeFile(
+      path.join(
+        distDir,
+        CLIENT_STATIC_FILES_PATH,
+        buildId,
+        '_middlewareManifest.js'
+      ),
+      `self.__MIDDLEWARE_MANIFEST=${devalue(
+        middlewareManifest.sortedMiddleware
+      )};self.__MIDDLEWARE_MANIFEST_CB&&self.__MIDDLEWARE_MANIFEST_CB()`
+    )
+
     const images = { ...config.images }
     const { deviceSizes, imageSizes } = images
     ;(images as any).sizes = [...deviceSizes, ...imageSizes]
@@ -1797,3 +1823,13 @@ function generateClientSsgManifest(
 function isTelemetryPlugin(plugin: unknown): plugin is TelemetryPlugin {
   return plugin instanceof TelemetryPlugin
 }
+
+function pageToRoute(page: string) {
+  const routeRegex = getRouteRegex(page)
+  return {
+    page,
+    regex: normalizeRouteRegex(routeRegex.re.source),
+    routeKeys: routeRegex.routeKeys,
+    namedRegex: routeRegex.namedRegex,
+  }
+}

packages/next/build/webpack-config.ts

@@ -13,6 +13,7 @@ import {
   NEXT_PROJECT_ROOT,
   NEXT_PROJECT_ROOT_DIST_CLIENT,
   PAGES_DIR_ALIAS,
+  MIDDLEWARE_ROUTE,
 } from '../lib/constants'
 import { fileExists } from '../lib/file-exists'
 import { getPackageVersion } from '../lib/get-package-version'
@@ -34,6 +35,7 @@ import { finalizeEntrypoint } from './entries'
 import * as Log from './output/log'
 import { build as buildConfiguration } from './webpack/config'
 import { __overrideCssConfiguration } from './webpack/config/blocks/css/overrideCssConfiguration'
+import MiddlewarePlugin from './webpack/plugins/middleware-plugin'
 import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
 import { JsConfigPathsPlugin } from './webpack/plugins/jsconfig-paths-plugin'
 import { DropClientPage } from './webpack/plugins/next-drop-client-page-plugin'
@@ -323,6 +325,20 @@ export default async function getBaseWebpackConfig(
             hasJsxRuntime: true,
           },
         },
+    babelMiddleware: {
+      loader: require.resolve('./babel/loader/index'),
+      options: {
+        cache: false,
+        configFile: babelConfigFile,
+        cwd: dir,
+        development: dev,
+        distDir,
+        hasJsxRuntime: true,
+        hasReactRefresh: false,
+        isServer: true,
+        pagesDir,
+      },
+    },
   }
 
   const babelIncludeRegexes: RegExp[] = [
@@ -576,10 +592,12 @@ export default async function getBaseWebpackConfig(
         // as we don't need a separate vendor chunk from that
         // and all other chunk depend on them so there is no
         // duplication that need to be pulled out.
-        chunks: (chunk) => !/^(polyfills|main|pages\/_app)$/.test(chunk.name),
+        chunks: (chunk) =>
+          !/^(polyfills|main|pages\/_app|\/_middleware)$/.test(chunk.name),
         cacheGroups: {
           framework: {
-            chunks: 'all',
+            chunks: (chunk: webpack.compilation.Chunk) =>
+              !chunk.name?.match(MIDDLEWARE_ROUTE),
             name: 'framework',
             // This regex ignores nested copies of framework libraries so they're
             // bundled with their issuer.
@@ -629,6 +647,12 @@ export default async function getBaseWebpackConfig(
             minChunks: totalPages,
             priority: 20,
           },
+          middleware: {
+            chunks: (chunk: webpack.compilation.Chunk) =>
+              chunk.name?.match(MIDDLEWARE_ROUTE),
+            filename: 'server/middleware-chunks/[name].js',
+            minChunks: 2,
+          },
         },
         maxInitialRequests: 25,
         minSize: 20000,
@@ -898,7 +922,7 @@ export default async function getBaseWebpackConfig(
           : ({
               filename: '[name].js',
               // allow to split entrypoints
-              chunks: 'all',
+              chunks: ({ name }: any) => !name?.match(MIDDLEWARE_ROUTE),
               // size of files is not so relevant for server build
               // we want to prefer deduplication to load less code
               minSize: 1000,
@@ -1001,6 +1025,7 @@ export default async function getBaseWebpackConfig(
         'next-serverless-loader',
         'next-style-loader',
         'noop-loader',
+        'next-middleware-loader',
       ].reduce((alias, loader) => {
         // using multiple aliases to replace `resolveLoader.modules`
         alias[loader] = path.join(__dirname, 'webpack', 'loaders', loader)
@@ -1046,6 +1071,11 @@ export default async function getBaseWebpackConfig(
               },
               use: defaultLoaders.babel,
             },
+            {
+              ...codeCondition,
+              issuerLayer: 'middleware',
+              use: defaultLoaders.babelMiddleware,
+            },
             {
               ...codeCondition,
               use: hasReactRefresh
@@ -1238,6 +1268,9 @@ export default async function getBaseWebpackConfig(
       isServerless && isServer && new ServerlessPlugin(),
       isServer &&
         new PagesManifestPlugin({ serverless: isLikeServerless, dev }),
+      // MiddlewarePlugin should be after DefinePlugin so  NEXT_PUBLIC_*
+      // replacement is done before its process.env.* handling
+      !isServer && new MiddlewarePlugin({ dev }),
       isServer && new NextJsSsrImportPlugin(),
       !isServer &&
         new BuildManifestPlugin({
@@ -1304,6 +1337,10 @@ export default async function getBaseWebpackConfig(
     },
   }
 
+  if (!isServer) {
+    webpack5Config.output!.enabledLibraryTypes = ['assign']
+  }
+
   if (dev) {
     // @ts-ignore unsafeCache exists
     webpack5Config.module.unsafeCache = (module) =>
@@ -1819,7 +1856,11 @@ export default async function getBaseWebpackConfig(
       delete entry['main.js']
 
       for (const name of Object.keys(entry)) {
-        entry[name] = finalizeEntrypoint(name, entry[name], isServer)
+        entry[name] = finalizeEntrypoint({
+          value: entry[name],
+          isServer,
+          name,
+        })
       }
 
       return entry