Merge branch 'canary' into fix-33043

docs/advanced-features/src-directory.md

@@ -11,7 +11,7 @@ The `src` directory is very common in many apps and Next.js supports it by defau
 ## Caveats
 
 - `src/pages` will be ignored if `pages` is present in the root directory
-- Config files like `next.config.js` and `tsconfig.json` should be inside the root directory, moving them to `src` won't work. Same goes for the [`public` directory](/docs/basic-features/static-file-serving.md)
+- Config files like `next.config.js` and `tsconfig.json`, as well as environment variables, should be inside the root directory, moving them to `src` won't work. Same goes for the [`public` directory](/docs/basic-features/static-file-serving.md)
 
 ## Related
 

docs/basic-features/environment-variables.md

@@ -76,6 +76,8 @@ export async function getStaticProps() {
 > CORRECT=pre\$A
 > ```
 
+> **Note**: If you are using a `/src` folder, please note that Next.js will load the .env files **only** from the parent folder and **not** from the `/src` folder.
+
 ## Exposing Environment Variables to the Browser
 
 By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.

packages/next/build/entries.ts

@@ -15,7 +15,10 @@ import { NextConfigComplete } from '../server/config-shared'
 import { isCustomErrorPage, isFlightPage, isReservedPage } from './utils'
 import { ssrEntries } from './webpack/plugins/middleware-plugin'
 import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
-import { MIDDLEWARE_SSR_RUNTIME_WEBPACK } from '../shared/lib/constants'
+import {
+ MIDDLEWARE_RUNTIME_WEBPACK,
+ MIDDLEWARE_SSR_RUNTIME_WEBPACK,
+} from '../shared/lib/constants'
 
 type ObjectValue<T> = T extends { [key: string]: infer V } ? V : never
 export type PagesMapping = {
@@ -291,6 +294,8 @@ export function finalizeEntrypoint({
  name: ['_ENTRIES', `middleware_[name]`],
  type: 'assign',
  },
+ runtime: MIDDLEWARE_RUNTIME_WEBPACK,
+ asyncChunks: false,
  ...entry,
  }
  return middlewareEntry

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

@@ -6,6 +6,7 @@ import {
  MIDDLEWARE_FLIGHT_MANIFEST,
  MIDDLEWARE_BUILD_MANIFEST,
  MIDDLEWARE_REACT_LOADABLE_MANIFEST,
+ MIDDLEWARE_RUNTIME_WEBPACK,
 } from '../../../shared/lib/constants'
 import { MIDDLEWARE_ROUTE } from '../../../lib/constants'
 import { nonNullable } from '../../../lib/non-nullable'
@@ -89,13 +90,7 @@ export default class MiddlewarePlugin {
  `server/${MIDDLEWARE_REACT_LOADABLE_MANIFEST}.js`,
  ...entryFiles.map((file) => 'server/' + file),
  ].filter(nonNullable)
- : entryFiles.map((file: string) =>
- // we need to use the unminified version of the webpack runtime,
- // remove if we do start minifying middleware chunks
- file.startsWith('static/chunks/webpack-')
- ? file.replace('webpack-', 'webpack-middleware-')
- : file
- )
+ : entryFiles.map((file: string) => file)
 
  middlewareManifest.middleware[location] = {
  env: envPerRoute.get(entrypoint.name) || [],
@@ -130,6 +125,15 @@ export default class MiddlewarePlugin {
  compiler.hooks.compilation.tap(
  PLUGIN_NAME,
  (compilation, { normalModuleFactory }) => {
+ compilation.hooks.afterChunks.tap(PLUGIN_NAME, () => {
+ const middlewareRuntimeChunk = compilation.namedChunks.get(
+ MIDDLEWARE_RUNTIME_WEBPACK
+ )
+ if (middlewareRuntimeChunk) {
+ middlewareRuntimeChunk.filenameTemplate = 'server/[name].js'
+ }
+ })
+
  const envPerRoute = new Map<string, string[]>()
 
  compilation.hooks.afterOptimizeModules.tap(PLUGIN_NAME, () => {

packages/next/build/webpack/plugins/terser-webpack-plugin/src/index.js

@@ -75,8 +75,6 @@ export class TerserPlugin {
  terserSpan.setAttribute('compilationName', compilation.name)
 
  return terserSpan.traceAsyncFn(async () => {
- let webpackAsset = ''
- let hasMiddleware = false
  let numberOfAssetsForMinify = 0
  const assetsList = Object.keys(assets)
 
@@ -99,15 +97,14 @@ export class TerserPlugin {
  return false
  }
 
- // remove below if we start minifying middleware chunks
- if (name.startsWith('static/chunks/webpack-')) {
- webpackAsset = name
- }
-
  // don't minify _middleware as it can break in some cases
  // and doesn't provide too much of a benefit as it's server-side
- if (name.match(/(middleware-chunks|_middleware\.js$)/)) {
- hasMiddleware = true
+ if (
+ name.match(
+ /(middleware-runtime\.js|middleware-chunks|_middleware\.js$)/
+ )
+ ) {
+ return false
  }
 
  const { info } = res
@@ -145,17 +142,6 @@ export class TerserPlugin {
  })
  )
 
- if (hasMiddleware && webpackAsset) {
- // emit a separate version of the webpack
- // runtime for the middleware
- const asset = compilation.getAsset(webpackAsset)
- compilation.emitAsset(
- webpackAsset.replace('webpack-', 'webpack-middleware-'),
- asset.source,
- {}
- )
- }
-
  const numberOfWorkers = Math.min(
  numberOfAssetsForMinify,
  optimizeOptions.availableNumberOfCores

packages/next/shared/lib/constants.ts

@@ -46,6 +46,7 @@ export const CLIENT_STATIC_FILES_RUNTIME_WEBPACK = `webpack`
 export const CLIENT_STATIC_FILES_RUNTIME_POLYFILLS_SYMBOL = Symbol(`polyfills`)
 // server/middleware-flight-runtime.js
 export const MIDDLEWARE_SSR_RUNTIME_WEBPACK = 'middleware-ssr-runtime'
+export const MIDDLEWARE_RUNTIME_WEBPACK = 'middleware-runtime'
 export const TEMPORARY_REDIRECT_STATUS = 307
 export const PERMANENT_REDIRECT_STATUS = 308
 export const STATIC_PROPS_ID = '__N_SSG'

test/integration/middleware/core/test/index.test.js

@@ -93,16 +93,12 @@ describe('Middleware base tests', () => {
  )
  for (const key of Object.keys(manifest.middleware)) {
  const middleware = manifest.middleware[key]
- expect(
- middleware.files.some((file) => file.includes('webpack-middleware'))
- ).toBe(true)
- expect(
- middleware.files.filter(
- (file) =>
- file.startsWith('static/chunks/') &&
- !file.startsWith('static/chunks/webpack-middleware')
- ).length
- ).toBe(0)
+ expect(middleware.files).toContainEqual(
+ expect.stringContaining('middleware-runtime')
+ )
+ expect(middleware.files).not.toContainEqual(
+ expect.stringContaining('static/chunks/')
+ )
  }
  })
  })

test/production/required-server-files.test.ts

@@ -108,10 +108,10 @@ describe('should set-up next', () => {
  })
 
  it('should output middleware correctly', async () => {
- // the middleware-runtime is located in .next/static/chunks so ensure
- // the folder is present
  expect(
- await fs.pathExists(join(next.testDir, 'standalone/.next/static/chunks'))
+ await fs.pathExists(
+ join(next.testDir, 'standalone/.next/server/middleware-runtime.js')
+ )
  ).toBe(true)
  expect(
  await fs.pathExists(