Add new target for middleware

package.json

@@ -12,6 +12,7 @@
     "dev": "lerna run dev --stream --parallel",
     "dev2": "while true; do yarn --check-files && yarn dev; done",
     "test-types": "yarn tsc",
+    "test": "yarn jest",
     "test-unit": "yarn jest test/unit/",
     "testonly": "yarn jest --runInBand",
     "testheadless": "cross-env HEADLESS=true yarn testonly",
@@ -137,9 +138,9 @@
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
     "react": "17.0.2",
-    "react-18": "npm:react@next",
+    "react-18": "npm:react@18.0.0-alpha-3c4c1c470-20211021",
     "react-dom": "17.0.2",
-    "react-dom-18": "npm:react-dom@next",
+    "react-dom-18": "npm:react-dom@18.0.0-alpha-3c4c1c470-20211021",
     "react-ssr-prepass": "1.0.8",
     "release": "6.3.0",
     "request-promise-core": "1.1.2",

packages/next/build/entries.ts

@@ -12,6 +12,8 @@ import { ClientPagesLoaderOptions } from './webpack/loaders/next-client-pages-lo
 import { ServerlessLoaderQuery } from './webpack/loaders/next-serverless-loader'
 import { LoadedEnvFiles } from '@next/env'
 import { NextConfigComplete } from '../server/config-shared'
+import { isFlightPage } from './utils'
+import { ssrEntries } from './webpack/plugins/middleware-plugin'
 import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
 
 type ObjectValue<T> = T extends { [key: string]: infer V } ? V : never
