Merge branch 'canary' into relax-img-loader-warning-for-width

contributing.md

@@ -15,8 +15,7 @@ To develop locally:
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your
    own GitHub account and then
-   [clone](https://help.github.com/articles/cloning-a-repository/) it to your
-   local device.
+   [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 2. Create a new branch:
    ```
    git checkout -b MY_BRANCH_NAME
@@ -127,7 +126,7 @@ EXAMPLE=./test/integration/basic
 
 There are two options to develop with your local version of the codebase:
 
-### Set as local dependency in package.json
+### Set as a local dependency in package.json
 
 1. In your app's `package.json`, replace:
 
@@ -175,15 +174,15 @@ or
 
 This will use the version of `next` built inside of the Next.js monorepo and the
 main `yarn dev` monorepo command can be running to make changes to the local
-Next.js version at the same time (some changes might require re-running `yarn next-with-deps` to take affect).
+Next.js version at the same time (some changes might require re-running `yarn next-with-deps` to take effect).
 
 ## Adding warning/error descriptions
 
 In Next.js we have a system to add helpful links to warnings and errors.
 
 This allows for the logged message to be short while giving a broader description and instructions on how to solve the warning/error.
 
-In general all warnings and errors added should have these links attached.
+In general, all warnings and errors added should have these links attached.
 
 Below are the steps to add a new link:
 

errors/failed-loading-swc.md

@@ -8,6 +8,8 @@ SWC requires a binary be downloaded that is compatible specific to your system.
 
 #### Possible Ways to Fix It
 
+You might need to allow optional packages to be installed by your package manager (remove `--no-optional` flag) for the package to download correctly.
+
 If SWC continues to fail to load you can opt-out by disabling `swcMinify` in your `next.config.js` or by adding a `.babelrc` to your project with the following content:
 
 ```json

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.0.2-canary.5"
+  "version": "12.0.2-canary.6"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.0.2-canary.5",
+    "@next/eslint-plugin-next": "12.0.2-canary.6",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "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": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "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": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/index.ts

@@ -147,9 +147,9 @@ export default async function build(
     setGlobal('phase', PHASE_PRODUCTION_BUILD)
     setGlobal('distDir', distDir)
 
-    const webServerRuntime = !!config.experimental.concurrentFeatures
+    const hasConcurrentFeatures = !!config.experimental.concurrentFeatures
     const hasServerComponents =
-      webServerRuntime && !!config.experimental.serverComponents
+      hasConcurrentFeatures && !!config.experimental.serverComponents
 
     const { target } = config
     const buildId: string = await nextBuildSpan
@@ -593,7 +593,7 @@ export default async function build(
             rewrites,
             runWebpackSpan,
           }),
-          webServerRuntime
+          hasConcurrentFeatures
             ? getBaseWebpackConfig(dir, {
                 buildId,
                 reactProductionProfiling,
@@ -904,7 +904,7 @@ export default async function build(
             if (
               !isMiddlewareRoute &&
               !page.match(RESERVED_PAGE) &&
-              !webServerRuntime
+              !hasConcurrentFeatures
             ) {
               try {
                 let isPageStaticSpan =
@@ -1014,7 +1014,7 @@ export default async function build(
               static: isStatic,
               isSsg,
               isWebSsr:
-                webServerRuntime &&
+                hasConcurrentFeatures &&
                 !isMiddlewareRoute &&
                 !page.match(RESERVED_PAGE),
               isHybridAmp,

packages/next/build/webpack-config.ts

@@ -1412,7 +1412,7 @@ export default async function getBaseWebpackConfig(
         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, hasServerComponents }),
+      !isServer && new MiddlewarePlugin({ dev }),
       isServer && new NextJsSsrImportPlugin(),
       !isServer &&
         new BuildManifestPlugin({

packages/next/build/webpack/loaders/next-flight-client-loader.ts

@@ -149,7 +149,7 @@ export default async function transformSource(
     this.loadModule
   )
 
-  // next.js/packages/next/link.js
+  // next.js/packages/next/<component>.js
   if (/[\\/]next[\\/](link|image)\.js$/.test(url)) {
     names.push('default')
   }

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

@@ -33,17 +33,9 @@ export interface MiddlewareManifest {
 
 export default class MiddlewarePlugin {
   dev: boolean
-  hasServerComponents?: boolean
-
-  constructor({
-    dev,
-    hasServerComponents,
-  }: {
-    dev: boolean
-    hasServerComponents?: boolean
-  }) {
+
+  constructor({ dev }: { dev: boolean }) {
     this.dev = dev
-    this.hasServerComponents = hasServerComponents
   }
 
   createAssets(

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

@@ -299,16 +299,7 @@ export class TerserPlugin {
     const pluginName = this.constructor.name
     const availableNumberOfCores = this.options.parallel
 
-    compiler.hooks.compilation.tap(pluginName, (compilation) => {
-      // Don't run minifier against mini-css-extract-plugin
-      if (
-        compilation.name !== 'client' &&
-        compilation.name !== 'server' &&
-        compilation.name !== 'server-web'
-      ) {
-        return
-      }
-
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
       const cache = compilation.getCache('TerserWebpackPlugin')
 
       const handleHashForChunk = (hash, chunk) => {

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.0.2-canary.5",
+  "version": "12.0.2-canary.6",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -67,10 +67,10 @@
   "dependencies": {
     "@babel/runtime": "7.15.4",
     "@hapi/accept": "5.0.2",
-    "@next/env": "12.0.2-canary.5",
-    "@next/polyfill-module": "12.0.2-canary.5",
-    "@next/react-dev-overlay": "12.0.2-canary.5",
-    "@next/react-refresh-utils": "12.0.2-canary.5",
+    "@next/env": "12.0.2-canary.6",
+    "@next/polyfill-module": "12.0.2-canary.6",
+    "@next/react-dev-overlay": "12.0.2-canary.6",
+    "@next/react-refresh-utils": "12.0.2-canary.6",
     "@node-rs/helper": "1.2.1",
     "acorn": "8.5.0",
     "assert": "2.0.0",
@@ -154,7 +154,7 @@
     "@babel/traverse": "7.15.0",
     "@babel/types": "7.15.0",
     "@napi-rs/cli": "1.1.0",
-    "@next/polyfill-nomodule": "12.0.2-canary.5",
+    "@next/polyfill-nomodule": "12.0.2-canary.6",
     "@peculiar/webcrypto": "1.1.7",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",

packages/next/server/next-server.ts

@@ -108,6 +108,7 @@ import type { FetchEventResult } from './web/types'
 import type { MiddlewareManifest } from '../build/webpack/plugins/middleware-plugin'
 import type { ParsedNextUrl } from '../shared/lib/router/utils/parse-next-url'
 import type { ParsedUrl } from '../shared/lib/router/utils/parse-url'
+import { toNodeHeaders } from './web/utils'
 
 const getCustomRouteMatcher = pathMatch(true)
 
@@ -1168,13 +1169,11 @@ export default class Server {
 
           result.response.headers.delete('x-middleware-next')
 
-          for (const [key, value] of result.response.headers.entries()) {
-            if (key !== 'content-encoding') {
-              if (key.toLowerCase() === 'set-cookie') {
-                res.setHeader(key, value.split(', '))
-              } else {
-                res.setHeader(key, value)
-              }
+          for (const [key, value] of Object.entries(
+            toNodeHeaders(result.response.headers)
+          )) {
+            if (key !== 'content-encoding' && value !== undefined) {
+              res.setHeader(key, value)
             }
           }
 

packages/next/server/render.tsx

@@ -1193,25 +1193,20 @@ export async function renderToHTML(
                 )
               }
             : null,
-          renderOpts.optimizeCss
+          !process.browser && renderOpts.optimizeCss
             ? async (html: string) => {
-                if (process.browser) {
-                  // Have to disable critters under the web environment.
-                  return html
-                } else {
-                  // eslint-disable-next-line import/no-extraneous-dependencies
-                  const Critters = require('critters')
-                  const cssOptimizer = new Critters({
-                    ssrMode: true,
-                    reduceInlineStyles: false,
-                    path: renderOpts.distDir,
-                    publicPath: `${renderOpts.assetPrefix}/_next/`,
-                    preload: 'media',
-                    fonts: false,
-                    ...renderOpts.optimizeCss,
-                  })
-                  return await cssOptimizer.process(html)
-                }
+                // eslint-disable-next-line import/no-extraneous-dependencies
+                const Critters = require('critters')
+                const cssOptimizer = new Critters({
+                  ssrMode: true,
+                  reduceInlineStyles: false,
+                  path: renderOpts.distDir,
+                  publicPath: `${renderOpts.assetPrefix}/_next/`,
+                  preload: 'media',
+                  fonts: false,
+                  ...renderOpts.optimizeCss,
+                })
+                return await cssOptimizer.process(html)
               }
             : null,
           inAmpMode || hybridAmp