From ce4f1e889e14f948d42eed1027c98f6209dd64bb Mon Sep 17 00:00:00 2001
From: Houssein Djirdeh <houssein@google.com>
Date: Fri, 18 Jun 2021 06:17:53 -0700
Subject: [PATCH 1/6] [ESLint] Adds `--quiet` flag, TypeScript resolver and bug
 fixes (#26280)

---
 packages/eslint-config-next/index.js          |  3 +++
 packages/eslint-config-next/package.json      |  1 +
 .../lib/rules/link-passhref.js                |  4 +---
 packages/next/cli/next-lint.ts                | 12 ++++++----
 packages/next/lib/eslint/runLintCheck.ts      | 13 +++++++----
 .../eslint/custom-config/.eslintrc            |  2 +-
 .../eslint/custom-config/pages/index.js       |  1 +
 test/integration/eslint/test/index.test.js    | 23 ++++++++++++++++++-
 yarn.lock                                     | 11 +++++++++
 9 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/packages/eslint-config-next/index.js b/packages/eslint-config-next/index.js
index 2d8c7a9902e4e..7b8bfbb2f615b 100644
--- a/packages/eslint-config-next/index.js
+++ b/packages/eslint-config-next/index.js
@@ -58,6 +58,9 @@ module.exports = {
       [require.resolve('eslint-import-resolver-node')]: {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
+      [require.resolve('eslint-import-resolver-typescript')]: {
+        alwaysTryTypes: true,
+      },
     },
   },
 }
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 39bbba5c98133..5fa19e75c2e04 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -13,6 +13,7 @@
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.23.1",
diff --git a/packages/eslint-plugin-next/lib/rules/link-passhref.js b/packages/eslint-plugin-next/lib/rules/link-passhref.js
index cfde6bdc943e3..fc78090a8e3d6 100644
--- a/packages/eslint-plugin-next/lib/rules/link-passhref.js
+++ b/packages/eslint-plugin-next/lib/rules/link-passhref.js
@@ -44,9 +44,7 @@ module.exports = {
 
         const hasAnchorChild = children.some(
           (attr) =>
-            attr.type === 'JSXElement' &&
-            attr.openingElement.name.name === 'a' &&
-            attr.closingElement.name.name === 'a'
+            attr.type === 'JSXElement' && attr.openingElement.name.name === 'a'
         )
 
         if (!hasAnchorChild && !hasPassHref) {
diff --git a/packages/next/cli/next-lint.ts b/packages/next/cli/next-lint.ts
index 04993ca8def78..b4e9d38343803 100755
--- a/packages/next/cli/next-lint.ts
+++ b/packages/next/cli/next-lint.ts
@@ -28,7 +28,6 @@ const eslintOptions = (args: arg.Spec) => ({
     args['--report-unused-disable-directives'] || null,
   cache: args['--cache'] ?? false,
   cacheLocation: args['--cache-location'] || '.eslintcache',
-  cacheStrategy: args['--cache-strategy'] || 'metadata',
   errorOnUnmatchedPattern: !Boolean(args['--no-error-on-unmatched-pattern']),
 })
 
@@ -55,11 +54,11 @@ const nextLint: cliCommand = (argv) => {
     '--fix-type': [String],
     '--ignore-path': String,
     '--no-ignore': Boolean,
+    '--quiet': Boolean,
     '--no-inline-config': Boolean,
     '--report-unused-disable-directives': String,
     '--cache': Boolean,
     '--cache-location': String,
-    '--cache-strategy': String,
     '--no-error-on-unmatched-pattern': Boolean,
 
     // Aliases
@@ -107,6 +106,9 @@ const nextLint: cliCommand = (argv) => {
           --ignore-path path::String     Specify path of ignore file
           --no-ignore                    Disable use of ignore files and patterns
 
+        Handling warnings:
+          --quiet                        Report errors only - default: false
+
         Inline configuration comments:
           --no-inline-config             Prevent comments from changing config or rules
           --report-unused-disable-directives  Adds reported errors for unused eslint-disable directives ("error" | "warn" | "off")
@@ -114,7 +116,6 @@ const nextLint: cliCommand = (argv) => {
         Caching:
           --cache                        Only check changed files - default: false
           --cache-location path::String  Path to the cache file or directory - default: .eslintcache
-          --cache-strategy String        Strategy to use for detecting changed files - either: metadata or content - default: metadata
         
         Miscellaneous:
           --no-error-on-unmatched-pattern  Prevent errors when pattern is unmatched - default: false
@@ -140,7 +141,10 @@ const nextLint: cliCommand = (argv) => {
     },
     []
   )
-  runLintCheck(baseDir, lintDirs, false, eslintOptions(args))
+
+  const reportErrorsOnly = Boolean(args['--quiet'])
+
+  runLintCheck(baseDir, lintDirs, false, eslintOptions(args), reportErrorsOnly)
     .then(async (lintResults) => {
       const lintOutput =
         typeof lintResults === 'string' ? lintResults : lintResults?.output
diff --git a/packages/next/lib/eslint/runLintCheck.ts b/packages/next/lib/eslint/runLintCheck.ts
index 1754f56ab9c88..9787e98652c56 100644
--- a/packages/next/lib/eslint/runLintCheck.ts
+++ b/packages/next/lib/eslint/runLintCheck.ts
@@ -28,7 +28,8 @@ async function lint(
   lintDirs: string[],
   eslintrcFile: string | null,
   pkgJsonPath: string | null,
-  eslintOptions: any = null
+  eslintOptions: any = null,
+  reportErrorsOnly: boolean = false
 ): Promise<
   | string
   | null
@@ -59,7 +60,6 @@ async function lint(
       'error'
     )} - ESLint class not found. Please upgrade to ESLint version 7 or later`
   }
-
   let options: any = {
     useEslintrc: true,
     baseConfig: {},
@@ -110,8 +110,9 @@ async function lint(
   }
   const lintStart = process.hrtime()
 
-  const results = await eslint.lintFiles(lintDirs)
+  let results = await eslint.lintFiles(lintDirs)
   if (options.fix) await ESLint.outputFixes(results)
+  if (reportErrorsOnly) results = await ESLint.getErrorResults(results) // Only return errors if --quiet flag is used
 
   const formattedResult = formatResults(baseDir, results)
   const lintEnd = process.hrtime(lintStart)
@@ -141,7 +142,8 @@ export async function runLintCheck(
   baseDir: string,
   lintDirs: string[],
   lintDuringBuild: boolean = false,
-  eslintOptions: any = null
+  eslintOptions: any = null,
+  reportErrorsOnly: boolean = false
 ): ReturnType<typeof lint> {
   try {
     // Find user's .eslintrc file
@@ -202,7 +204,8 @@ export async function runLintCheck(
       lintDirs,
       eslintrcFile,
       pkgJsonPath,
-      eslintOptions
+      eslintOptions,
+      reportErrorsOnly
     )
   } catch (err) {
     throw err
diff --git a/test/integration/eslint/custom-config/.eslintrc b/test/integration/eslint/custom-config/.eslintrc
index 3b753142cfa11..1940c0953ab0a 100644
--- a/test/integration/eslint/custom-config/.eslintrc
+++ b/test/integration/eslint/custom-config/.eslintrc
@@ -3,6 +3,6 @@
   "root": true,
   "rules": {
     "@next/next/no-html-link-for-pages": 0,
-    "@next/next/no-sync-scripts": 2
+    "@next/next/no-sync-scripts": 1
   }
 }
diff --git a/test/integration/eslint/custom-config/pages/index.js b/test/integration/eslint/custom-config/pages/index.js
index ca1cd577585d0..52239fe62f15a 100644
--- a/test/integration/eslint/custom-config/pages/index.js
+++ b/test/integration/eslint/custom-config/pages/index.js
@@ -1,6 +1,7 @@
 const Home = () => (
   <div>
     <p>Home</p>
+    <script src="https://example.com" />
     /* Badly formatted comment */
   </div>
 )
diff --git a/test/integration/eslint/test/index.test.js b/test/integration/eslint/test/index.test.js
index 3dd398b2812df..6c4ffe8e618d5 100644
--- a/test/integration/eslint/test/index.test.js
+++ b/test/integration/eslint/test/index.test.js
@@ -41,6 +41,9 @@ describe('ESLint', () => {
       })
 
       const output = stdout + stderr
+      expect(output).toContain(
+        'Warning: External synchronous scripts are forbidden'
+      )
       expect(output).toContain(
         'Error: Comments inside children section of tag should be placed inside braces'
       )
@@ -75,7 +78,7 @@ describe('ESLint', () => {
       )
     })
 
-    test.only('invalid eslint version', async () => {
+    test('invalid eslint version', async () => {
       const { stdout, stderr } = await nextBuild(dirInvalidEslintVersion, [], {
         stdout: true,
         stderr: true,
@@ -115,6 +118,9 @@ describe('ESLint', () => {
       })
 
       const output = stdout + stderr
+      expect(output).toContain(
+        'Warning: External synchronous scripts are forbidden'
+      )
       expect(output).toContain(
         'Error: Comments inside children section of tag should be placed inside braces'
       )
@@ -167,5 +173,20 @@ describe('ESLint', () => {
         }
       }
     })
+
+    test('quiet flag suppresses warnings and only reports errors', async () => {
+      const { stdout, stderr } = await nextLint(dirCustomConfig, ['--quiet'], {
+        stdout: true,
+        stderr: true,
+      })
+
+      const output = stdout + stderr
+      expect(output).toContain(
+        'Error: Comments inside children section of tag should be placed inside braces'
+      )
+      expect(output).not.toContain(
+        'Warning: External synchronous scripts are forbidden'
+      )
+    })
   })
 })
diff --git a/yarn.lock b/yarn.lock
index 295867ba35ea0..e416b69f99533 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7991,6 +7991,17 @@ eslint-import-resolver-node@^0.3.4:
     debug "^2.6.9"
     resolve "^1.13.1"
 
+eslint-import-resolver-typescript@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.4.0.tgz#ec1e7063ebe807f0362a7320543aaed6fe1100e1"
+  integrity sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==
+  dependencies:
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
+
 eslint-module-utils@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"

From 67f5830acc39d24cd81cc58aa7f26f09ee3f37d2 Mon Sep 17 00:00:00 2001
From: Luke Ingalls <45518011+lukeingalls@users.noreply.github.com>
Date: Fri, 18 Jun 2021 07:20:37 -0600
Subject: [PATCH 2/6] docs: fixed typo (#26311)

---
 docs/api-reference/create-next-app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api-reference/create-next-app.md b/docs/api-reference/create-next-app.md
index 3b8fc9cf801fe..d82dfdfc6d757 100644
--- a/docs/api-reference/create-next-app.md
+++ b/docs/api-reference/create-next-app.md
@@ -27,7 +27,7 @@ yarn create next-app --typescript
 - **--ts, --typescript** - Initialize as a TypeScript project.
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
-- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app`
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend running `yarn create next-app`
 
 ### Why use Create Next App?
 

From 98acfaf8ccd21e6965dc5c9ca38d15c454848838 Mon Sep 17 00:00:00 2001
From: Joe Bell <joe@joebell.co.uk>
Date: Fri, 18 Jun 2021 17:21:12 +0300
Subject: [PATCH 3/6] Extend disclaimer for dynamic image imports (#26241)

* docs: extend disclaimer for dynamic image imports

* docs: extend guidance on blurDataURL

* Update docs/api-reference/next/image.md

Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
---
 docs/api-reference/next/image.md          | 4 +++-
 docs/basic-features/image-optimization.md | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 4cf1ef52870a5..552902f76082a 100644
--- a/docs/api-reference/next/image.md
+++ b/docs/api-reference/next/image.md
@@ -167,7 +167,9 @@ Should only be used when the image is visible above the fold. Defaults to
 
 A placeholder to use while the image is loading, possible values are `blur` or `empty`. Defaults to `empty`.
 
-When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated. Otherwise you must provide the [`blurDataURL`](#blurdataurl) property.
+When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated.
+
+For dynamic images, you must provide the [`blurDataURL`](#blurdataurl) property. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with `base64` generation.
 
 When `empty`, there will be no placeholder while the image is loading, only empty space.
 
diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
index ec9d2fd7f4ee7..075b66d1b5e2c 100644
--- a/docs/basic-features/image-optimization.md
+++ b/docs/basic-features/image-optimization.md
@@ -79,7 +79,7 @@ function Home() {
 }
 ```
 
-For dynamic images you have to provide `width`, `height` and `blurDataURL` manually.
+For dynamic or remote images, you'll have to provide [`width`](/docs/api-reference/next/image#width), [`height`](/docs/api-reference/next/image#height) and [`blurDataURL`](/docs/api-reference/next/image#blurdataurl) manually.
 
 ## Properties
 

From 88ed5269b5e0c76667780f4823b669c392bc6713 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Fri, 18 Jun 2021 19:12:20 +0200
Subject: [PATCH 4/6] Add runtime to hotUpdateMainFilename (#26256)

Updates the hotUpdateChunk to include `[runtime]` for web workers support.

Fixes #26152
Fixes #19865
Fixes #26144

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## 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.

## Documentation / Examples

- [ ] Make sure the linting passes
---
 package.json                                  |  1 +
 packages/next/build/webpack-config.ts         | 10 ++--
 packages/next/client/dev/amp-dev.js           |  7 ++-
 test/integration/amphtml/test/index.test.js   | 11 +---
 .../build-output/test/index.test.js           |  2 +-
 .../worker-webpack5/lib/sharedCode.js         | 17 ++++++
 .../integration/worker-webpack5/lib/worker.js |  8 +++
 .../worker-webpack5/next.config.js            |  1 +
 .../worker-webpack5/pages/index.js            | 38 ++++++++++++
 .../worker-webpack5/test/index.test.js        | 58 +++++++++++++++++++
 yarn.lock                                     |  5 ++
 11 files changed, 143 insertions(+), 15 deletions(-)
 create mode 100644 test/integration/worker-webpack5/lib/sharedCode.js
 create mode 100644 test/integration/worker-webpack5/lib/worker.js
 create mode 100644 test/integration/worker-webpack5/next.config.js
 create mode 100644 test/integration/worker-webpack5/pages/index.js
 create mode 100644 test/integration/worker-webpack5/test/index.test.js

diff --git a/package.json b/package.json
index 81841b9b67333..0eaf0e8a542d9 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "execa": "2.0.3",
     "express": "4.17.0",
+    "faker": "5.5.3",
     "faunadb": "2.6.1",
     "firebase": "7.14.5",
     "fs-extra": "9.0.0",
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 9919302726da5..434e6a71e6c67 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -510,7 +510,7 @@ export default async function getBaseWebpackConfig(
 
   // Contains various versions of the Webpack SplitChunksPlugin used in different build types
   const splitChunksConfigs: {
-    [propName: string]: webpack.Options.SplitChunksOptions
+    [propName: string]: webpack.Options.SplitChunksOptions | false
   } = {
     dev: {
       cacheGroups: {
@@ -611,9 +611,9 @@ export default async function getBaseWebpackConfig(
   }
 
   // Select appropriate SplitChunksPlugin config for this build
-  let splitChunksConfig: webpack.Options.SplitChunksOptions
+  let splitChunksConfig: webpack.Options.SplitChunksOptions | false
   if (dev) {
-    splitChunksConfig = splitChunksConfigs.dev
+    splitChunksConfig = isWebpack5 ? false : splitChunksConfigs.dev
   } else {
     splitChunksConfig = splitChunksConfigs.prodGranular
   }
@@ -940,7 +940,7 @@ export default async function getBaseWebpackConfig(
         : {}),
       // we must set publicPath to an empty value to override the default of
       // auto which doesn't work in IE11
-      publicPath: '',
+      publicPath: `${config.assetPrefix || ''}/_next/`,
       path:
         isServer && isWebpack5 && !dev
           ? path.join(outputPath, 'chunks')
@@ -959,7 +959,7 @@ export default async function getBaseWebpackConfig(
         ? 'static/webpack/[id].[fullhash].hot-update.js'
         : 'static/webpack/[id].[hash].hot-update.js',
       hotUpdateMainFilename: isWebpack5
-        ? 'static/webpack/[fullhash].hot-update.json'
+        ? 'static/webpack/[fullhash].[runtime].hot-update.json'
         : 'static/webpack/[hash].hot-update.json',
       // This saves chunks with the name given via `import()`
       chunkFilename: isServer
diff --git a/packages/next/client/dev/amp-dev.js b/packages/next/client/dev/amp-dev.js
index c4c829a680f53..c10a5ac1736f2 100644
--- a/packages/next/client/dev/amp-dev.js
+++ b/packages/next/client/dev/amp-dev.js
@@ -37,7 +37,12 @@ async function tryApplyUpdates() {
     return
   }
   try {
-    const res = await fetch(`${hotUpdatePath}${curHash}.hot-update.json`)
+    const res = await fetch(
+      typeof __webpack_runtime_id__ !== 'undefined'
+        ? // eslint-disable-next-line no-undef
+          `${hotUpdatePath}${curHash}.${__webpack_runtime_id__}.hot-update.json`
+        : `${hotUpdatePath}${curHash}.hot-update.json`
+    )
     const jsonData = await res.json()
     const curPage = page === '/' ? 'index' : page
     // webpack 5 uses an array instead
diff --git a/test/integration/amphtml/test/index.test.js b/test/integration/amphtml/test/index.test.js
index 02a8f3cafdd40..85d8d4385f0b0 100644
--- a/test/integration/amphtml/test/index.test.js
+++ b/test/integration/amphtml/test/index.test.js
@@ -402,6 +402,8 @@ describe('AMP Usage', () => {
 
     it('should not reload unless the page is edited for an AMP page', async () => {
       let browser
+      const hmrTestPagePath = join(__dirname, '../', 'pages', 'hmr', 'test.js')
+      const originalContent = readFileSync(hmrTestPagePath, 'utf8')
       try {
         await renderViaHTTP(dynamicAppPort, '/hmr/test')
 
@@ -409,15 +411,7 @@ describe('AMP Usage', () => {
         await check(() => browser.elementByCss('p').text(), /I'm an AMP page!/)
 
         const origDate = await browser.elementByCss('span').text()
-        const hmrTestPagePath = join(
-          __dirname,
-          '../',
-          'pages',
-          'hmr',
-          'test.js'
-        )
 
-        const originalContent = readFileSync(hmrTestPagePath, 'utf8')
         const editedContent = originalContent.replace(
           `This is the hot AMP page.`,
           'replaced it!'
@@ -456,6 +450,7 @@ describe('AMP Usage', () => {
 
         await check(() => getBrowserBodyText(browser), /I'm an AMP page!/)
       } finally {
+        writeFileSync(hmrTestPagePath, originalContent, 'utf8')
         await browser.close()
       }
     })
diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js
index 5893d7aa14569..233a760a02387 100644
--- a/test/integration/build-output/test/index.test.js
+++ b/test/integration/build-output/test/index.test.js
@@ -144,7 +144,7 @@ describe('Build Output', () => {
           const webpackSizeValue = webpackSize.endsWith('kB')
             ? parseFloat(webpackSize)
             : parseFloat(webpackSize) / 1000
-          expect(webpackSizeValue).toBeCloseTo(gz ? 0.76 : 1.45, 2)
+          expect(webpackSizeValue).toBeCloseTo(gz ? 0.766 : 1.46, 2)
           expect(webpackSize.endsWith('kB') || webpackSize.endsWith(' B')).toBe(
             true
           )
diff --git a/test/integration/worker-webpack5/lib/sharedCode.js b/test/integration/worker-webpack5/lib/sharedCode.js
new file mode 100644
index 0000000000000..da7cd7ab6dd3d
--- /dev/null
+++ b/test/integration/worker-webpack5/lib/sharedCode.js
@@ -0,0 +1,17 @@
+export function Expensive() {
+  const start = performance.now()
+  let i = 99999
+
+  const bigArray = []
+  while (--i) {
+    bigArray.push(i)
+  }
+
+  const endTime = performance.now()
+
+  if (typeof window === 'undefined') {
+    console.log('[WORKER] Completed expensive function in', endTime - start)
+  } else {
+    console.log('[WEB] Completed expensive function in', endTime - start)
+  }
+}
diff --git a/test/integration/worker-webpack5/lib/worker.js b/test/integration/worker-webpack5/lib/worker.js
new file mode 100644
index 0000000000000..d34bcedd68d23
--- /dev/null
+++ b/test/integration/worker-webpack5/lib/worker.js
@@ -0,0 +1,8 @@
+import { Expensive } from './sharedCode'
+import faker from 'faker'
+
+// Ensure a large libraries is added so that splitChunks would trigger if enabled.
+console.log(faker)
+
+Expensive()
+self.postMessage(true)
diff --git a/test/integration/worker-webpack5/next.config.js b/test/integration/worker-webpack5/next.config.js
new file mode 100644
index 0000000000000..4ba52ba2c8df6
--- /dev/null
+++ b/test/integration/worker-webpack5/next.config.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/test/integration/worker-webpack5/pages/index.js b/test/integration/worker-webpack5/pages/index.js
new file mode 100644
index 0000000000000..61a7c70a03c09
--- /dev/null
+++ b/test/integration/worker-webpack5/pages/index.js
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Expensive } from '../lib/sharedCode'
+
+export default function Home() {
+  const [expensiveWebStatus, setExpensiveWebStatus] = React.useState('WAIT')
+  const [expensiveWorkerStatus, setExpensiveWorkerComplete] = React.useState(
+    'WAIT'
+  )
+  const worker = React.useRef()
+
+  React.useEffect(() => {
+    worker.current = new Worker(new URL('../lib/worker.js', import.meta.url))
+    worker.current.addEventListener('message', ({ data }) => {
+      if (data) {
+        setExpensiveWorkerComplete('PASS')
+      }
+    })
+    worker.current.addEventListener('error', (data) => {
+      setExpensiveWorkerComplete('FAIL')
+    })
+  }, [worker, setExpensiveWorkerComplete])
+  React.useEffect(() => {
+    try {
+      Expensive()
+      setExpensiveWebStatus('PASS')
+    } catch {
+      setExpensiveWebStatus('FAIL')
+    }
+  }, [])
+
+  return (
+    <main>
+      <h1>$RefreshRegistry repro</h1>
+      <div id="web-status">Web: {expensiveWebStatus}</div>
+      <div id="worker-status">Worker: {expensiveWorkerStatus}</div>
+    </main>
+  )
+}
diff --git a/test/integration/worker-webpack5/test/index.test.js b/test/integration/worker-webpack5/test/index.test.js
new file mode 100644
index 0000000000000..70d410cc6d602
--- /dev/null
+++ b/test/integration/worker-webpack5/test/index.test.js
@@ -0,0 +1,58 @@
+/* eslint-env jest */
+import {
+  check,
+  findPort,
+  killApp,
+  launchApp,
+  nextStart,
+  nextBuild,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+const appDir = join(__dirname, '../')
+
+jest.setTimeout(1000 * 60 * 2)
+
+let appPort
+let app
+
+const runTests = () => {
+  it('should pass on both client and worker', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/')
+      await browser.waitForElementByCss('#web-status')
+      await check(() => browser.elementByCss('#web-status').text(), /PASS/i)
+      await browser.waitForElementByCss('#worker-status')
+      await check(() => browser.elementByCss('#worker-status').text(), /PASS/i)
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+}
+
+describe('Web Workers with webpack 5', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
+
+  describe('server mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
+})
diff --git a/yarn.lock b/yarn.lock
index e416b69f99533..e82fc069824dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8488,6 +8488,11 @@ extsprintf@^1.2.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
 
+faker@5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-5.5.3.tgz#c57974ee484431b25205c2c8dc09fda861e51e0e"
+  integrity sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g==
+
 fast-deep-equal@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"

From ffaa4813b6c5ca37509aa8f4c83b43acdc7b8f5f Mon Sep 17 00:00:00 2001
From: Lee Robinson <me@leerob.io>
Date: Fri, 18 Jun 2021 12:34:32 -0500
Subject: [PATCH 5/6] Add docs on adding HTTP security headers. (#25833)

---
 docs/advanced-features/security-headers.md   | 136 +++++++++++++++++++
 docs/api-reference/next.config.js/headers.md |  11 ++
 docs/manifest.json                           |   4 +
 3 files changed, 151 insertions(+)
 create mode 100644 docs/advanced-features/security-headers.md

diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md
new file mode 100644
index 0000000000000..0fc6a1f91a4cb
--- /dev/null
+++ b/docs/advanced-features/security-headers.md
@@ -0,0 +1,136 @@
+---
+description: Improve the security of your Next.js application by adding HTTP response headers.
+---
+
+# Security Headers
+
+To improve the security of your application, you can use [`headers`](/docs/api-reference/next.config.js/headers.md) in `next.config.js` to apply HTTP response headers to all routes in your application.
+
+```jsx
+// next.config.js
+
+// You can choose which headers to add to the list
+// after learning more below.
+const securityHeaders = [];
+
+async headers() {
+  return [
+    {
+      // Apply these headers to all routes in your application.
+      source: '/(.*)',
+      headers: securityHeaders
+    }
+}
+```
+
+## Options
+
+### [X-DNS-Prefetch-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control)
+
+This header controls DNS prefetching, allowing browsers to proactively perform domain name resolution on external links, images, CSS, JavaScript, and more. This prefetching is performed in the background, so the [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS) is more likely to be resolved by the time the referenced items are needed. This reduces latency when the user clicks a link.
+
+```jsx
+{
+  key: 'X-DNS-Prefetch-Control',
+  value: 'on'
+}
+```
+
+### [Strict-Transport-Security](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
+
+This header informs browsers it should only be accessed using HTTPS, instead of using HTTP. Using the configuration below, all present and future subdomains will use HTTPS for a `max-age` of 2 years. This blocks access to pages or subdomains that can only be served over HTTP.
+
+If you're deploying to [Vercel](https://vercel.com/docs/edge-network/headers#strict-transport-security), this header is not necessary as it's automatically added to all deployments.
+
+```jsx
+{
+  key: 'Strict-Transport-Security',
+  value: 'max-age=31536000; includeSubDomains; preload'
+}
+```
+
+### [X-XSS-Protection](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection)
+
+This header stops pages from loading when they detect reflected cross-site scripting (XSS) attacks. Although this protection is not necessary when sites implement a strong [`Content-Security-Policy`](#content-security-policy) disabling the use of inline JavaScript (`'unsafe-inline'`), it can still provide protection for older web browsers that don't support CSP.
+
+```jsx
+{
+  key: 'X-XSS-Protection',
+  value: '1; mode=block'
+}
+```
+
+### [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)
+
+This header indicates whether the site should be allowed to be displayed within an `iframe`. This can prevent against clickjacking attacks. This header has been superseded by CSP's `frame-ancestors` option, which has better support in modern browsers.
+
+```jsx
+{
+  key: 'X-Frame-Options',
+  value: 'SAMEORIGIN'
+}
+```
+
+### [Permissions-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy)
+
+This header allows you to control which features and APIs can be used in the browser. It was previously named `Feature-Policy`. You can view the full list of permission options [here](https://www.w3.org/TR/permissions-policy-1/).
+
+```jsx
+{
+  key: 'Permissions-Policy',
+  value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()'
+}
+```
+
+### [X-Content-Type-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options)
+
+This header prevents the browser from attempting to guess the type of content if the `Content-Type` header is not explicitly set. This can prevent XSS exploits for websites that allow users to upload and share files. For example, a user trying to download an image, but having it treated as a different `Content-Type` like an executable, which could be malicious. This header also applies to downloading browser extensions. The only valid value for this header is `nosniff`.
+
+```jsx
+{
+  key: 'X-Content-Type-Options',
+  value: 'nosniff'
+}
+```
+
+### [Referrer-Policy](https://scotthelme.co.uk/a-new-security-header-referrer-policy/)
+
+This header controls how much information the browser includes when navigating from the current website (origin) to another. You can read about the different options [here](https://scotthelme.co.uk/a-new-security-header-referrer-policy/).
+
+```jsx
+{
+  key: 'Referrer-Policy',
+  value: 'origin-when-cross-origin'
+}
+```
+
+### [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+
+This header helps prevent cross-site scripting (XSS), clickjacking and other code injection attacks. Content Security Policy (CSP) can specify allowed origins for content including scripts, stylesheets, images, fonts, objects, media (audio, video), iframes, and more.
+
+You can read about the many different CSP options [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+
+```jsx
+{
+  key: 'Content-Security-Policy',
+  value: // Your CSP Policy
+}
+```
+
+### References
+
+- [MDN](https://developer.mozilla.org)
+- [Varun Naik](https://blog.vnaik.com/posts/web-attacks.html)
+- [Scott Helme](https://scotthelme.co.uk)
+- [Mozilla Observatory](https://observatory.mozilla.org/)
+
+## Related
+
+For more information, we recommend the following sections:
+
+<div class="card">
+  <a href="/docs/api-reference/next.config.js/headers.md">
+    <b>Headers:</b>
+    <small>Add custom HTTP headers to your Next.js app.</small>
+  </a>
+</div>
diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md
index 69bc627a84aef..e467d7363af11 100644
--- a/docs/api-reference/next.config.js/headers.md
+++ b/docs/api-reference/next.config.js/headers.md
@@ -373,3 +373,14 @@ module.exports = {
 ### Cache-Control
 
 Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) function.
+
+## Related
+
+For more information, we recommend the following sections:
+
+<div class="card">
+  <a href="/docs/advanced-features/security-headers.md">
+    <b>Security Headers:</b>
+    <small>Improve the security of your Next.js application by add HTTP response headers.</small>
+  </a>
+</div>
diff --git a/docs/manifest.json b/docs/manifest.json
index 9074e69e6feae..db2d02a896e7b 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -208,6 +208,10 @@
             {
               "title": "Internationalized Routing",
               "path": "/docs/advanced-features/i18n-routing.md"
+            },
+            {
+              "title": "Security Headers",
+              "path": "/docs/advanced-features/security-headers.md"
             }
           ]
         },

From 94f7bfca9978604b7636b67d08d7afa850d6279c Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Fri, 18 Jun 2021 15:00:12 -0500
Subject: [PATCH 6/6] v11.0.1-canary.5

---
 lerna.json                                   |  2 +-
 packages/create-next-app/package.json        |  2 +-
 packages/eslint-config-next/package.json     |  4 ++--
 packages/eslint-plugin-next/package.json     |  2 +-
 packages/next-bundle-analyzer/package.json   |  2 +-
 packages/next-codemod/package.json           |  2 +-
 packages/next-env/package.json               |  2 +-
 packages/next-mdx/package.json               |  2 +-
 packages/next-plugin-storybook/package.json  |  2 +-
 packages/next-polyfill-module/package.json   |  2 +-
 packages/next-polyfill-nomodule/package.json |  2 +-
 packages/next/package.json                   | 12 ++++++------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 14 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/lerna.json b/lerna.json
index d7bade70d6968..e329c27d98b99 100644
--- a/lerna.json
+++ b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "11.0.1-canary.4"
+  "version": "11.0.1-canary.5"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index cc07aad95dc31..109a79300836b 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 5fa19e75c2e04..0a67eeb65749d 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "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": "11.0.1-canary.4",
+    "@next/eslint-plugin-next": "11.0.1-canary.5",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 28b1cd4fa7d81..77eca967f0d86 100644
--- a/packages/eslint-plugin-next/package.json
+++ b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",
diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
index f384d0164189b..e764f4df1402a 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index c4c9cb55f673d..dd5c657463ed6 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index bd83ff083572a..56af507dd9918 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index e8ce60ab95712..56f815117d660 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 83caabdd9b228..e1c66a843191f 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
index 8b4c5e15b6351..f649660c4ccfe 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "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",
diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
index 5e971cf08951f..98566ed8f113b 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next/package.json b/packages/next/package.json
index 83f998ba1087a..555115c8eec3c 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -64,10 +64,10 @@
   "dependencies": {
     "@babel/runtime": "7.12.5",
     "@hapi/accept": "5.0.2",
-    "@next/env": "11.0.1-canary.4",
-    "@next/polyfill-module": "11.0.1-canary.4",
-    "@next/react-dev-overlay": "11.0.1-canary.4",
-    "@next/react-refresh-utils": "11.0.1-canary.4",
+    "@next/env": "11.0.1-canary.5",
+    "@next/polyfill-module": "11.0.1-canary.5",
+    "@next/react-dev-overlay": "11.0.1-canary.5",
+    "@next/react-refresh-utils": "11.0.1-canary.5",
     "assert": "2.0.0",
     "ast-types": "0.13.2",
     "browserify-zlib": "0.2.0",
@@ -151,7 +151,7 @@
     "@babel/preset-typescript": "7.12.7",
     "@babel/traverse": "^7.12.10",
     "@babel/types": "7.12.12",
-    "@next/polyfill-nomodule": "11.0.1-canary.4",
+    "@next/polyfill-nomodule": "11.0.1-canary.5",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 16ddb295f1aa7..f7cddba1822f0 100644
--- a/packages/react-dev-overlay/package.json
+++ b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index 51931fbc0b5f8..bed5c2e288ea7 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "11.0.1-canary.4",
+  "version": "11.0.1-canary.5",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",