@@ -22,14 +24,23 @@ type PagesMapping = {
 export function createPagesMapping(
   pagePaths: string[],
   extensions: string[],
-  isDev: boolean
+  isDev: boolean,
+  hasServerComponents: boolean
 ): PagesMapping {
   const previousPages: PagesMapping = {}
   const pages: PagesMapping = pagePaths.reduce(
     (result: PagesMapping, pagePath): PagesMapping => {
-      let page = `${pagePath
-        .replace(new RegExp(`\\.+(${extensions.join('|')})$`), '')
-        .replace(/\\/g, '/')}`.replace(/\/index$/, '')
+      let page = pagePath.replace(
+        new RegExp(`\\.+(${extensions.join('|')})$`),
+        ''
+      )
+      if (hasServerComponents && /\.client$/.test(page)) {
+        // Assume that if there's a Client Component, that there is
+        // a matching Server Component that will map to the page.
+        return result
+      }
+
+      page = page.replace(/\\/g, '/').replace(/\/index$/, '')
 
       const pageKey = page === '' ? '/' : page
 
@@ -68,6 +79,7 @@ export function createPagesMapping(
 type Entrypoints = {
   client: webpack5.EntryObject
   server: webpack5.EntryObject
+  serverWeb: webpack5.EntryObject
 }
 
 export function createEntrypoints(
@@ -80,6 +92,7 @@ export function createEntrypoints(
 ): Entrypoints {
   const client: webpack5.EntryObject = {}
   const server: webpack5.EntryObject = {}
+  const serverWeb: webpack5.EntryObject = {}
 
   const hasRuntimeConfig =
     Object.keys(config.publicRuntimeConfig).length > 0 ||
@@ -120,6 +133,8 @@ export function createEntrypoints(
     const serverBundlePath = posix.join('pages', bundleFile)
 
     const isLikeServerless = isTargetLikeServerless(target)
+    const isFlight = isFlightPage(config, absolutePagePath)
+    const webServerRuntime = !!config.experimental.concurrentFeatures
 
     if (page.match(MIDDLEWARE_ROUTE)) {
       const loaderOpts: MiddlewareLoaderOptions = {
@@ -133,6 +148,31 @@ export function createEntrypoints(
       return
     }
 
+    if (
+      webServerRuntime &&
+      !(page === '/_app' || page === '/_error' || page === '/_document') &&
+      !isApiRoute
+    ) {
+      ssrEntries.set(clientBundlePath, { requireFlightManifest: isFlight })
+      serverWeb[serverBundlePath] = {
+        filename: '[name].js',
+        import: `middleware-ssr-loader?${stringify({
+          page,
+          absolutePagePath,
+          isServerComponent: isFlight,
+          buildId,
+          basePath: config.basePath,
+          assetPrefix: config.assetPrefix,
+        } as any)}!`,
+
+        layer: 'server-web',
+        library: {
+          type: 'assign',
+          name: ['_ENTRIES', `middleware_[name]`],
+        },
+      }
+    }
+
     if (isApiRoute && isLikeServerless) {
       const serverlessLoaderOptions: ServerlessLoaderQuery = {
         page,
@@ -143,8 +183,20 @@ export function createEntrypoints(
         serverlessLoaderOptions
       )}!`
     } else if (isApiRoute || target === 'server') {
-      server[serverBundlePath] = [absolutePagePath]
-    } else if (isLikeServerless && page !== '/_app' && page !== '/_document') {
+      if (
+        !webServerRuntime ||
+        page === '/_document' ||
+        page === '/_app' ||
+        page === '/_error'
+      ) {
+        server[serverBundlePath] = [absolutePagePath]
+      }
+    } else if (
+      isLikeServerless &&
+      page !== '/_app' &&
+      page !== '/_document' &&
+      !webServerRuntime
+    ) {
       const serverlessLoaderOptions: ServerlessLoaderQuery = {
         page,
         absolutePagePath,
@@ -182,6 +234,7 @@ export function createEntrypoints(
   return {
     client,
     server,
+    serverWeb,
   }
 }
 
@@ -209,7 +262,10 @@ export function finalizeEntrypoint({
     }
   }
 
-  if (name.match(MIDDLEWARE_ROUTE)) {
+  const loaderValue = value as string
+  const hasMiddleware =
+    loaderValue.includes && loaderValue.includes('next-middleware-loader')
+  if (!!hasMiddleware) {
     return {
       filename: 'server/[name].js',
       layer: 'middleware',
@@ -225,7 +281,8 @@ export function finalizeEntrypoint({
     name !== 'polyfills' &&
     name !== 'main' &&
     name !== 'amp' &&
-    name !== 'react-refresh'
+    name !== 'react-refresh' &&
+    !hasMiddleware
   ) {
     return {
       dependOn:

packages/next/build/index.ts

@@ -42,6 +42,7 @@ import {
   PAGES_MANIFEST,
   PHASE_PRODUCTION_BUILD,
   PRERENDER_MANIFEST,
+  MIDDLEWARE_FLIGHT_MANIFEST,
   REACT_LOADABLE_MANIFEST,
   ROUTES_MANIFEST,
   SERVERLESS_DIRECTORY,
@@ -141,10 +142,15 @@ export default async function build(
     const config: NextConfigComplete = await nextBuildSpan
       .traceChild('load-next-config')
       .traceAsyncFn(() => loadConfig(PHASE_PRODUCTION_BUILD, dir, conf))
+
     const distDir = path.join(dir, config.distDir)
     setGlobal('phase', PHASE_PRODUCTION_BUILD)
     setGlobal('distDir', distDir)
 
+    const webServerRuntime = !!config.experimental.concurrentFeatures
+    const hasServerComponents =
+      webServerRuntime && !!config.experimental.serverComponents
+
     const { target } = config
     const buildId: string = await nextBuildSpan
       .traceChild('generate-buildid')
@@ -256,7 +262,6 @@ export default async function build(
     const pagePaths: string[] = await nextBuildSpan
       .traceChild('collect-pages')
       .traceAsyncFn(() => collectPages(pagesDir, config.pageExtensions))
-
     // needed for static exporting since we want to replace with HTML
     // files
     const allStaticPages = new Set<string>()
@@ -271,8 +276,14 @@ export default async function build(
     const mappedPages = nextBuildSpan
       .traceChild('create-pages-mapping')
       .traceFn(() =>
-        createPagesMapping(pagePaths, config.pageExtensions, false)
+        createPagesMapping(
+          pagePaths,
+          config.pageExtensions,
+          false,
+          hasServerComponents
+        )
       )
+
     const entrypoints = nextBuildSpan
       .traceChild('create-entrypoints')
       .traceFn(() =>
@@ -538,6 +549,10 @@ export default async function build(
           path.relative(distDir, manifestPath),
           BUILD_MANIFEST,
           PRERENDER_MANIFEST,
+          config.experimental.concurrentFeatures &&
+          config.experimental.serverComponents
+            ? path.join(SERVER_DIRECTORY, MIDDLEWARE_FLIGHT_MANIFEST + '.js')
+            : null,
           REACT_LOADABLE_MANIFEST,
           config.optimizeFonts
             ? path.join(
@@ -579,6 +594,20 @@ export default async function build(
             rewrites,
             runWebpackSpan,
           }),
+          webServerRuntime
+            ? getBaseWebpackConfig(dir, {
+                buildId,
+                reactProductionProfiling,
+                isServer: true,
+                webServerRuntime: true,
+                config,
+                target,
+                pagesDir,
+                entrypoints: entrypoints.serverWeb,
+                rewrites,
+                runWebpackSpan,
+              })
+            : null,
         ])
       )
 
@@ -608,10 +637,17 @@ export default async function build(
           errors: [...clientResult.errors],
         }
       } else {
-        const serverResult = await runCompiler(configs[1], { runWebpackSpan })
+        const [serverResult, serverWebResult] = await Promise.all([
+          runCompiler(configs[1], { runWebpackSpan }),
+          configs[2] && runCompiler(configs[2], { runWebpackSpan }),
+        ])
         result = {
-          warnings: [...clientResult.warnings, ...serverResult.warnings],
-          errors: [...clientResult.errors, ...serverResult.errors],
+          warnings: [...clientResult.warnings, ...serverResult.warnings].concat(
+            serverWebResult?.warnings || []
+          ),
+          errors: [...clientResult.errors, ...serverResult.errors].concat(
+            serverWebResult?.errors || []
+          ),
         }
       }
     })
@@ -839,6 +875,7 @@ export default async function build(
         distDir,
         config.experimental.gzipSize
       )
+
       await Promise.all(
         pageKeys.map(async (page) => {
           const checkPageSpan = staticCheckSpan.traceChild('check-page', {
@@ -858,8 +895,13 @@ export default async function build(
             let isStatic = false
             let isHybridAmp = false
             let ssgPageRoutes: string[] | null = null
+            let isMiddlewareRoute = !!page.match(MIDDLEWARE_ROUTE)
 
-            if (!page.match(MIDDLEWARE_ROUTE) && !page.match(RESERVED_PAGE)) {
+            if (
+              !isMiddlewareRoute &&
+              !page.match(RESERVED_PAGE) &&
+              !webServerRuntime
+            ) {
               try {
                 let isPageStaticSpan =
                   checkPageSpan.traceChild('is-page-static')
@@ -923,6 +965,7 @@ export default async function build(
                   serverPropsPages.add(page)
                 } else if (
                   workerResult.isStatic &&
+                  !workerResult.hasFlightData &&
                   (await customAppGetInitialPropsPromise) === false
                 ) {
                   staticPages.add(page)
@@ -966,6 +1009,10 @@ export default async function build(
               totalSize: allSize,
               static: isStatic,
               isSsg,
+              isWebSsr:
+                webServerRuntime &&
+                !isMiddlewareRoute &&
+                !page.match(RESERVED_PAGE),
               isHybridAmp,
               ssgPageRoutes,
               initialRevalidateSeconds: false,
@@ -1220,11 +1267,11 @@ export default async function build(
           const routeRegex = getRouteRegex(dataRoute.replace(/\.json$/, ''))
 
           dataRouteRegex = normalizeRouteRegex(
-            routeRegex.re.source.replace(/\(\?:\\\/\)\?\$$/, '\\.json$')
+            routeRegex.re.source.replace(/\(\?:\\\/\)\?\$$/, `\\.json$`)
           )
           namedDataRouteRegex = routeRegex.namedRegex!.replace(
             /\(\?:\/\)\?\$$/,
-            '\\.json$'
+            `\\.json$`
           )
           routeKeys = routeRegex.routeKeys
         } else {
@@ -1310,6 +1357,7 @@ export default async function build(
       (page) =>
         mappedPages[page] && mappedPages[page].startsWith('private-next-pages')
     )
+
     usedStaticStatusPages.forEach((page) => {
       if (!ssgPages.has(page) && !customAppGetInitialProps) {
         staticPages.add(page)