Merge branch 'canary' into optimize-module-selector-bundling

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "14.1.1-canary.77"
+  "version": "14.1.1-canary.78"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "description": "ESLint configuration used by Next.js.",
   "main": "index.js",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config",
   "dependencies": {
-    "@next/eslint-plugin-next": "14.1.1-canary.77",
+    "@next/eslint-plugin-next": "14.1.1-canary.78",
     "@rushstack/eslint-patch": "^1.3.3",
     "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.1",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "description": "ESLint plugin for Next.js.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "private": true,
   "scripts": {
     "clean": "node ../../scripts/rm.mjs native",

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -92,7 +92,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "14.1.1-canary.77",
+    "@next/env": "14.1.1-canary.78",
     "@swc/helpers": "0.5.5",
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001579",
@@ -145,10 +145,10 @@
     "@jest/types": "29.5.0",
     "@mswjs/interceptors": "0.23.0",
     "@napi-rs/triples": "1.2.0",
-    "@next/polyfill-module": "14.1.1-canary.77",
-    "@next/polyfill-nomodule": "14.1.1-canary.77",
-    "@next/react-refresh-utils": "14.1.1-canary.77",
-    "@next/swc": "14.1.1-canary.77",
+    "@next/polyfill-module": "14.1.1-canary.78",
+    "@next/polyfill-nomodule": "14.1.1-canary.78",
+    "@next/react-refresh-utils": "14.1.1-canary.78",
+    "@next/swc": "14.1.1-canary.78",
     "@opentelemetry/api": "1.6.0",
     "@playwright/test": "1.41.2",
     "@taskr/clear": "1.1.0",

packages/next/src/build/webpack-config.ts

@@ -500,6 +500,15 @@ export default async function getBaseWebpackConfig(
       ].filter(Boolean)
     : []
 
+  const instrumentLayerLoaders = [
+    // When using Babel, we will have to add the SWC loader
+    // as an additional pass to handle RSC correctly.
+    // This will cause some performance overhead but
+    // acceptable as Babel will not be recommended.
+    swcServerLayerLoader,
+    babelLoader,
+  ].filter(Boolean)
+
   const middlewareLayerLoaders = [
     // When using Babel, we will have to use SWC to do the optimization
     // for middleware to tree shake the unused default optimized imports like "next/server".
@@ -1478,7 +1487,7 @@ export default async function getBaseWebpackConfig(
             {
               test: codeCondition.test,
               issuerLayer: WEBPACK_LAYERS.instrument,
-              use: appServerLayerLoaders,
+              use: instrumentLayerLoaders,
             },
             ...(hasAppDir
               ? [

packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts

@@ -211,8 +211,11 @@ export async function GET(_, ctx) {
           throw new Error('id property is required for every item returned from generateSitemaps')
         }
       }
-
-      return item.id.toString() === targetId
+      let itemID = item.id.toString()
+      if(process.env.NODE_ENV === 'production') {
+        itemID += '.xml'
+      }
+      return itemID === targetId
     })?.id
     if (id == null) {
       return new NextResponse('Not Found', {

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -8,6 +8,7 @@
 import path from 'path'
 import { webpack, sources } from 'next/dist/compiled/webpack/webpack'
 import {
+  APP_CLIENT_INTERNALS,
   BARREL_OPTIMIZATION_PREFIX,
   CLIENT_REFERENCE_MANIFEST,
   SYSTEM_ENTRYPOINTS,
@@ -20,6 +21,7 @@ import { normalizePagePath } from '../../../shared/lib/page-path/normalize-page-
 import { CLIENT_STATIC_FILES_RUNTIME_MAIN_APP } from '../../../shared/lib/constants'
 import { getDeploymentIdQueryOrEmptyString } from '../../deployment-id'
 import { formatBarrelOptimizedResource } from '../utils'
+import type { ChunkGroup } from 'webpack'
 
 interface Options {
   dev: boolean
@@ -243,9 +245,16 @@ export class ClientReferenceManifestPlugin {
         }
       })
 
-    compilation.chunkGroups.forEach((chunkGroup) => {
-      // By default it's the shared chunkGroup (main-app) for every page.
-      let entryName = ''
+    for (let [entryName, entrypoint] of compilation.entrypoints) {
+      if (
+        entryName === CLIENT_STATIC_FILES_RUNTIME_MAIN_APP ||
+        entryName === APP_CLIENT_INTERNALS
+      ) {
+        entryName = ''
+      } else if (!/^app[\\/]/.test(entryName)) {
+        continue
+      }
+
       const manifest: ClientReferenceManifest = {
         moduleLoading: {
           prefix,
@@ -257,28 +266,17 @@ export class ClientReferenceManifestPlugin {
         entryCSSFiles: {},
       }
 
-      if (chunkGroup.name && /^app[\\/]/.test(chunkGroup.name)) {
-        // Absolute path without the extension
-        const chunkEntryName = (this.appDirBase + chunkGroup.name).replace(
-          /[\\/]/g,
-          path.sep
-        )
-        manifest.entryCSSFiles[chunkEntryName] = chunkGroup
-          .getFiles()
-          .filter(
-            (f) => !f.startsWith('static/css/pages/') && f.endsWith('.css')
-          )
-
-        entryName = chunkGroup.name
-      }
+      // Absolute path without the extension
+      const chunkEntryName = (this.appDirBase + entryName).replace(
+        /[\\/]/g,
+        path.sep
+      )
+      manifest.entryCSSFiles[chunkEntryName] = entrypoint
+        .getFiles()
+        .filter((f) => !f.startsWith('static/css/pages/') && f.endsWith('.css'))
 
-      const requiredChunks = getAppPathRequiredChunks(chunkGroup, rootMainFiles)
+      const requiredChunks = getAppPathRequiredChunks(entrypoint, rootMainFiles)
       const recordModule = (id: ModuleId, mod: webpack.NormalModule) => {
-        // Skip all modules from the pages folder.
-        if (mod.layer !== WEBPACK_LAYERS.appPagesBrowser) {
-          return
-        }
-
         let resource =
           mod.type === 'css/mini-extract'
             ? // @ts-expect-error TODO: use `identifier()` instead.
@@ -382,57 +380,74 @@ export class ClientReferenceManifestPlugin {
         manifest.edgeSSRModuleMapping = edgeModuleIdMapping
       }
 
-      // Only apply following logic to client module requests from client entry,
-      // or if the module is marked as client module. That's because other
-      // client modules don't need to be in the manifest at all as they're
-      // never be referenced by the server/client boundary.
-      // This saves a lot of bytes in the manifest.
-      chunkGroup.chunks.forEach((chunk: webpack.Chunk) => {
-        const entryMods =
-          compilation.chunkGraph.getChunkEntryModulesIterable(chunk)
-        for (const mod of entryMods) {
-          if (mod.layer !== WEBPACK_LAYERS.appPagesBrowser) continue
-
-          const request = (mod as webpack.NormalModule).request
-
-          if (
-            !request ||
-            !request.includes('next-flight-client-entry-loader.js?')
-          ) {
-            continue
-          }
+      const checkedChunkGroups = new Set()
+      const checkedChunks = new Set()
+
+      function recordChunkGroup(chunkGroup: ChunkGroup) {
+        // Ensure recursion is stopped if we've already checked this chunk group.
+        if (checkedChunkGroups.has(chunkGroup)) return
+        checkedChunkGroups.add(chunkGroup)
+        // Only apply following logic to client module requests from client entry,
+        // or if the module is marked as client module. That's because other
+        // client modules don't need to be in the manifest at all as they're
+        // never be referenced by the server/client boundary.
+        // This saves a lot of bytes in the manifest.
+        chunkGroup.chunks.forEach((chunk: webpack.Chunk) => {
+          // Ensure recursion is stopped if we've already checked this chunk.
+          if (checkedChunks.has(chunk)) return
+          checkedChunks.add(chunk)
+          const entryMods =
+            compilation.chunkGraph.getChunkEntryModulesIterable(chunk)
+          for (const mod of entryMods) {
+            if (mod.layer !== WEBPACK_LAYERS.appPagesBrowser) continue
+
+            const request = (mod as webpack.NormalModule).request
+
+            if (
+              !request ||
+              !request.includes('next-flight-client-entry-loader.js?')
+            ) {
+              continue
+            }
 
-          const connections =
-            compilation.moduleGraph.getOutgoingConnections(mod)
-
-          for (const connection of connections) {
-            const dependency = connection.dependency
-            if (!dependency) continue
-
-            const clientEntryMod = compilation.moduleGraph.getResolvedModule(
-              dependency
-            ) as webpack.NormalModule
-            const modId = compilation.chunkGraph.getModuleId(clientEntryMod) as
-              | string
-              | number
-              | null
-
-            if (modId !== null) {
-              recordModule(modId, clientEntryMod)
-            } else {
-              // If this is a concatenation, register each child to the parent ID.
-              if (
-                connection.module?.constructor.name === 'ConcatenatedModule'
-              ) {
-                const concatenatedMod = connection.module
-                const concatenatedModId =
-                  compilation.chunkGraph.getModuleId(concatenatedMod)
-                recordModule(concatenatedModId, clientEntryMod)
+            const connections =
+              compilation.moduleGraph.getOutgoingConnections(mod)
+
+            for (const connection of connections) {
+              const dependency = connection.dependency
+              if (!dependency) continue
+
+              const clientEntryMod = compilation.moduleGraph.getResolvedModule(
+                dependency
+              ) as webpack.NormalModule
+              const modId = compilation.chunkGraph.getModuleId(
+                clientEntryMod
+              ) as string | number | null
+
+              if (modId !== null) {
+                recordModule(modId, clientEntryMod)
+              } else {
+                // If this is a concatenation, register each child to the parent ID.
+                if (
+                  connection.module?.constructor.name === 'ConcatenatedModule'
+                ) {
+                  const concatenatedMod = connection.module
+                  const concatenatedModId =
+                    compilation.chunkGraph.getModuleId(concatenatedMod)
+                  recordModule(concatenatedModId, clientEntryMod)
+                }
               }
             }
           }
+        })
+
+        // Walk through all children chunk groups too.
+        for (const child of chunkGroup.childrenIterable) {
+          recordChunkGroup(child)
         }
-      })
+      }
+
+      recordChunkGroup(entrypoint)
 
       // A page's entry name can have extensions. For example, these are both valid:
       // - app/foo/page
@@ -453,7 +468,7 @@ export class ClientReferenceManifestPlugin {
         manifestsPerGroup.set(groupName, [])
       }
       manifestsPerGroup.get(groupName)!.push(manifest)
-    })
+    }
 
     // Generate per-page manifests.
     for (const pageName of manifestEntryFiles) {

packages/react-refresh-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "14.1.1-canary.77",
+  "version": "14.1.1-canary.78",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",