From a2accb22999ec12c49a3621f04d6b7d3567f00a3 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Tue, 22 Mar 2022 00:03:42 -0500
Subject: [PATCH 01/39] Update trace ignore check to check reasons correctly
 (#35511)

---
 .../build/webpack/plugins/next-trace-entrypoints-plugin.ts  | 4 +++-
 test/integration/production/pages/api/index.js              | 6 +++---
 test/integration/production/test/index.test.js              | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts b/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts
index 2f0e7ababae6..21b14ad40165 100644
--- a/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts
+++ b/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts
@@ -365,7 +365,9 @@ export class TraceEntryPointsPlugin implements webpack5.WebpackPluginInstance {
                     // static image imports, CSS imports
                     file = nodePath.join(this.tracingRoot, file)
                     const depMod = depModMap.get(file)
-                    const isAsset = reasons.get(file)?.type.includes('asset')
+                    const isAsset = reasons
+                      .get(nodePath.relative(this.tracingRoot, file))
+                      ?.type.includes('asset')
 
                     return (
                       !isAsset &&
diff --git a/test/integration/production/pages/api/index.js b/test/integration/production/pages/api/index.js
index 22e945b9672f..5df383f4a834 100644
--- a/test/integration/production/pages/api/index.js
+++ b/test/integration/production/pages/api/index.js
@@ -1,12 +1,12 @@
 import fs from 'fs'
 import path from 'path'
-import data from '../../static/hello.json'
+import css from '../../components/logo/logo.module.css'
 
 export default (req, res) => {
   console.log({
-    importedData: data,
+    importedData: css,
     fsLoadedData: fs.readFileSync(
-      path.join(process.cwd(), 'static', 'hello.json'),
+      path.join(process.cwd(), 'components', 'logo', 'logo.module.css'),
       'utf8'
     ),
   })
diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js
index 5276dbf5db56..82c91a9acef1 100644
--- a/test/integration/production/test/index.test.js
+++ b/test/integration/production/test/index.test.js
@@ -225,7 +225,7 @@ describe('Production Usage', () => {
       },
       {
         page: '/api',
-        tests: [/webpack-runtime\.js/, /static\/hello\.json/],
+        tests: [/webpack-runtime\.js/, /\/logo\.module\.css/],
         notTests: [
           /next\/dist\/server\/next\.js/,
           /next\/dist\/bin/,

From 78831c3c8490e2142aedfce34420085f49ba9e73 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Tue, 22 Mar 2022 09:00:31 -0400
Subject: [PATCH 02/39] v12.1.1-canary.17

---
 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-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index c1b7c36a832f..b9c10c6aca41 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1-canary.16"
+  "version": "12.1.1-canary.17"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 04edd9ee5173..7199c8a27ed1 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index a821748d07c6..5d5c053bb88f 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "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.1.1-canary.16",
+    "@next/eslint-plugin-next": "12.1.1-canary.17",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 13120e31fa47..62ceddaf8f8a 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": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "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 5b8b6a23abce..0b1b0d037c3c 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 5e89c7f368dd..6af12dfa01a5 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 52d3959f032a..69010149c17d 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 126e9b38c11e..f3b865480071 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 30b3022d3e4a..32bc832788d5 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "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 99d2905f6bd0..364f2434a25f 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "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 94de2dc2385b..7ddbeca5bfcb 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 854d63422b4a..5d845564fdb6 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index e6ecbc66eb3e..8aad660fb8f2 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.1-canary.16",
+    "@next/env": "12.1.1-canary.17",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.1-canary.16",
-    "@next/polyfill-nomodule": "12.1.1-canary.16",
-    "@next/react-dev-overlay": "12.1.1-canary.16",
-    "@next/react-refresh-utils": "12.1.1-canary.16",
-    "@next/swc": "12.1.1-canary.16",
+    "@next/polyfill-module": "12.1.1-canary.17",
+    "@next/polyfill-nomodule": "12.1.1-canary.17",
+    "@next/react-dev-overlay": "12.1.1-canary.17",
+    "@next/react-refresh-utils": "12.1.1-canary.17",
+    "@next/swc": "12.1.1-canary.17",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index afb5ac544a8a..57db00907726 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": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "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 2e1956c8360e..83cbad74a15f 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": "12.1.1-canary.16",
+  "version": "12.1.1-canary.17",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From 860c97ccf597eddec9422cab06ab8a7cc328d8bb Mon Sep 17 00:00:00 2001
From: Heyang Zhou <zhy20000919@hotmail.com>
Date: Tue, 22 Mar 2022 21:20:57 +0800
Subject: [PATCH 03/39] SWC import modularization plugin (#34969)

---
 docs/advanced-features/compiler.md            |  83 +++++++
 examples/modularize-imports/.gitignore        |  34 +++
 examples/modularize-imports/README.md         |  27 ++
 .../components/halves/LeftHalf.js             |   3 +
 .../components/halves/RightHalf.js            |   3 +
 .../components/halves/index.js                |   5 +
 examples/modularize-imports/next.config.js    |   9 +
 examples/modularize-imports/package.json      |  13 +
 examples/modularize-imports/pages/index.js    |  10 +
 packages/next-swc/Cargo.lock                  | 158 +++++++++++-
 packages/next-swc/crates/core/Cargo.toml      |   2 +
 packages/next-swc/crates/core/src/lib.rs      |   8 +
 .../crates/core/src/modularize_imports.rs     | 235 ++++++++++++++++++
 .../next-swc/crates/core/tests/fixture.rs     |  44 ++++
 .../fixture/modularize-imports/regex/input.js |   3 +
 .../modularize-imports/regex/output.js        |   4 +
 .../modularize-imports/simple/input.js        |   2 +
 .../modularize-imports/simple/output.js       |   5 +
 packages/next-swc/crates/core/tests/full.rs   |   1 +
 packages/next/build/swc/options.js            |   1 +
 packages/next/build/webpack-config.ts         |   1 +
 packages/next/server/config-shared.ts         |   8 +
 22 files changed, 653 insertions(+), 6 deletions(-)
 create mode 100644 examples/modularize-imports/.gitignore
 create mode 100644 examples/modularize-imports/README.md
 create mode 100644 examples/modularize-imports/components/halves/LeftHalf.js
 create mode 100644 examples/modularize-imports/components/halves/RightHalf.js
 create mode 100644 examples/modularize-imports/components/halves/index.js
 create mode 100644 examples/modularize-imports/next.config.js
 create mode 100644 examples/modularize-imports/package.json
 create mode 100644 examples/modularize-imports/pages/index.js
 create mode 100644 packages/next-swc/crates/core/src/modularize_imports.rs
 create mode 100644 packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/input.js
 create mode 100644 packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/output.js
 create mode 100644 packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/input.js
 create mode 100644 packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/output.js

diff --git a/docs/advanced-features/compiler.md b/docs/advanced-features/compiler.md
index 16d415a0a11d..35acc704d1ba 100644
--- a/docs/advanced-features/compiler.md
+++ b/docs/advanced-features/compiler.md
@@ -233,6 +233,89 @@ module.exports = {
 
 If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237).
 
+### Modularize Imports
+
+Allows to modularize imports, similar to [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports).
+
+Transforms member style imports:
+
+```js
+import { Row, Grid as MyGrid } from 'react-bootstrap'
+import { merge } from 'lodash'
+```
+
+...into default style imports:
+
+```js
+import Row from 'react-bootstrap/lib/Row'
+import MyGrid from 'react-bootstrap/lib/Grid'
+import merge from 'lodash/merge'
+```
+
+Config for the above transform:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    modularizeImports: {
+      'react-bootstrap': {
+        transform: 'react-bootstrap/lib/{{member}}',
+      },
+      lodash: {
+        transform: 'lodash/{{member}}',
+      },
+    },
+  },
+}
+```
+
+Advanced transformations:
+
+- Using regular expressions
+
+Similar to `babel-plugin-transform-imports`, but the transform is templated with [handlebars](https://docs.rs/handlebars) and regular expressions are in Rust [regex](https://docs.rs/regex/latest/regex/) crate's syntax.
+
+The config:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    modularizeImports: {
+      'my-library/?(((\\w*)?/?)*)': {
+        transform: 'my-library/{{ matches.[1] }}/{{member}}',
+      },
+    },
+  },
+}
+```
+
+Cause this code:
+
+```js
+import { MyModule } from 'my-library'
+import { App } from 'my-library/components'
+import { Header, Footer } from 'my-library/components/App'
+```
+
+To become:
+
+```js
+import MyModule from 'my-library/MyModule'
+import App from 'my-library/components/App'
+import Header from 'my-library/components/App/Header'
+import Footer from 'my-library/components/App/Footer'
+```
+
+- Handlebars templating
+
+This transform uses [handlebars](https://docs.rs/handlebars) to template the replacement import path in the `transform` field. These variables and helper functions are available:
+
+1. `matches`: Has type `string[]`. All groups matched by the regular expression. `matches.[0]` is the full match.
+2. `member`: Has type `string`. The name of the member import.
+3. `lowerCase`, `upperCase`, `camelCase`: Helper functions to convert a string to lower, upper or camel cases.
+
 ## Unsupported Features
 
 When your application has a `.babelrc` file, Next.js will automatically fall back to using Babel for transforming individual files. This ensures backwards compatibility with existing applications that leverage custom Babel plugins.
diff --git a/examples/modularize-imports/.gitignore b/examples/modularize-imports/.gitignore
new file mode 100644
index 000000000000..1437c53f70bc
--- /dev/null
+++ b/examples/modularize-imports/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/modularize-imports/README.md b/examples/modularize-imports/README.md
new file mode 100644
index 000000000000..c80cdb596798
--- /dev/null
+++ b/examples/modularize-imports/README.md
@@ -0,0 +1,27 @@
+# Modularize Imports Example
+
+This example shows how to use the `modularizeImports` config option.
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/modularize-imports)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/modularize-imports&project-name=modularize-imports&repository-name=modularize-imports)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example modularize-imports modularize-imports-app
+# or
+yarn create next-app --example modularize-imports modularize-imports-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/modularize-imports/components/halves/LeftHalf.js b/examples/modularize-imports/components/halves/LeftHalf.js
new file mode 100644
index 000000000000..5f96fe8a0d9a
--- /dev/null
+++ b/examples/modularize-imports/components/halves/LeftHalf.js
@@ -0,0 +1,3 @@
+export default function LeftHalf() {
+  return <span>Modularize</span>
+}
diff --git a/examples/modularize-imports/components/halves/RightHalf.js b/examples/modularize-imports/components/halves/RightHalf.js
new file mode 100644
index 000000000000..b1b5d5e0d3b4
--- /dev/null
+++ b/examples/modularize-imports/components/halves/RightHalf.js
@@ -0,0 +1,3 @@
+export default function RightHalf() {
+  return <span>Imports</span>
+}
diff --git a/examples/modularize-imports/components/halves/index.js b/examples/modularize-imports/components/halves/index.js
new file mode 100644
index 000000000000..b542f3266a39
--- /dev/null
+++ b/examples/modularize-imports/components/halves/index.js
@@ -0,0 +1,5 @@
+// import LeftHalf from './LeftHalf'
+// import RightHalf from './RightHalf'
+
+// Remove the exports here so that we can verify that `modularize-imports` is working.
+// export { LeftHalf, RightHalf };
diff --git a/examples/modularize-imports/next.config.js b/examples/modularize-imports/next.config.js
new file mode 100644
index 000000000000..55be9582d2f9
--- /dev/null
+++ b/examples/modularize-imports/next.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  experimental: {
+    modularizeImports: {
+      '../components/halves': {
+        transform: '../components/halves/{{ member }}',
+      },
+    },
+  },
+}
diff --git a/examples/modularize-imports/package.json b/examples/modularize-imports/package.json
new file mode 100644
index 000000000000..f9170ae254fa
--- /dev/null
+++ b/examples/modularize-imports/package.json
@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}
diff --git a/examples/modularize-imports/pages/index.js b/examples/modularize-imports/pages/index.js
new file mode 100644
index 000000000000..ac543f049412
--- /dev/null
+++ b/examples/modularize-imports/pages/index.js
@@ -0,0 +1,10 @@
+import { LeftHalf, RightHalf } from '../components/halves'
+
+const Index = () => (
+  <div>
+    <LeftHalf />
+    <RightHalf />
+  </div>
+)
+
+export default Index
diff --git a/packages/next-swc/Cargo.lock b/packages/next-swc/Cargo.lock
index e42eee1bc7c0..68ff4a132b49 100644
--- a/packages/next-swc/Cargo.lock
+++ b/packages/next-swc/Cargo.lock
@@ -160,13 +160,34 @@ version = "1.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
+[[package]]
+name = "block-buffer"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0940dc441f31689269e10ac70eb1002a3a1d3ad1390e030043662eb7fe4688b"
+dependencies = [
+ "block-padding",
+ "byte-tools",
+ "byteorder",
+ "generic-array 0.12.4",
+]
+
 [[package]]
 name = "block-buffer"
 version = "0.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0bf7fe51849ea569fd452f37822f606a5cabb684dc918707a0193fd4664ff324"
 dependencies = [
- "generic-array",
+ "generic-array 0.14.5",
+]
+
+[[package]]
+name = "block-padding"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa79dedbb091f449f1f39e53edf88d5dbe95f895dae6135a8d7b881fb5af73f5"
+dependencies = [
+ "byte-tools",
 ]
 
 [[package]]
@@ -199,6 +220,12 @@ version = "3.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a4a45a46ab1f2412e53d3a0ade76ffad2025804294569aae387231a0cd6e0899"
 
+[[package]]
+name = "byte-tools"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3b5ca7a04898ad4bcd41c90c5285445ff5b791899bb1b0abdd2a2aa791211d7"
+
 [[package]]
 name = "byteorder"
 version = "1.4.3"
@@ -331,7 +358,7 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "57952ca27b5e3606ff4dd79b0020231aaf9d6aa76dc05fd30137538c50bd3ce8"
 dependencies = [
- "generic-array",
+ "generic-array 0.14.5",
  "typenum",
 ]
 
@@ -428,13 +455,22 @@ version = "2.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "524cbf6897b527295dff137cec09ecf3a05f4fddffd7dfcd1585403449e74198"
 
+[[package]]
+name = "digest"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3d0c8c8752312f9713efd397ff63acb9f85585afbf179282e720e7704954dd5"
+dependencies = [
+ "generic-array 0.12.4",
+]
+
 [[package]]
 name = "digest"
 version = "0.10.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f2fb860ca6fafa5552fb6d0e816a69c8e49f0908bf524e30a90d97c85892d506"
 dependencies = [
- "block-buffer",
+ "block-buffer 0.10.2",
  "crypto-common",
 ]
 
@@ -462,6 +498,12 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "fake-simd"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e88a8acf291dafb59c2d96e8f59828f3838bb1a70398823ade51a84de6a6deed"
+
 [[package]]
 name = "fastrand"
 version = "1.7.0"
@@ -514,6 +556,15 @@ dependencies = [
  "byteorder",
 ]
 
+[[package]]
+name = "generic-array"
+version = "0.12.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ffdf9f34f1447443d37393cc6c2b8313aebddcd96906caf34e54c68d8e57d7bd"
+dependencies = [
+ "typenum",
+]
+
 [[package]]
 name = "generic-array"
 version = "0.14.5"
@@ -558,6 +609,20 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9b919933a397b79c37e33b77bb2aa3dc8eb6e165ad809e58ff75bc7db2e34574"
 
+[[package]]
+name = "handlebars"
+version = "4.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99d6a30320f094710245150395bc763ad23128d6a1ebbad7594dc4164b62c56b"
+dependencies = [
+ "log",
+ "pest",
+ "pest_derive",
+ "quick-error",
+ "serde",
+ "serde_json",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.11.2"
@@ -775,6 +840,12 @@ dependencies = [
  "hashbrown",
 ]
 
+[[package]]
+name = "maplit"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3e2e65a1a2e43cfcb47a895c4c8b10d1f4a61097f9f254f183aee60cad9c651d"
+
 [[package]]
 name = "matchers"
 version = "0.1.0"
@@ -892,6 +963,7 @@ dependencies = [
  "easy-error",
  "either",
  "fxhash",
+ "handlebars",
  "once_cell",
  "pathdiff",
  "radix_fmt",
@@ -901,6 +973,7 @@ dependencies = [
  "styled_components",
  "swc",
  "swc_atoms",
+ "swc_cached",
  "swc_common",
  "swc_css",
  "swc_ecma_loader",
@@ -1012,6 +1085,12 @@ version = "1.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "87f3e037eac156d1775da914196f0f37741a274155e34a0b7e427c35d2a2ecb9"
 
+[[package]]
+name = "opaque-debug"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2839e79665f131bdb5782e51f2c6c9599c133c6098982a54c794358bf432529c"
+
 [[package]]
 name = "ordered-float"
 version = "2.10.0"
@@ -1097,6 +1176,49 @@ version = "2.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d4fd5641d01c8f18a23da7b6fe29298ff4b55afcccdf78973b24cf3175fee32e"
 
+[[package]]
+name = "pest"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10f4872ae94d7b90ae48754df22fd42ad52ce740b8f370b03da4835417403e53"
+dependencies = [
+ "ucd-trie",
+]
+
+[[package]]
+name = "pest_derive"
+version = "2.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "833d1ae558dc601e9a60366421196a8d94bc0ac980476d0b67e1d0988d72b2d0"
+dependencies = [
+ "pest",
+ "pest_generator",
+]
+
+[[package]]
+name = "pest_generator"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "99b8db626e31e5b81787b9783425769681b347011cc59471e33ea46d2ea0cf55"
+dependencies = [
+ "pest",
+ "pest_meta",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "pest_meta"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "54be6e404f5317079812fc8f9f5279de376d8856929e21c184ecf6bbd692a11d"
+dependencies = [
+ "maplit",
+ "pest",
+ "sha-1 0.8.2",
+]
+
 [[package]]
 name = "petgraph"
 version = "0.6.0"
@@ -1267,6 +1389,12 @@ dependencies = [
  "unicode-xid",
 ]
 
+[[package]]
+name = "quick-error"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a993555f31e5a609f617c12db6250dedcac1b0a85076912c436e6fc9b2c8e6a3"
+
 [[package]]
 name = "quote"
 version = "1.0.15"
@@ -1565,6 +1693,18 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "sha-1"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7d94d0bede923b3cea61f3f1ff57ff8cdfd77b400fb8f9998949e0cf04163df"
+dependencies = [
+ "block-buffer 0.7.3",
+ "digest 0.8.1",
+ "fake-simd",
+ "opaque-debug",
+]
+
 [[package]]
 name = "sha-1"
 version = "0.10.0"
@@ -1573,7 +1713,7 @@ checksum = "028f48d513f9678cda28f6e4064755b3fbb2af6acd672f2c209b62323f7aea0f"
 dependencies = [
  "cfg-if 1.0.0",
  "cpufeatures",
- "digest",
+ "digest 0.10.3",
 ]
 
 [[package]]
@@ -2274,7 +2414,7 @@ dependencies = [
  "once_cell",
  "regex",
  "serde",
- "sha-1",
+ "sha-1 0.10.0",
  "string_enum",
  "swc_atoms",
  "swc_common",
@@ -2297,7 +2437,7 @@ dependencies = [
  "hex",
  "serde",
  "serde_json",
- "sha-1",
+ "sha-1 0.10.0",
  "swc_common",
  "swc_ecma_ast",
  "swc_ecma_codegen",
@@ -2692,6 +2832,12 @@ version = "1.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dcf81ac59edc17cc8697ff311e8f5ef2d99fcbd9817b34cec66f90b6c3dfd987"
 
+[[package]]
+name = "ucd-trie"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56dee185309b50d1f11bfedef0fe6d036842e3fb77413abef29f8f8d1c5d4c1c"
+
 [[package]]
 name = "unicode-bidi"
 version = "0.3.7"
diff --git a/packages/next-swc/crates/core/Cargo.toml b/packages/next-swc/crates/core/Cargo.toml
index 09d272b19582..4e5e5be3b190 100644
--- a/packages/next-swc/crates/core/Cargo.toml
+++ b/packages/next-swc/crates/core/Cargo.toml
@@ -28,7 +28,9 @@ swc_ecma_loader = {version = "0.29.0", features = ["node", "lru"]}
 swc_ecmascript = {version = "0.132.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"]}
 swc_node_base = "0.5.1"
 swc_stylis = "0.96.1"
+swc_cached = "0.1.1"
 tracing = {version = "0.1.28", features = ["release_max_level_off"]}
+handlebars = "4.2.1"
 
 [dev-dependencies]
 swc_ecma_transforms_testing = "0.69.0"
diff --git a/packages/next-swc/crates/core/src/lib.rs b/packages/next-swc/crates/core/src/lib.rs
index dd13ea2af816..9ca3d33a8ee5 100644
--- a/packages/next-swc/crates/core/src/lib.rs
+++ b/packages/next-swc/crates/core/src/lib.rs
@@ -49,6 +49,7 @@ mod auto_cjs;
 pub mod disallow_re_export_all_in_page;
 pub mod emotion;
 pub mod hook_optimizer;
+pub mod modularize_imports;
 pub mod next_dynamic;
 pub mod next_ssg;
 pub mod page_config;
@@ -102,6 +103,9 @@ pub struct TransformOptions {
 
     #[serde(default)]
     pub emotion: Option<emotion::EmotionOptions>,
+
+    #[serde(default)]
+    pub modularize_imports: Option<modularize_imports::Config>,
 }
 
 pub fn custom_before_pass<'a, C: Comments + 'a>(
@@ -191,6 +195,10 @@ pub fn custom_before_pass<'a, C: Comments + 'a>(
                 }
             })
             .unwrap_or_else(|| Either::Right(noop())),
+        match &opts.modularize_imports {
+            Some(config) => Either::Left(modularize_imports::modularize_imports(config.clone())),
+            None => Either::Right(noop()),
+        }
     )
 }
 
diff --git a/packages/next-swc/crates/core/src/modularize_imports.rs b/packages/next-swc/crates/core/src/modularize_imports.rs
new file mode 100644
index 000000000000..5322f9d872d2
--- /dev/null
+++ b/packages/next-swc/crates/core/src/modularize_imports.rs
@@ -0,0 +1,235 @@
+use std::borrow::Cow;
+use std::collections::HashMap;
+
+use handlebars::{Context, Handlebars, Helper, HelperResult, Output, RenderContext};
+use once_cell::sync::Lazy;
+use regex::{Captures, Regex};
+use serde::{Deserialize, Serialize};
+use swc_cached::regex::CachedRegex;
+use swc_ecmascript::ast::*;
+use swc_ecmascript::visit::{noop_fold_type, Fold};
+
+static DUP_SLASH_REGEX: Lazy<Regex> = Lazy::new(|| Regex::new(r"//").unwrap());
+
+#[derive(Clone, Debug, Deserialize)]
+#[serde(transparent)]
+pub struct Config {
+    pub packages: HashMap<String, PackageConfig>,
+}
+
+#[derive(Clone, Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct PackageConfig {
+    pub transform: String,
+    #[serde(default)]
+    pub prevent_full_import: bool,
+    #[serde(default)]
+    pub skip_default_conversion: bool,
+}
+
+struct FoldImports {
+    renderer: handlebars::Handlebars<'static>,
+    packages: Vec<(CachedRegex, PackageConfig)>,
+}
+
+struct Rewriter<'a> {
+    renderer: &'a handlebars::Handlebars<'static>,
+    key: &'a str,
+    config: &'a PackageConfig,
+    group: Vec<&'a str>,
+}
+
+impl<'a> Rewriter<'a> {
+    fn rewrite(&self, old_decl: &ImportDecl) -> Vec<ImportDecl> {
+        if old_decl.type_only || old_decl.asserts.is_some() {
+            return vec![old_decl.clone()];
+        }
+
+        let mut out: Vec<ImportDecl> = Vec::with_capacity(old_decl.specifiers.len());
+
+        for spec in &old_decl.specifiers {
+            match spec {
+                ImportSpecifier::Named(named_spec) => {
+                    #[derive(Serialize)]
+                    #[serde(untagged)]
+                    enum Data<'a> {
+                        Plain(&'a str),
+                        Array(&'a [&'a str]),
+                    }
+                    let mut ctx: HashMap<&str, Data> = HashMap::new();
+                    ctx.insert("matches", Data::Array(&self.group[..]));
+                    ctx.insert(
+                        "member",
+                        Data::Plain(
+                            named_spec
+                                .imported
+                                .as_ref()
+                                .map(|x| match x {
+                                    ModuleExportName::Ident(x) => x.as_ref(),
+                                    ModuleExportName::Str(x) => x.value.as_ref(),
+                                })
+                                .unwrap_or_else(|| named_spec.local.as_ref()),
+                        ),
+                    );
+                    let new_path = self
+                        .renderer
+                        .render_template(&self.config.transform, &ctx)
+                        .unwrap_or_else(|e| {
+                            panic!("error rendering template for '{}': {}", self.key, e);
+                        });
+                    let new_path = DUP_SLASH_REGEX.replace_all(&new_path, |_: &Captures| "/");
+                    let specifier = if self.config.skip_default_conversion {
+                        ImportSpecifier::Named(named_spec.clone())
+                    } else {
+                        ImportSpecifier::Default(ImportDefaultSpecifier {
+                            local: named_spec.local.clone(),
+                            span: named_spec.span,
+                        })
+                    };
+                    out.push(ImportDecl {
+                        specifiers: vec![specifier],
+                        src: Str::from(new_path.as_ref()),
+                        span: old_decl.span,
+                        type_only: false,
+                        asserts: None,
+                    });
+                }
+                _ => {
+                    if self.config.prevent_full_import {
+                        panic!(
+                            "import {:?} causes the entire module to be imported",
+                            old_decl
+                        );
+                    } else {
+                        // Give up
+                        return vec![old_decl.clone()];
+                    }
+                }
+            }
+        }
+        out
+    }
+}
+
+impl FoldImports {
+    fn should_rewrite<'a>(&'a self, name: &'a str) -> Option<Rewriter<'a>> {
+        for (regex, config) in &self.packages {
+            let group = regex.captures(name);
+            if let Some(group) = group {
+                let group = group
+                    .iter()
+                    .map(|x| x.map(|x| x.as_str()).unwrap_or_default())
+                    .collect::<Vec<&str>>();
+                return Some(Rewriter {
+                    renderer: &self.renderer,
+                    key: name,
+                    config,
+                    group,
+                });
+            }
+        }
+        None
+    }
+}
+
+impl Fold for FoldImports {
+    noop_fold_type!();
+    fn fold_module(&mut self, mut module: Module) -> Module {
+        let mut new_items: Vec<ModuleItem> = vec![];
+        for item in module.body {
+            match item {
+                ModuleItem::ModuleDecl(ModuleDecl::Import(decl)) => {
+                    match self.should_rewrite(&decl.src.value) {
+                        Some(rewriter) => {
+                            let rewritten = rewriter.rewrite(&decl);
+                            new_items.extend(
+                                rewritten
+                                    .into_iter()
+                                    .map(|x| ModuleItem::ModuleDecl(ModuleDecl::Import(x))),
+                            );
+                        }
+                        None => new_items.push(ModuleItem::ModuleDecl(ModuleDecl::Import(decl))),
+                    }
+                }
+                x => {
+                    new_items.push(x);
+                }
+            }
+        }
+        module.body = new_items;
+        module
+    }
+}
+
+pub fn modularize_imports(config: Config) -> impl Fold {
+    let mut folder = FoldImports {
+        renderer: handlebars::Handlebars::new(),
+        packages: vec![],
+    };
+    folder
+        .renderer
+        .register_helper("lowerCase", Box::new(helper_lower_case));
+    folder
+        .renderer
+        .register_helper("upperCase", Box::new(helper_upper_case));
+    folder
+        .renderer
+        .register_helper("camelCase", Box::new(helper_camel_case));
+    for (mut k, v) in config.packages {
+        // XXX: Should we keep this hack?
+        if !k.starts_with('^') && !k.ends_with('$') {
+            k = format!("^{}$", k);
+        }
+        folder.packages.push((
+            CachedRegex::new(&k).expect("transform-imports: invalid regex"),
+            v,
+        ));
+    }
+    folder
+}
+
+fn helper_lower_case(
+    h: &Helper<'_, '_>,
+    _: &Handlebars<'_>,
+    _: &Context,
+    _: &mut RenderContext<'_, '_>,
+    out: &mut dyn Output,
+) -> HelperResult {
+    // get parameter from helper or throw an error
+    let param = h.param(0).and_then(|v| v.value().as_str()).unwrap_or("");
+    out.write(param.to_lowercase().as_ref())?;
+    Ok(())
+}
+
+fn helper_upper_case(
+    h: &Helper<'_, '_>,
+    _: &Handlebars<'_>,
+    _: &Context,
+    _: &mut RenderContext<'_, '_>,
+    out: &mut dyn Output,
+) -> HelperResult {
+    // get parameter from helper or throw an error
+    let param = h.param(0).and_then(|v| v.value().as_str()).unwrap_or("");
+    out.write(param.to_uppercase().as_ref())?;
+    Ok(())
+}
+
+fn helper_camel_case(
+    h: &Helper<'_, '_>,
+    _: &Handlebars<'_>,
+    _: &Context,
+    _: &mut RenderContext<'_, '_>,
+    out: &mut dyn Output,
+) -> HelperResult {
+    // get parameter from helper or throw an error
+    let param = h.param(0).and_then(|v| v.value().as_str()).unwrap_or("");
+    let value = if param.is_empty() || param.chars().next().unwrap().is_lowercase() {
+        Cow::Borrowed(param)
+    } else {
+        let mut it = param.chars();
+        let fst = it.next().unwrap();
+        Cow::Owned(fst.to_lowercase().chain(it).collect::<String>())
+    };
+    out.write(value.as_ref())?;
+    Ok(())
+}
diff --git a/packages/next-swc/crates/core/tests/fixture.rs b/packages/next-swc/crates/core/tests/fixture.rs
index ed9cf5b247b7..9a7d8b7e5e56 100644
--- a/packages/next-swc/crates/core/tests/fixture.rs
+++ b/packages/next-swc/crates/core/tests/fixture.rs
@@ -1,6 +1,7 @@
 use next_swc::{
     amp_attributes::amp_attributes,
     emotion::{self, EmotionOptions},
+    modularize_imports::modularize_imports,
     next_dynamic::next_dynamic,
     next_ssg::next_ssg,
     page_config::page_config_test,
@@ -312,3 +313,46 @@ fn next_emotion_fixture(input: PathBuf) {
         &output,
     );
 }
+
+#[fixture("tests/fixture/modularize-imports/**/input.js")]
+fn modularize_imports_fixture(input: PathBuf) {
+    use next_swc::modularize_imports::PackageConfig;
+    let output = input.parent().unwrap().join("output.js");
+    test_fixture(
+        syntax(),
+        &|_tr| {
+            modularize_imports(next_swc::modularize_imports::Config {
+                packages: vec![
+                    (
+                        "react-bootstrap".to_string(),
+                        PackageConfig {
+                            transform: "react-bootstrap/lib/{{member}}".into(),
+                            prevent_full_import: false,
+                            skip_default_conversion: false,
+                        },
+                    ),
+                    (
+                        "my-library/?(((\\w*)?/?)*)".to_string(),
+                        PackageConfig {
+                            transform: "my-library/{{ matches.[1] }}/{{member}}".into(),
+                            prevent_full_import: false,
+                            skip_default_conversion: false,
+                        },
+                    ),
+                    (
+                        "my-library-2".to_string(),
+                        PackageConfig {
+                            transform: "my-library-2/{{ camelCase member }}".into(),
+                            prevent_full_import: false,
+                            skip_default_conversion: true,
+                        },
+                    ),
+                ]
+                .into_iter()
+                .collect(),
+            })
+        },
+        &input,
+        &output,
+    );
+}
diff --git a/packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/input.js b/packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/input.js
new file mode 100644
index 000000000000..679eeeb2ddcf
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/input.js
@@ -0,0 +1,3 @@
+import { MyModule } from 'my-library';
+import { App } from 'my-library/components';
+import { Header, Footer } from 'my-library/components/App';
diff --git a/packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/output.js b/packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/output.js
new file mode 100644
index 000000000000..c4b5cadfeeb6
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/modularize-imports/regex/output.js
@@ -0,0 +1,4 @@
+import MyModule from 'my-library/MyModule';
+import App from 'my-library/components/App';
+import Header from 'my-library/components/App/Header';
+import Footer from 'my-library/components/App/Footer';
diff --git a/packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/input.js b/packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/input.js
new file mode 100644
index 000000000000..f152bdc8f19d
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/input.js
@@ -0,0 +1,2 @@
+import { Grid, Row, Col as Col1 } from 'react-bootstrap';
+import { MyModule, Widget } from 'my-library-2';
diff --git a/packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/output.js b/packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/output.js
new file mode 100644
index 000000000000..d3798eb0e9e4
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/modularize-imports/simple/output.js
@@ -0,0 +1,5 @@
+import Grid from "react-bootstrap/lib/Grid";
+import Row from "react-bootstrap/lib/Row";
+import Col1 from "react-bootstrap/lib/Col";
+import { MyModule } from 'my-library-2/myModule';
+import { Widget } from 'my-library-2/widget';
diff --git a/packages/next-swc/crates/core/tests/full.rs b/packages/next-swc/crates/core/tests/full.rs
index bd7c4a6f65d7..12817af23a1e 100644
--- a/packages/next-swc/crates/core/tests/full.rs
+++ b/packages/next-swc/crates/core/tests/full.rs
@@ -62,6 +62,7 @@ fn test(input: &Path, minify: bool) {
                 relay: None,
                 shake_exports: None,
                 emotion: Some(assert_json("{}")),
+                modularize_imports: None,
             };
 
             let options = options.patch(&fm);
diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index 00af330c102f..33ed7b9d00ea 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -102,6 +102,7 @@ function getBaseSWCOptions({
       : null,
     removeConsole: nextConfig?.compiler?.removeConsole,
     reactRemoveProperties: nextConfig?.compiler?.reactRemoveProperties,
+    modularizeImports: nextConfig?.experimental?.modularizeImports,
     relay: nextConfig?.compiler?.relay,
     emotion: getEmotionOptions(nextConfig, development),
   }
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 4e8d4d4a8e53..9ad462a01dc9 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -1653,6 +1653,7 @@ export default async function getBaseWebpackConfig(
     styledComponents: config.compiler?.styledComponents,
     relay: config.compiler?.relay,
     emotion: config.experimental?.emotion,
+    modularizeImports: config.experimental?.modularizeImports,
   })
 
   const cache: any = {
diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
index 0e8c6d5a53cb..0007760e4017 100644
--- a/packages/next/server/config-shared.ts
+++ b/packages/next/server/config-shared.ts
@@ -118,6 +118,14 @@ export interface ExperimentalConfig {
         autoLabel?: 'dev-only' | 'always' | 'never'
         labelFormat?: string
       }
+  modularizeImports?: Record<
+    string,
+    {
+      transform: string
+      preventFullImport?: boolean
+      skipDefaultConversion?: boolean
+    }
+  >
 }
 
 /**

From 6da769129ec94dc3f3202e89cc73ce35d4e97488 Mon Sep 17 00:00:00 2001
From: Malte Ubl <cramforce@users.noreply.github.com>
Date: Tue, 22 Mar 2022 07:54:05 -0700
Subject: [PATCH 04/39] Reduce hello-world middleware bundle size from 128k to
 88k (#35512)

Moves two utility functions from `server/router.ts` into their own file. This avoids the middleware pulling in the full Next.js router into its bundle.

There are probably more opportunities like this, but this is a good start. Middleware should likely be bundled by a non-chunking optimizing compiler.
---
 packages/next/server/base-server.ts             |  3 ++-
 packages/next/server/dev/next-dev-server.ts     |  3 ++-
 packages/next/server/router-utils.ts            | 17 +++++++++++++++++
 packages/next/server/web/next-url.ts            |  2 +-
 .../shared/lib/router/utils/parse-next-url.ts   |  2 +-
 5 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 packages/next/server/router-utils.ts

diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
index f02f7db199d5..a575e1ad5969 100644
--- a/packages/next/server/base-server.ts
+++ b/packages/next/server/base-server.ts
@@ -42,7 +42,7 @@ import {
 import * as envConfig from '../shared/lib/runtime-config'
 import { DecodeError, normalizeRepeatedSlashes } from '../shared/lib/utils'
 import { isTargetLikeServerless } from './utils'
-import Router, { replaceBasePath, route } from './router'
+import Router, { route } from './router'
 import { setRevalidateHeaders } from './send-payload/revalidate-headers'
 import { IncrementalCache } from './incremental-cache'
 import { execOnce } from '../shared/lib/utils'
@@ -64,6 +64,7 @@ import { addRequestMeta, getRequestMeta } from './request-meta'
 import { createHeaderRoute, createRedirectRoute } from './server-route-utils'
 import { PrerenderManifest } from '../build'
 import { ImageConfigComplete } from '../shared/lib/image-config'
+import { replaceBasePath } from './router-utils'
 
 export type FindComponentsResult = {
   components: LoadComponentsReturnType
diff --git a/packages/next/server/dev/next-dev-server.ts b/packages/next/server/dev/next-dev-server.ts
index 2a18039e6481..b30545ae5bdc 100644
--- a/packages/next/server/dev/next-dev-server.ts
+++ b/packages/next/server/dev/next-dev-server.ts
@@ -41,7 +41,8 @@ import {
 } from '../../shared/lib/router/utils'
 import Server, { WrappedBuildError } from '../next-server'
 import { normalizePagePath } from '../normalize-page-path'
-import Router, { hasBasePath, replaceBasePath, route } from '../router'
+import Router, { route } from '../router'
+import { hasBasePath, replaceBasePath } from '../router-utils'
 import { eventCliSession } from '../../telemetry/events'
 import { Telemetry } from '../../telemetry/storage'
 import { setGlobal } from '../../trace'
diff --git a/packages/next/server/router-utils.ts b/packages/next/server/router-utils.ts
new file mode 100644
index 000000000000..630521434fdb
--- /dev/null
+++ b/packages/next/server/router-utils.ts
@@ -0,0 +1,17 @@
+export function replaceBasePath(pathname: string, basePath: string): string {
+  // ensure basePath is only stripped if it matches exactly
+  // and doesn't contain extra chars e.g. basePath /docs
+  // should replace for /docs, /docs/, /docs/a but not /docsss
+  if (hasBasePath(pathname, basePath)) {
+    pathname = pathname.substr(basePath.length)
+    if (!pathname.startsWith('/')) pathname = `/${pathname}`
+  }
+  return pathname
+}
+
+export function hasBasePath(pathname: string, basePath: string): boolean {
+  return (
+    typeof pathname === 'string' &&
+    (pathname === basePath || pathname.startsWith(basePath + '/'))
+  )
+}
diff --git a/packages/next/server/web/next-url.ts b/packages/next/server/web/next-url.ts
index 532b93e64ab3..8ceaea68323e 100644
--- a/packages/next/server/web/next-url.ts
+++ b/packages/next/server/web/next-url.ts
@@ -1,8 +1,8 @@
 import type { PathLocale } from '../../shared/lib/i18n/normalize-locale-path'
 import type { DomainLocale, I18NConfig } from '../config-shared'
 import { getLocaleMetadata } from '../../shared/lib/i18n/get-locale-metadata'
-import { replaceBasePath } from '../router'
 import cookie from 'next/dist/compiled/cookie'
+import { replaceBasePath } from '../router-utils'
 
 interface Options {
   base?: string | URL
diff --git a/packages/next/shared/lib/router/utils/parse-next-url.ts b/packages/next/shared/lib/router/utils/parse-next-url.ts
index 57985ecfaf0c..0e36e4b6191e 100644
--- a/packages/next/shared/lib/router/utils/parse-next-url.ts
+++ b/packages/next/shared/lib/router/utils/parse-next-url.ts
@@ -4,7 +4,7 @@ import { parseUrl } from './parse-url'
 import type { NextConfig, DomainLocale } from '../../../../server/config-shared'
 import type { ParsedUrl } from './parse-url'
 import type { PathLocale } from '../../i18n/normalize-locale-path'
-import { hasBasePath, replaceBasePath } from '../../../../server/router'
+import { hasBasePath, replaceBasePath } from '../../../../server/router-utils'
 
 interface Params {
   headers?: { [key: string]: string | string[] | undefined }

From 72478c5c80d152ad99ce179b4ef5cfac055b98d5 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Tue, 22 Mar 2022 13:58:55 -0500
Subject: [PATCH 05/39] Update next/link error when no children are provided
 (#35453)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update next/link error when no children are provided

* update manifest

* Apply suggestions from code review

Co-authored-by: Balázs Orbán <info@balazsorban.com>
---
 errors/link-no-children.md                    | 35 +++++++++++++++++++
 errors/manifest.json                          |  4 +++
 packages/next/client/link.tsx                 |  5 +++
 .../client-navigation/pages/link-no-child.js  | 10 ++++++
 .../client-navigation/test/index.test.js      |  8 +++++
 5 files changed, 62 insertions(+)
 create mode 100644 errors/link-no-children.md
 create mode 100644 test/integration/client-navigation/pages/link-no-child.js

diff --git a/errors/link-no-children.md b/errors/link-no-children.md
new file mode 100644
index 000000000000..103018f1f80e
--- /dev/null
+++ b/errors/link-no-children.md
@@ -0,0 +1,35 @@
+# No children were passed to <Link>
+
+#### Why This Error Occurred
+
+In your application code `next/link` was used without passing a child:
+
+For example:
+
+```js
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Link href="/about"></Link>
+    // or
+    <Link href='/about' />
+  )
+}
+```
+
+#### Possible Ways to Fix It
+
+Make sure one child is used when using `<Link>`:
+
+```js
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <Link href="/about">
+      <a>To About</a>
+    </Link>
+  )
+}
+```
diff --git a/errors/manifest.json b/errors/manifest.json
index d80ef5787008..ae234227e647 100644
--- a/errors/manifest.json
+++ b/errors/manifest.json
@@ -514,6 +514,10 @@
           "title": "future-webpack5-moved-to-webpack5",
           "path": "/errors/future-webpack5-moved-to-webpack5.md"
         },
+        {
+          "title": "link-no-children",
+          "path": "/errors/link-no-children.md"
+        },
         {
           "title": "link-multiple-children",
           "path": "/errors/link-multiple-children.md"
diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
index 9bb634d251ad..379d21123e15 100644
--- a/packages/next/client/link.tsx
+++ b/packages/next/client/link.tsx
@@ -231,6 +231,11 @@ function Link(props: React.PropsWithChildren<LinkProps>) {
     try {
       child = React.Children.only(children)
     } catch (err) {
+      if (!children) {
+        throw new Error(
+          `No children were passed to <Link> with \`href\` of \`${props.href}\` but one child is required https://nextjs.org/docs/messages/link-no-children`
+        )
+      }
       throw new Error(
         `Multiple children were passed to <Link> with \`href\` of \`${props.href}\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` +
           (typeof window !== 'undefined'
diff --git a/test/integration/client-navigation/pages/link-no-child.js b/test/integration/client-navigation/pages/link-no-child.js
new file mode 100644
index 000000000000..e3786f932ee7
--- /dev/null
+++ b/test/integration/client-navigation/pages/link-no-child.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      Hello World. <Link href="/about"></Link>
+    </div>
+  )
+}
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
index 2414ac400a1a..b0fc4128bf95 100644
--- a/test/integration/client-navigation/test/index.test.js
+++ b/test/integration/client-navigation/test/index.test.js
@@ -60,6 +60,14 @@ describe('Client Navigation', () => {
       await browser.close()
     })
 
+    it('should have proper error when no children are provided', async () => {
+      const browser = await webdriver(context.appPort, '/link-no-child')
+      expect(await hasRedbox(browser, true)).toBe(true)
+      expect(await getRedboxHeader(browser)).toContain(
+        'No children were passed to <Link> with `href` of `/about` but one child is required'
+      )
+    })
+
     it('should navigate back after reload', async () => {
       const browser = await webdriver(context.appPort, '/nav')
       await browser.elementByCss('#about-link').click()

From 9fef0d55da5edef961e8ff1cf0ba954c74a6439d Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Wed, 23 Mar 2022 09:28:04 -0500
Subject: [PATCH 06/39] Normalize ssgCacheKey for /index with minimalMode
 de-duping (#35536)

* Normalize ssgCacheKey for /index

* apply test changes to i18n suite as well
---
 packages/next/server/base-server.ts           |  4 ++
 .../required-server-files-i18n.test.ts        | 20 +++++----
 test/production/required-server-files.test.ts | 43 +++++++++++++++----
 .../required-server-files/pages/gssp.js       |  7 ++-
 .../required-server-files/pages/index.js      |  8 +++-
 5 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
index a575e1ad5969..5168da0997e9 100644
--- a/packages/next/server/base-server.ts
+++ b/packages/next/server/base-server.ts
@@ -1323,6 +1323,10 @@ export default abstract class Server {
           return seg
         })
         .join('/')
+
+      // ensure /index and / is normalized to one key
+      ssgCacheKey =
+        ssgCacheKey === '/index' && pathname === '/' ? '/' : ssgCacheKey
     }
 
     const doRender: () => Promise<ResponseCacheEntry | null> = async () => {
diff --git a/test/production/required-server-files-i18n.test.ts b/test/production/required-server-files-i18n.test.ts
index 43303acf2485..b74cd9bd9f0d 100644
--- a/test/production/required-server-files-i18n.test.ts
+++ b/test/production/required-server-files-i18n.test.ts
@@ -162,6 +162,8 @@ describe('should set-up next', () => {
     const res2 = await fetchViaHTTP(appPort, '/gssp', undefined, {
       redirect: 'manual ',
     })
+    await next.patchFile('standalone/data.txt', 'show')
+
     expect(res2.status).toBe(404)
     expect(res2.headers.get('cache-control')).toBe(
       's-maxage=1, stale-while-revalidate'
@@ -169,18 +171,18 @@ describe('should set-up next', () => {
   })
 
   it('should render SSR page correctly', async () => {
-    const html = await renderViaHTTP(appPort, '/')
+    const html = await renderViaHTTP(appPort, '/gssp')
     const $ = cheerio.load(html)
     const data = JSON.parse($('#props').text())
 
-    expect($('#index').text()).toBe('index page')
+    expect($('#gssp').text()).toBe('getServerSideProps page')
     expect(data.hello).toBe('world')
 
-    const html2 = await renderViaHTTP(appPort, '/')
+    const html2 = await renderViaHTTP(appPort, '/gssp')
     const $2 = cheerio.load(html2)
     const data2 = JSON.parse($2('#props').text())
 
-    expect($2('#index').text()).toBe('index page')
+    expect($2('#gssp').text()).toBe('getServerSideProps page')
     expect(isNaN(data2.random)).toBe(false)
     expect(data2.random).not.toBe(data.random)
   })
@@ -244,24 +246,24 @@ describe('should set-up next', () => {
   it('should render SSR page correctly with x-matched-path', async () => {
     const html = await renderViaHTTP(appPort, '/some-other-path', undefined, {
       headers: {
-        'x-matched-path': '/',
+        'x-matched-path': '/gssp',
       },
     })
     const $ = cheerio.load(html)
     const data = JSON.parse($('#props').text())
 
-    expect($('#index').text()).toBe('index page')
+    expect($('#gssp').text()).toBe('getServerSideProps page')
     expect(data.hello).toBe('world')
 
     const html2 = await renderViaHTTP(appPort, '/some-other-path', undefined, {
       headers: {
-        'x-matched-path': '/',
+        'x-matched-path': '/gssp',
       },
     })
     const $2 = cheerio.load(html2)
     const data2 = JSON.parse($2('#props').text())
 
-    expect($2('#index').text()).toBe('index page')
+    expect($2('#gssp').text()).toBe('getServerSideProps page')
     expect(isNaN(data2.random)).toBe(false)
     expect(data2.random).not.toBe(data.random)
   })
@@ -508,7 +510,7 @@ describe('should set-up next', () => {
       },
       {
         headers: {
-          'x-matched-path': '/',
+          'x-matched-path': '/gssp',
         },
       }
     )
diff --git a/test/production/required-server-files.test.ts b/test/production/required-server-files.test.ts
index 4f8eb6969c6c..010f7dbbf858 100644
--- a/test/production/required-server-files.test.ts
+++ b/test/production/required-server-files.test.ts
@@ -176,6 +176,29 @@ describe('should set-up next', () => {
     expect(res2.status).toBe(200)
     const { pageProps: props2 } = await res2.json()
     expect(props2.gspCalls).toBe(props.gspCalls)
+
+    const res3 = await fetchViaHTTP(appPort, '/index', undefined, {
+      redirect: 'manual',
+      headers: {
+        'x-matched-path': '/index',
+      },
+    })
+    expect(res3.status).toBe(200)
+    const $2 = cheerio.load(await res3.text())
+    const props3 = JSON.parse($2('#props').text())
+    expect(props3.gspCalls).toBeDefined()
+
+    const res4 = await fetchViaHTTP(
+      appPort,
+      `/_next/data/${next.buildId}/index.json`,
+      undefined,
+      {
+        redirect: 'manual',
+      }
+    )
+    expect(res4.status).toBe(200)
+    const { pageProps: props4 } = await res4.json()
+    expect(props4.gspCalls).toBe(props3.gspCalls)
   })
 
   it('should set correct SWR headers with notFound gsp', async () => {
@@ -218,6 +241,8 @@ describe('should set-up next', () => {
     const res2 = await fetchViaHTTP(appPort, '/gssp', undefined, {
       redirect: 'manual ',
     })
+    await next.patchFile('standalone/data.txt', 'show')
+
     expect(res2.status).toBe(404)
     expect(res2.headers.get('cache-control')).toBe(
       's-maxage=1, stale-while-revalidate'
@@ -225,18 +250,18 @@ describe('should set-up next', () => {
   })
 
   it('should render SSR page correctly', async () => {
-    const html = await renderViaHTTP(appPort, '/')
+    const html = await renderViaHTTP(appPort, '/gssp')
     const $ = cheerio.load(html)
     const data = JSON.parse($('#props').text())
 
-    expect($('#index').text()).toBe('index page')
+    expect($('#gssp').text()).toBe('getServerSideProps page')
     expect(data.hello).toBe('world')
 
-    const html2 = await renderViaHTTP(appPort, '/')
+    const html2 = await renderViaHTTP(appPort, '/gssp')
     const $2 = cheerio.load(html2)
     const data2 = JSON.parse($2('#props').text())
 
-    expect($2('#index').text()).toBe('index page')
+    expect($2('#gssp').text()).toBe('getServerSideProps page')
     expect(isNaN(data2.random)).toBe(false)
     expect(data2.random).not.toBe(data.random)
   })
@@ -300,24 +325,24 @@ describe('should set-up next', () => {
   it('should render SSR page correctly with x-matched-path', async () => {
     const html = await renderViaHTTP(appPort, '/some-other-path', undefined, {
       headers: {
-        'x-matched-path': '/',
+        'x-matched-path': '/gssp',
       },
     })
     const $ = cheerio.load(html)
     const data = JSON.parse($('#props').text())
 
-    expect($('#index').text()).toBe('index page')
+    expect($('#gssp').text()).toBe('getServerSideProps page')
     expect(data.hello).toBe('world')
 
     const html2 = await renderViaHTTP(appPort, '/some-other-path', undefined, {
       headers: {
-        'x-matched-path': '/',
+        'x-matched-path': '/gssp',
       },
     })
     const $2 = cheerio.load(html2)
     const data2 = JSON.parse($2('#props').text())
 
-    expect($2('#index').text()).toBe('index page')
+    expect($2('#gssp').text()).toBe('getServerSideProps page')
     expect(isNaN(data2.random)).toBe(false)
     expect(data2.random).not.toBe(data.random)
   })
@@ -564,7 +589,7 @@ describe('should set-up next', () => {
       },
       {
         headers: {
-          'x-matched-path': '/',
+          'x-matched-path': '/gssp',
         },
       }
     )
diff --git a/test/production/required-server-files/pages/gssp.js b/test/production/required-server-files/pages/gssp.js
index 653736f016f4..625cfb7c5138 100644
--- a/test/production/required-server-files/pages/gssp.js
+++ b/test/production/required-server-files/pages/gssp.js
@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import { useRouter } from 'next/router'
 
 export async function getServerSideProps({ res }) {
   res.setHeader('cache-control', 's-maxage=1, stale-while-revalidate')
@@ -19,6 +20,7 @@ export async function getServerSideProps({ res }) {
     props: {
       hello: 'world',
       data,
+      random: Math.random(),
       // make sure fetch if polyfilled
       example: await fetch('https://example.com').then((res) => res.text()),
     },
@@ -26,9 +28,12 @@ export async function getServerSideProps({ res }) {
 }
 
 export default function Page(props) {
+  const router = useRouter()
+
   return (
     <>
-      <p id="gsp">getStaticProps page</p>
+      <p id="gssp">getServerSideProps page</p>
+      <p id="router">{JSON.stringify(router)}</p>
       <p id="props">{JSON.stringify(props)}</p>
     </>
   )
diff --git a/test/production/required-server-files/pages/index.js b/test/production/required-server-files/pages/index.js
index 74e172d935ab..8e07e5173461 100644
--- a/test/production/required-server-files/pages/index.js
+++ b/test/production/required-server-files/pages/index.js
@@ -8,12 +8,18 @@ if (localConfig.hello !== 'world') {
   throw new Error('oof import order is wrong, _app comes first')
 }
 
-export const getServerSideProps = ({ req }) => {
+let gspCalls = 0
+
+export const getStaticProps = () => {
+  gspCalls += 1
+
   return {
     props: {
       hello: 'world',
       random: Math.random(),
+      gspCalls,
     },
+    revalidate: 1,
   }
 }
 

From 2cf6696fff59a34425cf77597e8b1a70388d7f4b Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 23 Mar 2022 16:19:58 +0100
Subject: [PATCH 07/39] Merge rsc queries handling (#35545)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../next-middleware-ssr-loader/index.ts       |  1 -
 .../next-middleware-ssr-loader/render.ts      | 21 -------------------
 packages/next/server/render.tsx               | 19 ++++++++++-------
 packages/next/server/web-server.ts            |  4 ----
 4 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
index 51caf137f478..3e07e9ebb933 100644
--- a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
+++ b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
@@ -56,7 +56,6 @@ export default async function middlewareSSRLoader(this: any) {
       buildManifest,
       reactLoadableManifest,
       serverComponentManifest: ${isServerComponent} ? rscManifest : null,
-      isServerComponent: ${isServerComponent},
       config: ${stringifiedConfig},
       buildId: ${JSON.stringify(buildId)},
     })
diff --git a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
index 77b553d2b6da..44f08b11c9ea 100644
--- a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
+++ b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts
@@ -25,7 +25,6 @@ export function getRender({
   buildManifest,
   reactLoadableManifest,
   serverComponentManifest,
-  isServerComponent,
   config,
   buildId,
 }: {
@@ -39,7 +38,6 @@ export function getRender({
   buildManifest: BuildManifest
   reactLoadableManifest: ReactLoadableManifest
   serverComponentManifest: any | null
-  isServerComponent: boolean
   config: NextConfig
   buildId: string
 }) {
@@ -109,10 +107,6 @@ export function getRender({
   const requestHandler = server.getRequestHandler()
 
   return async function render(request: NextRequest) {
-    const { nextUrl: url } = request
-    const { searchParams } = url
-    const query = Object.fromEntries(searchParams)
-
     // Preflight request
     if (request.method === 'HEAD') {
       // Hint the client that the matched route is a SSR page.
@@ -123,21 +117,6 @@ export function getRender({
       })
     }
 
-    const renderServerComponentData = isServerComponent
-      ? query.__flight__ !== undefined
-      : false
-
-    const serverComponentProps =
-      isServerComponent && query.__props__
-        ? JSON.parse(query.__props__)
-        : undefined
-
-    // Extend the render options.
-    server.updateRenderOpts({
-      renderServerComponentData,
-      serverComponentProps,
-    })
-
     const extendedReq = new WebNextRequest(request)
     const extendedRes = new WebNextResponse()
     requestHandler(extendedReq, extendedRes)
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index c13d5ff65c12..f55aad54a077 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -231,8 +231,6 @@ export type RenderOptsPartial = {
   resolvedUrl?: string
   resolvedAsPath?: string
   serverComponentManifest?: any
-  renderServerComponentData?: boolean
-  serverComponentProps?: any
   distDir?: string
   locale?: string
   locales?: string[]
@@ -451,7 +449,6 @@ export async function renderToHTML(
     getStaticPaths,
     getServerSideProps,
     serverComponentManifest,
-    serverComponentProps,
     isDataReq,
     params,
     previewProps,
@@ -505,11 +502,17 @@ export async function renderToHTML(
     return ''
   }
 
-  let { renderServerComponentData } = renderOpts
-  if (isServerComponent && query.__flight__) {
-    renderServerComponentData = true
-    delete query.__flight__
-  }
+  let renderServerComponentData = isServerComponent
+    ? query.__flight__ !== undefined
+    : false
+
+  const serverComponentProps =
+    isServerComponent && query.__props__
+      ? JSON.parse(query.__props__ as string)
+      : undefined
+
+  delete query.__flight__
+  delete query.__props__
 
   const callMiddleware = async (method: string, args: any[], props = false) => {
     let results: any = props ? {} : []
diff --git a/packages/next/server/web-server.ts b/packages/next/server/web-server.ts
index db88f5686bdf..dab158fffb9d 100644
--- a/packages/next/server/web-server.ts
+++ b/packages/next/server/web-server.ts
@@ -203,8 +203,4 @@ export default class NextWebServer extends BaseServer {
       components: result,
     }
   }
-
-  public updateRenderOpts(renderOpts: Partial<BaseServer['renderOpts']>) {
-    Object.assign(this.renderOpts, renderOpts)
-  }
 }

From 432261a1e15b253b8a56be42cc3698a4d7bdf513 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Wed, 23 Mar 2022 13:43:12 -0500
Subject: [PATCH 08/39] Add link for revalidate from notFound section (#35553)

---
 docs/api-reference/data-fetching/get-static-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api-reference/data-fetching/get-static-props.md b/docs/api-reference/data-fetching/get-static-props.md
index c5f34276ffa8..66d734a6f9fc 100644
--- a/docs/api-reference/data-fetching/get-static-props.md
+++ b/docs/api-reference/data-fetching/get-static-props.md
@@ -85,7 +85,7 @@ Learn more about [Incremental Static Regeneration](/docs/basic-features/data-fet
 
 ### `notFound`
 
-The `notFound` boolean allows the page to return a `404` status and [404 Page](/docs/advanced-features/custom-error-page.md#404-page). With `notFound: true`, the page will return a `404` even if there was a successfully generated page before. This is meant to support use cases like user-generated content getting removed by its author.
+The `notFound` boolean allows the page to return a `404` status and [404 Page](/docs/advanced-features/custom-error-page.md#404-page). With `notFound: true`, the page will return a `404` even if there was a successfully generated page before. This is meant to support use cases like user-generated content getting removed by its author. Note, `notFound` follows the same `revalidate` behavior [described here](/docs/api-reference/data-fetching/get-static-props.md#revalidate)
 
 ```js
 export async function getStaticProps(context) {

From ebe1b4cb47e2680cab214710aea4d782b885f405 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Wed, 23 Mar 2022 20:20:36 +0100
Subject: [PATCH 09/39] Upgrade react-server-dom-webpack (#35524)

There're some changes since our last update that we'll need (e.g. server context).

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 ...bpack-writer.browser.development.server.js | 1100 +++++++++++++++--
 ...ck-writer.browser.production.min.server.js |   57 +-
 .../react-server-dom-webpack.development.js   |   68 +-
 ...react-server-dom-webpack.production.min.js |   23 +-
 packages/next/package.json                    |    2 +-
 yarn.lock                                     |    9 +-
 6 files changed, 1055 insertions(+), 204 deletions(-)

diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js
index 6f4c459c3a7e..948d711b6407 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js
@@ -1,4 +1,5 @@
-/** @license React vundefined
+/**
+ * @license React
  * react-server-dom-webpack-writer.browser.development.server.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -57,9 +58,68 @@ function printWarning(level, format, args) {
 function scheduleWork(callback) {
   callback();
 }
+var VIEW_SIZE = 512;
+var currentView = null;
+var writtenBytes = 0;
+function beginWriting(destination) {
+  currentView = new Uint8Array(VIEW_SIZE);
+  writtenBytes = 0;
+}
 function writeChunk(destination, chunk) {
-  destination.enqueue(chunk);
-  return destination.desiredSize > 0;
+  if (chunk.length === 0) {
+    return;
+  }
+
+  if (chunk.length > VIEW_SIZE) {
+    // this chunk may overflow a single view which implies it was not
+    // one that is cached by the streaming renderer. We will enqueu
+    // it directly and expect it is not re-used
+    if (writtenBytes > 0) {
+      destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
+      currentView = new Uint8Array(VIEW_SIZE);
+      writtenBytes = 0;
+    }
+
+    destination.enqueue(chunk);
+    return;
+  }
+
+  var bytesToWrite = chunk;
+  var allowableBytes = currentView.length - writtenBytes;
+
+  if (allowableBytes < bytesToWrite.length) {
+    // this chunk would overflow the current view. We enqueue a full view
+    // and start a new view with the remaining chunk
+    if (allowableBytes === 0) {
+      // the current view is already full, send it
+      destination.enqueue(currentView);
+    } else {
+      // fill up the current view and apply the remaining chunk bytes
+      // to a new view.
+      currentView.set(bytesToWrite.subarray(0, allowableBytes), writtenBytes); // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
+
+      destination.enqueue(currentView);
+      bytesToWrite = bytesToWrite.subarray(allowableBytes);
+    }
+
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+
+  currentView.set(bytesToWrite, writtenBytes);
+  writtenBytes += bytesToWrite.length;
+}
+function writeChunkAndReturn(destination, chunk) {
+  writeChunk(destination, chunk); // in web streams there is no backpressure so we can alwas write more
+
+  return true;
+}
+function completeWriting(destination) {
+  if (currentView && writtenBytes > 0) {
+    destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
+    currentView = null;
+    writtenBytes = 0;
+  }
 }
 function close(destination) {
   destination.close();
@@ -68,6 +128,9 @@ var textEncoder = new TextEncoder();
 function stringToChunk(content) {
   return textEncoder.encode(content);
 }
+function stringToPrecomputedChunk(content) {
+  return textEncoder.encode(content);
+}
 function closeWithError(destination, error) {
   if (typeof destination.error === 'function') {
     // $FlowFixMe: This is an Error object or the destination accepts other types.
@@ -108,6 +171,10 @@ function processModuleChunk(request, id, moduleMetaData) {
   var row = serializeRowHeader('M', id) + json + '\n';
   return stringToChunk(row);
 }
+function processProviderChunk(request, id, contextName) {
+  var row = serializeRowHeader('P', id) + contextName + '\n';
+  return stringToChunk(row);
+}
 function processSymbolChunk(request, id, name) {
   var json = stringify(name);
   var row = serializeRowHeader('S', id) + json + '\n';
@@ -129,53 +196,758 @@ function resolveModuleMetaData(config, moduleReference) {
 // ATTENTION
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var REACT_ELEMENT_TYPE = 0xeac7;
-var REACT_PORTAL_TYPE = 0xeaca;
-var REACT_FRAGMENT_TYPE = 0xeacb;
-var REACT_STRICT_MODE_TYPE = 0xeacc;
-var REACT_PROFILER_TYPE = 0xead2;
-var REACT_PROVIDER_TYPE = 0xeacd;
-var REACT_CONTEXT_TYPE = 0xeace;
-var REACT_FORWARD_REF_TYPE = 0xead0;
-var REACT_SUSPENSE_TYPE = 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-var REACT_MEMO_TYPE = 0xead3;
-var REACT_LAZY_TYPE = 0xead4;
-var REACT_SCOPE_TYPE = 0xead7;
-var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-var REACT_OFFSCREEN_TYPE = 0xeae2;
-var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-var REACT_CACHE_TYPE = 0xeae4;
-
-if (typeof Symbol === 'function' && Symbol.for) {
-  var symbolFor = Symbol.for;
-  REACT_ELEMENT_TYPE = symbolFor('react.element');
-  REACT_PORTAL_TYPE = symbolFor('react.portal');
-  REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-  REACT_PROFILER_TYPE = symbolFor('react.profiler');
-  REACT_PROVIDER_TYPE = symbolFor('react.provider');
-  REACT_CONTEXT_TYPE = symbolFor('react.context');
-  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-  REACT_MEMO_TYPE = symbolFor('react.memo');
-  REACT_LAZY_TYPE = symbolFor('react.lazy');
-  REACT_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  REACT_CACHE_TYPE = symbolFor('react.cache');
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+var REACT_MEMO_TYPE = Symbol.for('react.memo');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
+
+// A reserved attribute.
+// It is handled by React separately and shouldn't be written to the DOM.
+var RESERVED = 0; // A simple string attribute.
+// Attributes that aren't in the filter are presumed to have this type.
+
+var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
+// "enumerated" attributes with "true" and "false" as possible values.
+// When true, it should be set to a "true" string.
+// When false, it should be set to a "false" string.
+
+var BOOLEANISH_STRING = 2; // A real boolean attribute.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+
+var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+// For any other value, should be present with that value.
+
+var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric.
+// When falsy, it should be removed.
+
+var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric.
+// When falsy, it should be removed.
+
+var POSITIVE_NUMERIC = 6;
+
+function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) {
+  this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
+  this.attributeName = attributeName;
+  this.attributeNamespace = attributeNamespace;
+  this.mustUseProperty = mustUseProperty;
+  this.propertyName = name;
+  this.type = type;
+  this.sanitizeURL = sanitizeURL;
+  this.removeEmptyString = removeEmptyString;
+} // When adding attributes to this list, be sure to also add them to
+// the `possibleStandardNames` module to ensure casing and incorrect
+// name warnings.
+
+
+var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM.
+
+var reservedProps = ['children', 'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular
+// elements (not just inputs). Now that ReactDOMInput assigns to the
+// defaultValue property -- do we need this?
+'defaultValue', 'defaultChecked', 'innerHTML', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'style'];
+
+{
+  reservedProps.push('innerText', 'textContent');
 }
 
+reservedProps.forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty
+  name, // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // A few React string attributes have a different name.
+// This is a mapping from React prop names to the attribute names.
+
+[['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']].forEach(function (_ref) {
+  var name = _ref[0],
+      attributeName = _ref[1];
+  properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
+  attributeName, // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These are "enumerated" HTML attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+
+['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
+  name.toLowerCase(), // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These are "enumerated" SVG attributes that accept "true" and "false".
+// In React, we let users pass `true` and `false` even though technically
+// these aren't boolean attributes (they are coerced to strings).
+// Since these are SVG attributes, their attribute names are case-sensitive.
+
+['autoReverse', 'externalResourcesRequired', 'focusable', 'preserveAlpha'].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
+  name, // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These are HTML boolean attributes.
+
+['allowFullScreen', 'async', // Note: there is a special case that prevents it from being written to the DOM
+// on the client side because the browsers are inconsistent. Instead we call focus().
+'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'disablePictureInPicture', 'disableRemotePlayback', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless', // Microdata
+'itemScope'].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty
+  name.toLowerCase(), // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These are the few React props that we set as DOM properties
+// rather than attributes. These are all booleans.
+
+['checked', // Note: `option.selected` is not updated if `select.multiple` is
+// disabled with `removeAttribute`. We have special logic for handling this.
+'multiple', 'muted', 'selected' // NOTE: if you add a camelCased prop to this list,
+// you'll need to set attributeName to name.toLowerCase()
+// instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty
+  name, // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These are HTML attributes that are "overloaded booleans": they behave like
+// booleans, but can also accept a string value.
+
+['capture', 'download' // NOTE: if you add a camelCased prop to this list,
+// you'll need to set attributeName to name.toLowerCase()
+// instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty
+  name, // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These are HTML attributes that must be positive numbers.
+
+['cols', 'rows', 'size', 'span' // NOTE: if you add a camelCased prop to this list,
+// you'll need to set attributeName to name.toLowerCase()
+// instead in the assignment below.
+].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty
+  name, // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These are HTML attributes that must be numbers.
+
+['rowSpan', 'start'].forEach(function (name) {
+  properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty
+  name.toLowerCase(), // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+});
+var CAMELIZE = /[\-\:]([a-z])/g;
+
+var capitalize = function (token) {
+  return token[1].toUpperCase();
+}; // This is a list of all SVG attributes that need special casing, namespacing,
+// or boolean value assignment. Regular attributes that just accept strings
+// and have the same names are omitted, just like in the HTML attribute filter.
+// Some of these attributes can be hard to find. This list was created by
+// scraping the MDN documentation.
+
+
+['accent-height', 'alignment-baseline', 'arabic-form', 'baseline-shift', 'cap-height', 'clip-path', 'clip-rule', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'dominant-baseline', 'enable-background', 'fill-opacity', 'fill-rule', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'horiz-adv-x', 'horiz-origin-x', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start', 'overline-position', 'overline-thickness', 'paint-order', 'panose-1', 'pointer-events', 'rendering-intent', 'shape-rendering', 'stop-color', 'stop-opacity', 'strikethrough-position', 'strikethrough-thickness', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', 'text-rendering', 'underline-position', 'underline-thickness', 'unicode-bidi', 'unicode-range', 'units-per-em', 'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'vector-effect', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'word-spacing', 'writing-mode', 'xmlns:xlink', 'x-height' // NOTE: if you add a camelCased prop to this list,
+// you'll need to set attributeName to name.toLowerCase()
+// instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
+  attributeName, null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // String SVG attributes with the xlink namespace.
+
+['xlink:actuate', 'xlink:arcrole', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type' // NOTE: if you add a camelCased prop to this list,
+// you'll need to set attributeName to name.toLowerCase()
+// instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
+  attributeName, 'http://www.w3.org/1999/xlink', false, // sanitizeURL
+  false);
+}); // String SVG attributes with the xml namespace.
+
+['xml:base', 'xml:lang', 'xml:space' // NOTE: if you add a camelCased prop to this list,
+// you'll need to set attributeName to name.toLowerCase()
+// instead in the assignment below.
+].forEach(function (attributeName) {
+  var name = attributeName.replace(CAMELIZE, capitalize);
+  properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
+  attributeName, 'http://www.w3.org/XML/1998/namespace', false, // sanitizeURL
+  false);
+}); // These attribute exists both in HTML and SVG.
+// The attribute name is case-sensitive in SVG so we can't just use
+// the React name like we do for attributes that exist only in HTML.
+
+['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
+  properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
+  attributeName.toLowerCase(), // attributeName
+  null, // attributeNamespace
+  false, // sanitizeURL
+  false);
+}); // These attributes accept URLs. These must not allow javascript: URLS.
+// These will also need to accept Trusted Types object in the future.
+
+var xlinkHref = 'xlinkHref';
+properties[xlinkHref] = new PropertyInfoRecord('xlinkHref', STRING, false, // mustUseProperty
+'xlink:href', 'http://www.w3.org/1999/xlink', true, // sanitizeURL
+false);
+['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
+  properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
+  attributeName.toLowerCase(), // attributeName
+  null, // attributeNamespace
+  true, // sanitizeURL
+  true);
+});
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var isUnitlessNumber = {
+  animationIterationCount: true,
+  aspectRatio: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridArea: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // SVG-related properties
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+};
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+
+function prefixKey(prefix, key) {
+  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+
+
+var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+
+Object.keys(isUnitlessNumber).forEach(function (prop) {
+  prefixes.forEach(function (prefix) {
+    isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+  });
+});
+
 var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
 
 function isArray(a) {
   return isArrayImpl(a);
 }
 
+var startInlineScript = stringToPrecomputedChunk('<script>');
+var endInlineScript = stringToPrecomputedChunk('</script>');
+var startScriptSrc = stringToPrecomputedChunk('<script src="');
+var startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+var endAsyncScript = stringToPrecomputedChunk('" async=""></script>'); // Allows us to keep track of what we've already written so we can refer back to it.
+
+var textSeparator = stringToPrecomputedChunk('<!-- -->');
+
+var styleAttributeStart = stringToPrecomputedChunk(' style="');
+var styleAssign = stringToPrecomputedChunk(':');
+var styleSeparator = stringToPrecomputedChunk(';');
+
+var attributeSeparator = stringToPrecomputedChunk(' ');
+var attributeAssign = stringToPrecomputedChunk('="');
+var attributeEnd = stringToPrecomputedChunk('"');
+var attributeEmptyString = stringToPrecomputedChunk('=""');
+
+var endOfStartTag = stringToPrecomputedChunk('>');
+var endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
+
+var selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
+
+var leadingNewline = stringToPrecomputedChunk('\n');
+
+var DOCTYPE = stringToPrecomputedChunk('<!DOCTYPE html>');
+var endTag1 = stringToPrecomputedChunk('</');
+var endTag2 = stringToPrecomputedChunk('>');
+// A placeholder is a node inside a hidden partial tree that can be filled in later, but before
+// display. It's never visible to users. We use the template tag because it can be used in every
+// type of parent. <script> tags also work in every other tag except <colgroup>.
+
+var placeholder1 = stringToPrecomputedChunk('<template id="');
+var placeholder2 = stringToPrecomputedChunk('"></template>');
+
+var startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
+var startPendingSuspenseBoundary1 = stringToPrecomputedChunk('<!--$?--><template id="');
+var startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
+var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk('<!--$!-->');
+var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
+var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
+var startSegmentHTML2 = stringToPrecomputedChunk('">');
+var endSegmentHTML = stringToPrecomputedChunk('</div>');
+var startSegmentSVG = stringToPrecomputedChunk('<svg aria-hidden="true" style="display:none" id="');
+var startSegmentSVG2 = stringToPrecomputedChunk('">');
+var endSegmentSVG = stringToPrecomputedChunk('</svg>');
+var startSegmentMathML = stringToPrecomputedChunk('<math aria-hidden="true" style="display:none" id="');
+var startSegmentMathML2 = stringToPrecomputedChunk('">');
+var endSegmentMathML = stringToPrecomputedChunk('</math>');
+var startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
+var startSegmentTable2 = stringToPrecomputedChunk('">');
+var endSegmentTable = stringToPrecomputedChunk('</table>');
+var startSegmentTableBody = stringToPrecomputedChunk('<table hidden><tbody id="');
+var startSegmentTableBody2 = stringToPrecomputedChunk('">');
+var endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
+var startSegmentTableRow = stringToPrecomputedChunk('<table hidden><tr id="');
+var startSegmentTableRow2 = stringToPrecomputedChunk('">');
+var endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
+var startSegmentColGroup = stringToPrecomputedChunk('<table hidden><colgroup id="');
+var startSegmentColGroup2 = stringToPrecomputedChunk('">');
+var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
+// The following code is the source scripts that we then minify and inline below,
+// with renamed function names that we hope don't collide:
+// const COMMENT_NODE = 8;
+// const SUSPENSE_START_DATA = '$';
+// const SUSPENSE_END_DATA = '/$';
+// const SUSPENSE_PENDING_START_DATA = '$?';
+// const SUSPENSE_FALLBACK_START_DATA = '$!';
+//
+// function clientRenderBoundary(suspenseBoundaryID) {
+//   // Find the fallback's first element.
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+//   if (!suspenseIdNode) {
+//     // The user must have already navigated away from this tree.
+//     // E.g. because the parent was hydrated.
+//     return;
+//   }
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
+//   // Tag it to be client rendered.
+//   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+//   // Tell React to retry it if the parent already hydrated.
+//   if (suspenseNode._reactRetry) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// function completeBoundary(suspenseBoundaryID, contentID) {
+//   // Find the fallback's first element.
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
+//   const contentNode = document.getElementById(contentID);
+//   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
+//   // This might also help by not causing recalcing each time we move a child from here to the target.
+//   contentNode.parentNode.removeChild(contentNode);
+//   if (!suspenseIdNode) {
+//     // The user must have already navigated away from this tree.
+//     // E.g. because the parent was hydrated. That's fine there's nothing to do
+//     // but we have to make sure that we already deleted the container node.
+//     return;
+//   }
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
+//
+//   // Clear all the existing children. This is complicated because
+//   // there can be embedded Suspense boundaries in the fallback.
+//   // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
+//   // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+//   // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+//   const parentInstance = suspenseNode.parentNode;
+//   let node = suspenseNode.nextSibling;
+//   let depth = 0;
+//   do {
+//     if (node && node.nodeType === COMMENT_NODE) {
+//       const data = node.data;
+//       if (data === SUSPENSE_END_DATA) {
+//         if (depth === 0) {
+//           break;
+//         } else {
+//           depth--;
+//         }
+//       } else if (
+//         data === SUSPENSE_START_DATA ||
+//         data === SUSPENSE_PENDING_START_DATA ||
+//         data === SUSPENSE_FALLBACK_START_DATA
+//       ) {
+//         depth++;
+//       }
+//     }
+//
+//     const nextNode = node.nextSibling;
+//     parentInstance.removeChild(node);
+//     node = nextNode;
+//   } while (node);
+//
+//   const endOfBoundary = node;
+//
+//   // Insert all the children from the contentNode between the start and end of suspense boundary.
+//   while (contentNode.firstChild) {
+//     parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
+//   }
+//   suspenseNode.data = SUSPENSE_START_DATA;
+//   if (suspenseNode._reactRetry) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// function completeSegment(containerID, placeholderID) {
+//   const segmentContainer = document.getElementById(containerID);
+//   const placeholderNode = document.getElementById(placeholderID);
+//   // We always expect both nodes to exist here because, while we might
+//   // have navigated away from the main tree, we still expect the detached
+//   // tree to exist.
+//   segmentContainer.parentNode.removeChild(segmentContainer);
+//   while (segmentContainer.firstChild) {
+//     placeholderNode.parentNode.insertBefore(
+//       segmentContainer.firstChild,
+//       placeholderNode,
+//     );
+//   }
+//   placeholderNode.parentNode.removeChild(placeholderNode);
+// }
+
+var completeSegmentFunction = 'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
+var completeBoundaryFunction = 'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
+var clientRenderFunction = 'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
+var completeSegmentScript1Full = stringToPrecomputedChunk(completeSegmentFunction + ';$RS("');
+var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
+var completeSegmentScript2 = stringToPrecomputedChunk('","');
+var completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
+var completeBoundaryScript1Full = stringToPrecomputedChunk(completeBoundaryFunction + ';$RC("');
+var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
+var completeBoundaryScript2 = stringToPrecomputedChunk('","');
+var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
+var clientRenderScript1Full = stringToPrecomputedChunk(clientRenderFunction + ';$RX("');
+var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
+var clientRenderScript2 = stringToPrecomputedChunk('")</script>');
+
+var rendererSigil;
+
+{
+  // Use this to detect multiple renderers using the same context
+  rendererSigil = {};
+} // Used to store the parent path of all context overrides in a shared linked list.
+// Forming a reverse tree.
+
+
+var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
+// This global (actually thread local) state represents what state all those "current",
+// fields are currently in.
+
+var currentActiveSnapshot = null;
+
+function popNode(prev) {
+  {
+    prev.context._currentValue = prev.parentValue;
+  }
+}
+
+function pushNode(next) {
+  {
+    next.context._currentValue = next.value;
+  }
+}
+
+function popToNearestCommonAncestor(prev, next) {
+  if (prev === next) ; else {
+    popNode(prev);
+    var parentPrev = prev.parent;
+    var parentNext = next.parent;
+
+    if (parentPrev === null) {
+      if (parentNext !== null) {
+        throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
+      }
+    } else {
+      if (parentNext === null) {
+        throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
+      }
+
+      popToNearestCommonAncestor(parentPrev, parentNext); // On the way back, we push the new ones that weren't common.
+
+      pushNode(next);
+    }
+  }
+}
+
+function popAllPrevious(prev) {
+  popNode(prev);
+  var parentPrev = prev.parent;
+
+  if (parentPrev !== null) {
+    popAllPrevious(parentPrev);
+  }
+}
+
+function pushAllNext(next) {
+  var parentNext = next.parent;
+
+  if (parentNext !== null) {
+    pushAllNext(parentNext);
+  }
+
+  pushNode(next);
+}
+
+function popPreviousToCommonLevel(prev, next) {
+  popNode(prev);
+  var parentPrev = prev.parent;
+
+  if (parentPrev === null) {
+    throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
+  }
+
+  if (parentPrev.depth === next.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(parentPrev, next);
+  } else {
+    // We must still be deeper.
+    popPreviousToCommonLevel(parentPrev, next);
+  }
+}
+
+function popNextToCommonLevel(prev, next) {
+  var parentNext = next.parent;
+
+  if (parentNext === null) {
+    throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
+  }
+
+  if (prev.depth === parentNext.depth) {
+    // We found the same level. Now we just need to find a shared ancestor.
+    popToNearestCommonAncestor(prev, parentNext);
+  } else {
+    // We must still be deeper.
+    popNextToCommonLevel(prev, parentNext);
+  }
+
+  pushNode(next);
+} // Perform context switching to the new snapshot.
+// To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
+// updating all the context's current values. That way reads, always just read the current value.
+// At the cost of updating contexts even if they're never read by this subtree.
+
+
+function switchContext(newSnapshot) {
+  // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
+  // We also need to update any new contexts that are now on the stack with the deepest value.
+  // The easiest way to update new contexts is to just reapply them in reverse order from the
+  // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
+  // for that. Therefore this algorithm is recursive.
+  // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
+  // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
+  // 3) Then we reapply new contexts on the way back up the stack.
+  var prev = currentActiveSnapshot;
+  var next = newSnapshot;
+
+  if (prev !== next) {
+    if (prev === null) {
+      // $FlowFixMe: This has to be non-null since it's not equal to prev.
+      pushAllNext(next);
+    } else if (next === null) {
+      popAllPrevious(prev);
+    } else if (prev.depth === next.depth) {
+      popToNearestCommonAncestor(prev, next);
+    } else if (prev.depth > next.depth) {
+      popPreviousToCommonLevel(prev, next);
+    } else {
+      popNextToCommonLevel(prev, next);
+    }
+
+    currentActiveSnapshot = next;
+  }
+}
+function pushProvider(context, nextValue) {
+  var prevValue;
+
+  {
+    prevValue = context._currentValue;
+    context._currentValue = nextValue;
+
+    {
+      if (context._currentRenderer !== undefined && context._currentRenderer !== null && context._currentRenderer !== rendererSigil) {
+        error('Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.');
+      }
+
+      context._currentRenderer = rendererSigil;
+    }
+  }
+
+  var prevNode = currentActiveSnapshot;
+  var newNode = {
+    parent: prevNode,
+    depth: prevNode === null ? 0 : prevNode.depth + 1,
+    context: context,
+    parentValue: prevValue,
+    value: nextValue
+  };
+  currentActiveSnapshot = newNode;
+  return newNode;
+}
+function popProvider() {
+  var prevSnapshot = currentActiveSnapshot;
+
+  if (prevSnapshot === null) {
+    throw new Error('Tried to pop a Context at the root of the app. This is a bug in React.');
+  }
+
+  {
+    var value = prevSnapshot.parentValue;
+
+    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+      prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
+    } else {
+      prevSnapshot.context._currentValue = value;
+    }
+  }
+
+  return currentActiveSnapshot = prevSnapshot.parent;
+}
+function getActiveContext() {
+  return currentActiveSnapshot;
+}
+function readContext(context) {
+  var value =  context._currentValue ;
+  return value;
+}
+
+function readContext$1(context) {
+  {
+    if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
+      error('Only ServerContext is supported in Flight');
+    }
+
+    if (currentCache === null) {
+      error('Context can only be read while React is rendering. ' + 'In classes, you can read it in the render method or getDerivedStateFromProps. ' + 'In function components, you can read it directly in the function body, but not ' + 'inside Hooks like useReducer() or useMemo().');
+    }
+  }
+
+  return readContext(context);
+}
+
+var Dispatcher = {
+  useMemo: function (nextCreate) {
+    return nextCreate();
+  },
+  useCallback: function (callback) {
+    return callback;
+  },
+  useDebugValue: function () {},
+  useDeferredValue: unsupportedHook,
+  useTransition: unsupportedHook,
+  getCacheForType: function (resourceType) {
+    if (!currentCache) {
+      throw new Error('Reading the cache is only supported while rendering.');
+    }
+
+    var entry = currentCache.get(resourceType);
+
+    if (entry === undefined) {
+      entry = resourceType(); // TODO: Warn if undefined?
+
+      currentCache.set(resourceType, entry);
+    }
+
+    return entry;
+  },
+  readContext: readContext$1,
+  useContext: readContext$1,
+  useReducer: unsupportedHook,
+  useRef: unsupportedHook,
+  useState: unsupportedHook,
+  useInsertionEffect: unsupportedHook,
+  useLayoutEffect: unsupportedHook,
+  useImperativeHandle: unsupportedHook,
+  useEffect: unsupportedHook,
+  useId: unsupportedHook,
+  useMutableSource: unsupportedHook,
+  useSyncExternalStore: unsupportedHook,
+  useCacheRefresh: function () {
+    return unsupportedRefresh;
+  }
+};
+
+function unsupportedHook() {
+  throw new Error('This Hook is not supported in Server Components.');
+}
+
+function unsupportedRefresh() {
+  if (!currentCache) {
+    throw new Error('Refreshing the cache is not supported in Server Components.');
+  }
+}
+
+var currentCache = null;
+function setCurrentCache(cache) {
+  currentCache = cache;
+  return currentCache;
+}
+function getCurrentCache() {
+  return currentCache;
+}
+
+var ContextRegistry = ReactSharedInternals.ContextRegistry;
+function getOrCreateServerContext(globalName) {
+  if (!ContextRegistry[globalName]) {
+    ContextRegistry[globalName] = React.createServerContext(globalName, REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
+  }
+
+  return ContextRegistry[globalName];
+}
+
 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error) {
@@ -185,7 +957,7 @@ function defaultErrorHandler(error) {
 var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2;
-function createRequest(model, bundlerConfig, onError) {
+function createRequest(model, bundlerConfig, onError, context) {
   var pingedSegments = [];
   var request = {
     status: OPEN,
@@ -201,17 +973,25 @@ function createRequest(model, bundlerConfig, onError) {
     completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenModules: new Map(),
+    writtenProviders: new Map(),
     onError: onError === undefined ? defaultErrorHandler : onError,
     toJSON: function (key, value) {
       return resolveModelToJSON(request, this, key, value);
     }
   };
   request.pendingChunks++;
-  var rootSegment = createSegment(request, model);
+  var rootContext = createRootContext(context);
+  var rootSegment = createSegment(request, model, rootContext);
   pingedSegments.push(rootSegment);
   return request;
 }
 
+function createRootContext(reqContext) {
+  return importServerContexts(reqContext);
+}
+
+var POP = {};
+
 function attemptResolveElement(type, key, ref, props) {
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
@@ -245,6 +1025,14 @@ function attemptResolveElement(type, key, ref, props) {
     }
 
     switch (type.$$typeof) {
+      case REACT_LAZY_TYPE:
+        {
+          var payload = type._payload;
+          var init = type._init;
+          var wrappedType = init(payload);
+          return attemptResolveElement(wrappedType, key, ref, props);
+        }
+
       case REACT_FORWARD_REF_TYPE:
         {
           var render = type.render;
@@ -255,6 +1043,32 @@ function attemptResolveElement(type, key, ref, props) {
         {
           return attemptResolveElement(type.type, key, ref, props);
         }
+
+      case REACT_PROVIDER_TYPE:
+        {
+          pushProvider(type._context, props.value);
+
+          {
+            var extraKeys = Object.keys(props).filter(function (value) {
+              if (value === 'children' || value === 'value') {
+                return false;
+              }
+
+              return true;
+            });
+
+            if (extraKeys.length !== 0) {
+              error('ServerContext can only have a value prop and children. Found: %s', JSON.stringify(extraKeys));
+            }
+          }
+
+          return [REACT_ELEMENT_TYPE, type, key, // Rely on __popProvider being serialized last to pop the provider.
+          {
+            value: props.value,
+            children: props.children,
+            __pop: POP
+          }];
+        }
     }
   }
 
@@ -272,11 +1086,12 @@ function pingSegment(request, segment) {
   }
 }
 
-function createSegment(request, model) {
+function createSegment(request, model, context) {
   var id = request.nextChunkId++;
   var segment = {
     id: id,
     model: model,
+    context: context,
     ping: function () {
       return pingSegment(request, segment);
     }
@@ -305,8 +1120,7 @@ function escapeStringValue(value) {
 function isObjectPrototype(object) {
   if (!object) {
     return false;
-  } // $FlowFixMe
-
+  }
 
   var ObjectPrototype = Object.prototype;
 
@@ -405,8 +1219,7 @@ function describeValueForErrorMessage(value) {
 
 function describeObjectForErrorMessage(objectOrArray, expandedName) {
   if (isArray(objectOrArray)) {
-    var str = '['; // $FlowFixMe: Should be refined by now.
-
+    var str = '[';
     var array = objectOrArray;
 
     for (var i = 0; i < array.length; i++) {
@@ -431,8 +1244,7 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
     str += ']';
     return str;
   } else {
-    var _str = '{'; // $FlowFixMe: Should be refined by now.
-
+    var _str = '{';
     var object = objectOrArray;
     var names = Object.keys(object);
 
@@ -462,6 +1274,8 @@ function describeObjectForErrorMessage(objectOrArray, expandedName) {
   }
 }
 
+var insideContextProps = null;
+var isInsideContextValue = false;
 function resolveModelToJSON(request, parent, key, value) {
   {
     // $FlowFixMe
@@ -476,29 +1290,55 @@ function resolveModelToJSON(request, parent, key, value) {
   switch (value) {
     case REACT_ELEMENT_TYPE:
       return '$';
+  }
 
-    case REACT_LAZY_TYPE:
-      throw new Error('React Lazy Components are not yet supported on the server.');
+  {
+    if (parent[0] === REACT_ELEMENT_TYPE && parent[1] && parent[1].$$typeof === REACT_PROVIDER_TYPE && key === '3') {
+      insideContextProps = value;
+    } else if (insideContextProps === parent && key === 'value') {
+      isInsideContextValue = true;
+    } else if (insideContextProps === parent && key === 'children') {
+      isInsideContextValue = false;
+    }
   } // Resolve server components.
 
 
-  while (typeof value === 'object' && value !== null && value.$$typeof === REACT_ELEMENT_TYPE) {
-    // TODO: Concatenate keys of parents onto children.
-    var element = value;
+  while (typeof value === 'object' && value !== null && (value.$$typeof === REACT_ELEMENT_TYPE || value.$$typeof === REACT_LAZY_TYPE)) {
+    {
+      if (isInsideContextValue) {
+        error('React elements are not allowed in ServerContext');
+      }
+    }
 
     try {
-      // Attempt to render the server component.
-      value = attemptResolveElement(element.type, element.key, element.ref, element.props);
+      switch (value.$$typeof) {
+        case REACT_ELEMENT_TYPE:
+          {
+            // TODO: Concatenate keys of parents onto children.
+            var element = value; // Attempt to render the server component.
+
+            value = attemptResolveElement(element.type, element.key, element.ref, element.props);
+            break;
+          }
+
+        case REACT_LAZY_TYPE:
+          {
+            var payload = value._payload;
+            var init = value._init;
+            value = init(payload);
+            break;
+          }
+      }
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
         request.pendingChunks++;
-        var newSegment = createSegment(request, value);
+        var newSegment = createSegment(request, value, getActiveContext());
         var ping = newSegment.ping;
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
       } else {
-        reportError(request, x); // Something errored. We'll still send everything we have up until this point.
+        logRecoverableError(request, x); // Something errored. We'll still send everything we have up until this point.
         // We'll replace this element with a lazy reference that throws on the client
         // once it gets rendered.
 
@@ -559,6 +1399,28 @@ function resolveModelToJSON(request, parent, key, value) {
         emitErrorChunk(request, _errorId, x);
         return serializeByValueID(_errorId);
       }
+    } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
+      var providerKey = value._context._globalName;
+      var writtenProviders = request.writtenProviders;
+      var providerId = writtenProviders.get(key);
+
+      if (providerId === undefined) {
+        request.pendingChunks++;
+        providerId = request.nextChunkId++;
+        writtenProviders.set(providerKey, providerId);
+        emitProviderChunk(request, providerId, providerKey);
+      }
+
+      return serializeByValueID(providerId);
+    } else if (value === POP) {
+      popProvider();
+
+      {
+        insideContextProps = null;
+        isInsideContextValue = false;
+      }
+
+      return undefined;
     }
 
     {
@@ -627,7 +1489,7 @@ function resolveModelToJSON(request, parent, key, value) {
   throw new Error("Type " + typeof value + " is not supported in client component props. " + ("Remove " + describeKeyForErrorMessage(key) + " from this object, or avoid the entire object: " + describeObjectForErrorMessage(parent)));
 }
 
-function reportError(request, error) {
+function logRecoverableError(request, error) {
   var onError = request.onError;
   onError(error);
 }
@@ -677,7 +1539,14 @@ function emitSymbolChunk(request, id, name) {
   request.completedModuleChunks.push(processedChunk);
 }
 
+function emitProviderChunk(request, id, contextName) {
+  var processedChunk = processProviderChunk(request, id, contextName);
+  request.completedJSONChunks.push(processedChunk);
+}
+
 function retrySegment(request, segment) {
+  switchContext(segment.context);
+
   try {
     var _value3 = segment.model;
 
@@ -700,7 +1569,7 @@ function retrySegment(request, segment) {
       x.then(ping, ping);
       return;
     } else {
-      reportError(request, x); // This errored, we need to serialize this error to the
+      logRecoverableError(request, x); // This errored, we need to serialize this error to the
 
       emitErrorChunk(request, segment.id, x);
     }
@@ -709,9 +1578,9 @@ function retrySegment(request, segment) {
 
 function performWork(request) {
   var prevDispatcher = ReactCurrentDispatcher.current;
-  var prevCache = currentCache;
+  var prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = Dispatcher;
-  currentCache = request.cache;
+  setCurrentCache(request.cache);
 
   try {
     var pingedSegments = request.pingedSegments;
@@ -726,15 +1595,16 @@ function performWork(request) {
       flushCompletedChunks(request, request.destination);
     }
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
-    currentCache = prevCache;
+    setCurrentCache(prevCache);
   }
 }
 
 function flushCompletedChunks(request, destination) {
+  beginWriting();
 
   try {
     // We emit module chunks first in the stream so that
@@ -745,8 +1615,9 @@ function flushCompletedChunks(request, destination) {
     for (; i < moduleChunks.length; i++) {
       request.pendingChunks--;
       var chunk = moduleChunks[i];
+      var keepWriting = writeChunkAndReturn(destination, chunk);
 
-      if (!writeChunk(destination, chunk)) {
+      if (!keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -762,7 +1633,9 @@ function flushCompletedChunks(request, destination) {
       request.pendingChunks--;
       var _chunk = jsonChunks[i];
 
-      if (!writeChunk(destination, _chunk)) {
+      var _keepWriting = writeChunkAndReturn(destination, _chunk);
+
+      if (!_keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -780,7 +1653,9 @@ function flushCompletedChunks(request, destination) {
       request.pendingChunks--;
       var _chunk2 = errorChunks[i];
 
-      if (!writeChunk(destination, _chunk2)) {
+      var _keepWriting2 = writeChunkAndReturn(destination, _chunk2);
+
+      if (!_keepWriting2) {
         request.destination = null;
         i++;
         break;
@@ -789,6 +1664,7 @@ function flushCompletedChunks(request, destination) {
 
     errorChunks.splice(0, i);
   } finally {
+    completeWriting(destination);
   }
 
   if (request.pendingChunks === 0) {
@@ -813,83 +1689,51 @@ function startFlowing(request, destination) {
     return;
   }
 
+  if (request.destination !== null) {
+    // We're already flowing.
+    return;
+  }
+
   request.destination = destination;
 
   try {
     flushCompletedChunks(request, destination);
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   }
 }
 
-function unsupportedHook() {
-  throw new Error('This Hook is not supported in Server Components.');
-}
-
-function unsupportedRefresh() {
-  if (!currentCache) {
-    throw new Error('Refreshing the cache is not supported in Server Components.');
-  }
-}
-
-var currentCache = null;
-var Dispatcher = {
-  useMemo: function (nextCreate) {
-    return nextCreate();
-  },
-  useCallback: function (callback) {
-    return callback;
-  },
-  useDebugValue: function () {},
-  useDeferredValue: unsupportedHook,
-  useTransition: unsupportedHook,
-  getCacheForType: function (resourceType) {
-    if (!currentCache) {
-      throw new Error('Reading the cache is only supported while rendering.');
-    }
-
-    var entry = currentCache.get(resourceType);
-
-    if (entry === undefined) {
-      entry = resourceType(); // TODO: Warn if undefined?
-
-      currentCache.set(resourceType, entry);
+function importServerContexts(contexts) {
+  if (contexts) {
+    var prevContext = getActiveContext();
+    switchContext(rootContextSnapshot);
+
+    for (var i = 0; i < contexts.length; i++) {
+      var _contexts$i = contexts[i],
+          name = _contexts$i[0],
+          _value4 = _contexts$i[1];
+      var context = getOrCreateServerContext(name);
+      pushProvider(context, _value4);
     }
 
-    return entry;
-  },
-  readContext: unsupportedHook,
-  useContext: unsupportedHook,
-  useReducer: unsupportedHook,
-  useRef: unsupportedHook,
-  useState: unsupportedHook,
-  useInsertionEffect: unsupportedHook,
-  useLayoutEffect: unsupportedHook,
-  useImperativeHandle: unsupportedHook,
-  useEffect: unsupportedHook,
-  useId: unsupportedHook,
-  useMutableSource: unsupportedHook,
-  useSyncExternalStore: unsupportedHook,
-  useCacheRefresh: function () {
-    return unsupportedRefresh;
+    var importedContext = getActiveContext();
+    switchContext(prevContext);
+    return importedContext;
   }
-};
 
-function renderToReadableStream(model, webpackMap, options) {
-  var request = createRequest(model, webpackMap, options ? options.onError : undefined);
+  return rootContextSnapshot;
+}
+
+function renderToReadableStream(model, webpackMap, options, context) {
+  var request = createRequest(model, webpackMap, options ? options.onError : undefined, context);
   var stream = new ReadableStream({
+    type: 'bytes',
     start: function (controller) {
       startWork(request);
     },
     pull: function (controller) {
-      // Pull is called immediately even if the stream is not passed to anything.
-      // That's buffering too early. We want to start buffering once the stream
-      // is actually used by something so we can give it the best result possible
-      // at that point.
-      if (stream.locked) {
-        startFlowing(request, controller);
-      }
+      startFlowing(request, controller);
     },
     cancel: function (reason) {}
   });
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js
index 2977e6eea4d4..bb235427138f 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js
@@ -1,4 +1,5 @@
-/** @license React vundefined
+/**
+ * @license React
  * react-server-dom-webpack-writer.browser.production.min.server.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -6,21 +7,39 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var h=require("react");function n(a,d){a.enqueue(d);return 0<a.desiredSize}var q=new TextEncoder;function r(a,d){"function"===typeof a.error?a.error(d):a.close()}var t=JSON.stringify,u=Symbol.for("react.module.reference"),v=60103,w=60107,x=60112,y=60115,z=60116;if("function"===typeof Symbol&&Symbol.for){var A=Symbol.for;v=A("react.element");w=A("react.fragment");x=A("react.forward_ref");y=A("react.memo");z=A("react.lazy")}var B=Array.isArray,C=h.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
-function G(a){console.error(a)}function H(a,d,c){var b=[],e={status:0,fatalError:null,destination:null,bundlerConfig:d,cache:new Map,nextChunkId:0,pendingChunks:0,pingedSegments:b,completedModuleChunks:[],completedJSONChunks:[],completedErrorChunks:[],writtenSymbols:new Map,writtenModules:new Map,onError:void 0===c?G:c,toJSON:function(a,b){return I(e,this,a,b)}};e.pendingChunks++;a=J(e,a);b.push(a);return e}
-function K(a,d,c,b){if(null!==c&&void 0!==c)throw Error("Refs cannot be used in server components, nor passed to client components.");if("function"===typeof a)return a(b);if("string"===typeof a)return[v,a,d,b];if("symbol"===typeof a)return a===w?b.children:[v,a,d,b];if(null!=a&&"object"===typeof a){if(a.$$typeof===u)return[v,a,d,b];switch(a.$$typeof){case x:return a=a.render,a(b,void 0);case y:return K(a.type,d,c,b)}}throw Error("Unsupported server component type: "+L(a));}
-function J(a,d){var c={id:a.nextChunkId++,model:d,ping:function(){var b=a.pingedSegments;b.push(c);1===b.length&&M(a)}};return c}function N(a){return Object.prototype.toString.call(a).replace(/^\[object (.*)\]$/,function(a,c){return c})}function O(a){var d=JSON.stringify(a);return'"'+a+'"'===d?a:d}
-function L(a){switch(typeof a){case "string":return JSON.stringify(10>=a.length?a:a.substr(0,10)+"...");case "object":if(B(a))return"[...]";a=N(a);return"Object"===a?"{...}":a;case "function":return"function";default:return String(a)}}
-function P(a,d){if(B(a)){for(var c="[",b=0;b<a.length;b++){0<b&&(c+=", ");if(6<b){c+="...";break}var e=a[b];c=""+b===d&&"object"===typeof e&&null!==e?c+P(e):c+L(e)}return c+"]"}c="{";b=Object.keys(a);for(e=0;e<b.length;e++){0<e&&(c+=", ");if(6<e){c+="...";break}var k=b[e];c+=O(k)+": ";var f=a[k];c=k===d&&"object"===typeof f&&null!==f?c+P(f):c+L(f)}return c+"}"}
-function I(a,d,c,b){switch(b){case v:return"$";case z:throw Error("React Lazy Components are not yet supported on the server.");}for(;"object"===typeof b&&null!==b&&b.$$typeof===v;){var e=b;try{b=K(e.type,e.key,e.ref,e.props)}catch(m){if("object"===typeof m&&null!==m&&"function"===typeof m.then)return a.pendingChunks++,a=J(a,b),d=a.ping,m.then(d,d),"@"+a.id.toString(16);R(a,m);a.pendingChunks++;d=a.nextChunkId++;S(a,d,m);return"@"+d.toString(16)}}if(null===b)return null;if("object"===typeof b){if(b.$$typeof===
-u){e=b.filepath+"#"+b.name;var k=a.writtenModules,f=k.get(e);if(void 0!==f)return d[0]===v&&"1"===c?"@"+f.toString(16):"$"+f.toString(16);try{var l=a.bundlerConfig[b.filepath][b.name];a.pendingChunks++;var g=a.nextChunkId++,D=t(l),E="M"+g.toString(16)+":"+D+"\n";var F=q.encode(E);a.completedModuleChunks.push(F);k.set(e,g);return d[0]===v&&"1"===c?"@"+g.toString(16):"$"+g.toString(16)}catch(m){return a.pendingChunks++,d=a.nextChunkId++,S(a,d,m),"$"+d.toString(16)}}return b}if("string"===typeof b)return a=
-"$"===b[0]||"@"===b[0]?"$"+b:b,a;if("boolean"===typeof b||"number"===typeof b||"undefined"===typeof b)return b;if("function"===typeof b){if(/^on[A-Z]/.test(c))throw Error("Event handlers cannot be passed to client component props. Remove "+(O(c)+" from these props if possible: "+P(d)+"\nIf you need interactivity, consider converting part of this to a client component."));throw Error("Functions cannot be passed directly to client components because they're not serializable. Remove "+(O(c)+" ("+(b.displayName||
-b.name||"function")+") from this object, or avoid the entire object: "+P(d)));}if("symbol"===typeof b){l=a.writtenSymbols;g=l.get(b);if(void 0!==g)return"$"+g.toString(16);g=b.description;if(Symbol.for(g)!==b)throw Error("Only global symbols received from Symbol.for(...) can be passed to client components. The symbol Symbol.for("+(b.description+") cannot be found among global symbols. Remove ")+(O(c)+" from this object, or avoid the entire object: "+P(d)));a.pendingChunks++;d=a.nextChunkId++;c=t(g);
-c="S"+d.toString(16)+":"+c+"\n";c=q.encode(c);a.completedModuleChunks.push(c);l.set(b,d);return"$"+d.toString(16)}if("bigint"===typeof b)throw Error("BigInt ("+b+") is not yet supported in client component props. Remove "+(O(c)+" from this object or use a plain number instead: "+P(d)));throw Error("Type "+typeof b+" is not supported in client component props. Remove "+(O(c)+" from this object, or avoid the entire object: "+P(d)));}function R(a,d){a=a.onError;a(d)}
-function T(a,d){null!==a.destination?(a.status=2,r(a.destination,d)):(a.status=1,a.fatalError=d)}function S(a,d,c){var b="";try{if(c instanceof Error){var e=String(c.message);b=String(c.stack)}else e="Error: "+c}catch(k){e="An error occurred but serializing the error message failed."}c={message:e,stack:b};d="E"+d.toString(16)+":"+t(c)+"\n";d=q.encode(d);a.completedErrorChunks.push(d)}
-function M(a){var d=C.current,c=U;C.current=V;U=a.cache;try{var b=a.pingedSegments;a.pingedSegments=[];for(var e=0;e<b.length;e++){var k=b[e];var f=a;try{for(var l=k.model;"object"===typeof l&&null!==l&&l.$$typeof===v;){var g=l;k.model=l;l=K(g.type,g.key,g.ref,g.props)}var D=k.id,E=t(l,f.toJSON),F="J"+D.toString(16)+":"+E+"\n";var m=q.encode(F);f.completedJSONChunks.push(m)}catch(p){if("object"===typeof p&&null!==p&&"function"===typeof p.then){var Q=k.ping;p.then(Q,Q)}else R(f,p),S(f,k.id,p)}}null!==
-a.destination&&W(a,a.destination)}catch(p){R(a,p),T(a,p)}finally{C.current=d,U=c}}
-function W(a,d){for(var c=a.completedModuleChunks,b=0;b<c.length;b++)if(a.pendingChunks--,!n(d,c[b])){a.destination=null;b++;break}c.splice(0,b);c=a.completedJSONChunks;for(b=0;b<c.length;b++)if(a.pendingChunks--,!n(d,c[b])){a.destination=null;b++;break}c.splice(0,b);c=a.completedErrorChunks;for(b=0;b<c.length;b++)if(a.pendingChunks--,!n(d,c[b])){a.destination=null;b++;break}c.splice(0,b);0===a.pendingChunks&&d.close()}
-function X(){throw Error("This Hook is not supported in Server Components.");}function Y(){if(!U)throw Error("Refreshing the cache is not supported in Server Components.");}
-var U=null,V={useMemo:function(a){return a()},useCallback:function(a){return a},useDebugValue:function(){},useDeferredValue:X,useTransition:X,getCacheForType:function(a){if(!U)throw Error("Reading the cache is only supported while rendering.");var d=U.get(a);void 0===d&&(d=a(),U.set(a,d));return d},readContext:X,useContext:X,useReducer:X,useRef:X,useState:X,useInsertionEffect:X,useLayoutEffect:X,useImperativeHandle:X,useEffect:X,useId:X,useMutableSource:X,useSyncExternalStore:X,useCacheRefresh:function(){return Y}};
-exports.renderToReadableStream=function(a,d,c){var b=H(a,d,c?c.onError:void 0),e=new ReadableStream({start:function(){M(b)},pull:function(a){if(e.locked)if(1===b.status)b.status=2,r(a,b.fatalError);else if(2!==b.status){b.destination=a;try{W(b,a)}catch(f){R(b,f),T(b,f)}}},cancel:function(){}});return e};
+'use strict';var e=require("react"),k=null,m=0;function n(a,b){if(0!==b.length)if(512<b.length)0<m&&(a.enqueue(new Uint8Array(k.buffer,0,m)),k=new Uint8Array(512),m=0),a.enqueue(b);else{var d=k.length-m;d<b.length&&(0===d?a.enqueue(k):(k.set(b.subarray(0,d),m),a.enqueue(k),b=b.subarray(d)),k=new Uint8Array(512),m=0);k.set(b,m);m+=b.length}return!0}var p=new TextEncoder;function r(a){return p.encode(a)}function u(a,b){"function"===typeof a.error?a.error(b):a.close()}
+var w=JSON.stringify,x=Symbol.for("react.module.reference"),y=Symbol.for("react.element"),aa=Symbol.for("react.fragment"),z=Symbol.for("react.provider"),ba=Symbol.for("react.forward_ref"),ca=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),B=Symbol.for("react.default_value");function C(a,b,d,c,f,g,h){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=c;this.attributeNamespace=f;this.mustUseProperty=d;this.propertyName=a;this.type=b;this.sanitizeURL=g;this.removeEmptyString=h}var D="children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ");
+D.push("innerText","textContent");D.forEach(function(a){new C(a,0,!1,a,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){new C(a[0],1,!1,a[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(a){new C(a,2,!1,a.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){new C(a,2,!1,a,null,!1,!1)});
+"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){new C(a,3,!1,a.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(a){new C(a,3,!0,a,null,!1,!1)});["capture","download"].forEach(function(a){new C(a,4,!1,a,null,!1,!1)});
+["cols","rows","size","span"].forEach(function(a){new C(a,6,!1,a,null,!1,!1)});["rowSpan","start"].forEach(function(a){new C(a,5,!1,a.toLowerCase(),null,!1,!1)});var E=/[\-:]([a-z])/g;function F(a){return a[1].toUpperCase()}
+"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=a.replace(E,
+F);new C(b,1,!1,a,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(E,F);new C(b,1,!1,a,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(E,F);new C(b,1,!1,a,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(a){new C(a,1,!1,a.toLowerCase(),null,!1,!1)});
+new C("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(a){new C(a,1,!1,a.toLowerCase(),null,!0,!0)});
+var G={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,
+fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},da=["Webkit","ms","Moz","O"];Object.keys(G).forEach(function(a){da.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);G[b]=G[a]})});var H=Array.isArray;r("<script>");r("\x3c/script>");r('<script src="');r('<script type="module" src="');r('" async="">\x3c/script>');r("\x3c!-- --\x3e");r(' style="');r(":");r(";");r(" ");r('="');r('"');r('=""');r(">");
+r("/>");r(' selected=""');r("\n");r("<!DOCTYPE html>");r("</");r(">");r('<template id="');r('"></template>');r("\x3c!--$--\x3e");r('\x3c!--$?--\x3e<template id="');r('"></template>');r("\x3c!--$!--\x3e");r("\x3c!--/$--\x3e");r('<div hidden id="');r('">');r("</div>");r('<svg aria-hidden="true" style="display:none" id="');r('">');r("</svg>");r('<math aria-hidden="true" style="display:none" id="');r('">');r("</math>");r('<table hidden id="');r('">');r("</table>");r('<table hidden><tbody id="');r('">');
+r("</tbody></table>");r('<table hidden><tr id="');r('">');r("</tr></table>");r('<table hidden><colgroup id="');r('">');r("</colgroup></table>");r('function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("');r('$RS("');r('","');r('")\x3c/script>');r('function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("');
+r('$RC("');r('","');r('")\x3c/script>');r('function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()};$RX("');r('$RX("');r('")\x3c/script>');var I=null;
+function J(a,b){if(a!==b){a.context._currentValue=a.parentValue;a=a.parent;var d=b.parent;if(null===a){if(null!==d)throw Error("The stacks must reach the root at the same time. This is a bug in React.");}else{if(null===d)throw Error("The stacks must reach the root at the same time. This is a bug in React.");J(a,d);b.context._currentValue=b.value}}}function K(a){a.context._currentValue=a.parentValue;a=a.parent;null!==a&&K(a)}
+function L(a){var b=a.parent;null!==b&&L(b);a.context._currentValue=a.value}function ea(a,b){a.context._currentValue=a.parentValue;a=a.parent;if(null===a)throw Error("The depth must equal at least at zero before reaching the root. This is a bug in React.");a.depth===b.depth?J(a,b):ea(a,b)}
+function fa(a,b){var d=b.parent;if(null===d)throw Error("The depth must equal at least at zero before reaching the root. This is a bug in React.");a.depth===d.depth?J(a,d):fa(a,d);b.context._currentValue=b.value}function M(a){var b=I;b!==a&&(null===b?L(a):null===a?K(b):b.depth===a.depth?J(b,a):b.depth>a.depth?ea(b,a):fa(b,a),I=a)}function ha(a,b){var d=a._currentValue;a._currentValue=b;var c=I;return I=a={parent:c,depth:null===c?0:c.depth+1,context:a,parentValue:d,value:b}}
+function ia(a){return a._currentValue}
+var la={useMemo:function(a){return a()},useCallback:function(a){return a},useDebugValue:function(){},useDeferredValue:N,useTransition:N,getCacheForType:function(a){if(!R)throw Error("Reading the cache is only supported while rendering.");var b=R.get(a);void 0===b&&(b=a(),R.set(a,b));return b},readContext:ia,useContext:ia,useReducer:N,useRef:N,useState:N,useInsertionEffect:N,useLayoutEffect:N,useImperativeHandle:N,useEffect:N,useId:N,useMutableSource:N,useSyncExternalStore:N,useCacheRefresh:function(){return ja}};
+function N(){throw Error("This Hook is not supported in Server Components.");}function ja(){if(!R)throw Error("Refreshing the cache is not supported in Server Components.");}var R=null,ma=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=ma.ContextRegistry,T=ma.ReactCurrentDispatcher;function na(a){console.error(a)}
+function oa(a,b,d,c){var f=[],g={status:0,fatalError:null,destination:null,bundlerConfig:b,cache:new Map,nextChunkId:0,pendingChunks:0,pingedSegments:f,completedModuleChunks:[],completedJSONChunks:[],completedErrorChunks:[],writtenSymbols:new Map,writtenModules:new Map,writtenProviders:new Map,onError:void 0===d?na:d,toJSON:function(a,b){return pa(g,this,a,b)}};g.pendingChunks++;b=qa(c);a=ra(g,a,b);f.push(a);return g}var sa={};
+function U(a,b,d,c){if(null!==d&&void 0!==d)throw Error("Refs cannot be used in server components, nor passed to client components.");if("function"===typeof a)return a(c);if("string"===typeof a)return[y,a,b,c];if("symbol"===typeof a)return a===aa?c.children:[y,a,b,c];if(null!=a&&"object"===typeof a){if(a.$$typeof===x)return[y,a,b,c];switch(a.$$typeof){case A:var f=a._init;a=f(a._payload);return U(a,b,d,c);case ba:return b=a.render,b(c,void 0);case ca:return U(a.type,b,d,c);case z:return ha(a._context,
+c.value),[y,a,b,{value:c.value,children:c.children,__pop:sa}]}}throw Error("Unsupported server component type: "+V(a));}function ra(a,b,d){var c={id:a.nextChunkId++,model:b,context:d,ping:function(){var b=a.pingedSegments;b.push(c);1===b.length&&ta(a)}};return c}function ua(a){return Object.prototype.toString.call(a).replace(/^\[object (.*)\]$/,function(a,d){return d})}function W(a){var b=JSON.stringify(a);return'"'+a+'"'===b?a:b}
+function V(a){switch(typeof a){case "string":return JSON.stringify(10>=a.length?a:a.substr(0,10)+"...");case "object":if(H(a))return"[...]";a=ua(a);return"Object"===a?"{...}":a;case "function":return"function";default:return String(a)}}
+function X(a,b){if(H(a)){for(var d="[",c=0;c<a.length;c++){0<c&&(d+=", ");if(6<c){d+="...";break}var f=a[c];d=""+c===b&&"object"===typeof f&&null!==f?d+X(f):d+V(f)}return d+"]"}d="{";c=Object.keys(a);for(f=0;f<c.length;f++){0<f&&(d+=", ");if(6<f){d+="...";break}var g=c[f];d+=W(g)+": ";var h=a[g];d=g===b&&"object"===typeof h&&null!==h?d+X(h):d+V(h)}return d+"}"}
+function pa(a,b,d,c){switch(c){case y:return"$"}for(;"object"===typeof c&&null!==c&&(c.$$typeof===y||c.$$typeof===A);)try{switch(c.$$typeof){case y:var f=c;c=U(f.type,f.key,f.ref,f.props);break;case A:var g=c._init;c=g(c._payload)}}catch(t){if("object"===typeof t&&null!==t&&"function"===typeof t.then)return a.pendingChunks++,a=ra(a,c,I),d=a.ping,t.then(d,d),"@"+a.id.toString(16);Y(a,t);a.pendingChunks++;d=a.nextChunkId++;Z(a,d,t);return"@"+d.toString(16)}if(null===c)return null;if("object"===typeof c){if(c.$$typeof===
+x){f=c.filepath+"#"+c.name;g=a.writtenModules;var h=g.get(f);if(void 0!==h)return b[0]===y&&"1"===d?"@"+h.toString(16):"$"+h.toString(16);try{var q=a.bundlerConfig[c.filepath][c.name];a.pendingChunks++;var l=a.nextChunkId++,O=w(q),P="M"+l.toString(16)+":"+O+"\n";var Q=p.encode(P);a.completedModuleChunks.push(Q);g.set(f,l);return b[0]===y&&"1"===d?"@"+l.toString(16):"$"+l.toString(16)}catch(t){return a.pendingChunks++,d=a.nextChunkId++,Z(a,d,t),"$"+d.toString(16)}}else{if(c.$$typeof===z)return b=c._context._globalName,
+c=a.writtenProviders,d=c.get(d),void 0===d&&(a.pendingChunks++,d=a.nextChunkId++,c.set(b,d),b="P"+d.toString(16)+":"+b+"\n",b=p.encode(b),a.completedJSONChunks.push(b)),"$"+d.toString(16);if(c===sa){a=I;if(null===a)throw Error("Tried to pop a Context at the root of the app. This is a bug in React.");d=a.parentValue;a.context._currentValue=d===B?a.context._defaultValue:d;I=a.parent;return}}return c}if("string"===typeof c)return a="$"===c[0]||"@"===c[0]?"$"+c:c,a;if("boolean"===typeof c||"number"===
+typeof c||"undefined"===typeof c)return c;if("function"===typeof c){if(/^on[A-Z]/.test(d))throw Error("Event handlers cannot be passed to client component props. Remove "+(W(d)+" from these props if possible: "+X(b)+"\nIf you need interactivity, consider converting part of this to a client component."));throw Error("Functions cannot be passed directly to client components because they're not serializable. Remove "+(W(d)+" ("+(c.displayName||c.name||"function")+") from this object, or avoid the entire object: "+
+X(b)));}if("symbol"===typeof c){q=a.writtenSymbols;l=q.get(c);if(void 0!==l)return"$"+l.toString(16);l=c.description;if(Symbol.for(l)!==c)throw Error("Only global symbols received from Symbol.for(...) can be passed to client components. The symbol Symbol.for("+(c.description+") cannot be found among global symbols. Remove ")+(W(d)+" from this object, or avoid the entire object: "+X(b)));a.pendingChunks++;d=a.nextChunkId++;b=w(l);b="S"+d.toString(16)+":"+b+"\n";b=p.encode(b);a.completedModuleChunks.push(b);
+q.set(c,d);return"$"+d.toString(16)}if("bigint"===typeof c)throw Error("BigInt ("+c+") is not yet supported in client component props. Remove "+(W(d)+" from this object or use a plain number instead: "+X(b)));throw Error("Type "+typeof c+" is not supported in client component props. Remove "+(W(d)+" from this object, or avoid the entire object: "+X(b)));}function Y(a,b){a=a.onError;a(b)}function va(a,b){null!==a.destination?(a.status=2,u(a.destination,b)):(a.status=1,a.fatalError=b)}
+function Z(a,b,d){var c="";try{if(d instanceof Error){var f=String(d.message);c=String(d.stack)}else f="Error: "+d}catch(g){f="An error occurred but serializing the error message failed."}d={message:f,stack:c};b="E"+b.toString(16)+":"+w(d)+"\n";b=p.encode(b);a.completedErrorChunks.push(b)}
+function ta(a){var b=T.current,d=R;T.current=la;R=a.cache;try{var c=a.pingedSegments;a.pingedSegments=[];for(var f=0;f<c.length;f++){var g=c[f];var h=a;M(g.context);try{for(var q=g.model;"object"===typeof q&&null!==q&&q.$$typeof===y;){var l=q;g.model=q;q=U(l.type,l.key,l.ref,l.props)}var O=g.id,P=w(q,h.toJSON),Q="J"+O.toString(16)+":"+P+"\n";var t=p.encode(Q);h.completedJSONChunks.push(t)}catch(v){if("object"===typeof v&&null!==v&&"function"===typeof v.then){var ka=g.ping;v.then(ka,ka)}else Y(h,v),
+Z(h,g.id,v)}}null!==a.destination&&wa(a,a.destination)}catch(v){Y(a,v),va(a,v)}finally{T.current=b,R=d}}
+function wa(a,b){k=new Uint8Array(512);m=0;try{for(var d=a.completedModuleChunks,c=0;c<d.length;c++)if(a.pendingChunks--,!n(b,d[c])){a.destination=null;c++;break}d.splice(0,c);var f=a.completedJSONChunks;for(c=0;c<f.length;c++)if(a.pendingChunks--,!n(b,f[c])){a.destination=null;c++;break}f.splice(0,c);var g=a.completedErrorChunks;for(c=0;c<g.length;c++)if(a.pendingChunks--,!n(b,g[c])){a.destination=null;c++;break}g.splice(0,c)}finally{k&&0<m&&(b.enqueue(new Uint8Array(k.buffer,0,m)),k=null,m=0)}0===
+a.pendingChunks&&b.close()}function qa(a){if(a){var b=I;M(null);for(var d=0;d<a.length;d++){var c=a[d],f=c[0];c=c[1];S[f]||(S[f]=e.createServerContext(f,B));ha(S[f],c)}a=I;M(b);return a}return null}
+exports.renderToReadableStream=function(a,b,d,c){var f=oa(a,b,d?d.onError:void 0,c);return new ReadableStream({type:"bytes",start:function(){ta(f)},pull:function(a){if(1===f.status)f.status=2,u(a,f.fatalError);else if(2!==f.status&&null===f.destination){f.destination=a;try{wa(f,a)}catch(h){Y(f,h),va(f,h)}}},cancel:function(){}})};
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
index 2870af72217b..82e96fce1151 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js
@@ -1,4 +1,5 @@
-/** @license React vundefined
+/**
+ * @license React
  * react-server-dom-webpack.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -13,6 +14,8 @@ if (process.env.NODE_ENV !== "production") {
   (function() {
 'use strict';
 
+var React = require('react');
+
 function createStringDecoder() {
   return new TextDecoder();
 }
@@ -95,45 +98,20 @@ function requireModule(moduleData) {
 // ATTENTION
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-// nor polyfill, then a plain number is used for performance.
-var REACT_ELEMENT_TYPE = 0xeac7;
-var REACT_PORTAL_TYPE = 0xeaca;
-var REACT_FRAGMENT_TYPE = 0xeacb;
-var REACT_STRICT_MODE_TYPE = 0xeacc;
-var REACT_PROFILER_TYPE = 0xead2;
-var REACT_PROVIDER_TYPE = 0xeacd;
-var REACT_CONTEXT_TYPE = 0xeace;
-var REACT_FORWARD_REF_TYPE = 0xead0;
-var REACT_SUSPENSE_TYPE = 0xead1;
-var REACT_SUSPENSE_LIST_TYPE = 0xead8;
-var REACT_MEMO_TYPE = 0xead3;
-var REACT_LAZY_TYPE = 0xead4;
-var REACT_SCOPE_TYPE = 0xead7;
-var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-var REACT_OFFSCREEN_TYPE = 0xeae2;
-var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-var REACT_CACHE_TYPE = 0xeae4;
-
-if (typeof Symbol === 'function' && Symbol.for) {
-  var symbolFor = Symbol.for;
-  REACT_ELEMENT_TYPE = symbolFor('react.element');
-  REACT_PORTAL_TYPE = symbolFor('react.portal');
-  REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
-  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
-  REACT_PROFILER_TYPE = symbolFor('react.profiler');
-  REACT_PROVIDER_TYPE = symbolFor('react.provider');
-  REACT_CONTEXT_TYPE = symbolFor('react.context');
-  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
-  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
-  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
-  REACT_MEMO_TYPE = symbolFor('react.memo');
-  REACT_LAZY_TYPE = symbolFor('react.lazy');
-  REACT_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  REACT_CACHE_TYPE = symbolFor('react.cache');
+// The Symbol used to tag the ReactElement-like types.
+var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
+
+var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+var ContextRegistry = ReactSharedInternals.ContextRegistry;
+function getOrCreateServerContext(globalName) {
+  if (!ContextRegistry[globalName]) {
+    ContextRegistry[globalName] = React.createServerContext(globalName, REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED);
+  }
+
+  return ContextRegistry[globalName];
 }
 
 var PENDING = 0;
@@ -405,6 +383,10 @@ function resolveModel(response, id, model) {
     resolveModelChunk(chunk, model);
   }
 }
+function resolveProvider(response, id, contextName) {
+  var chunks = response._chunks;
+  chunks.set(id, createInitializedChunk(response, getOrCreateServerContext(contextName).Provider));
+}
 function resolveModule(response, id, model) {
   var chunks = response._chunks;
   var chunk = chunks.get(id);
@@ -475,6 +457,12 @@ function processFullRow(response, row) {
         return;
       }
 
+    case 'P':
+      {
+        resolveProvider(response, id, text);
+        return;
+      }
+
     case 'S':
       {
         resolveSymbol(response, id, JSON.parse(text));
diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
index 7a6ce2731588..07b618e2a08b 100644
--- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
+++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js
@@ -1,4 +1,5 @@
-/** @license React vundefined
+/**
+ * @license React
  * react-server-dom-webpack.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -6,13 +7,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var h={stream:!0},k=new Map,m=60103,n=60116;if("function"===typeof Symbol&&Symbol.for){var q=Symbol.for;m=q("react.element");n=q("react.lazy")}function r(a,b,c){this._status=a;this._value=b;this._response=c}r.prototype.then=function(a){0===this._status?(null===this._value&&(this._value=[]),this._value.push(a)):a()};
-function t(a){switch(a._status){case 3:return a._value;case 1:var b=JSON.parse(a._value,a._response._fromJSON);a._status=3;return a._value=b;case 2:b=a._value;for(var c=b.chunks,d=0;d<c.length;d++){var e=k.get(c[d]);if(null!==e)throw e;}c=__webpack_require__(b.id);b="*"===b.name?c:""===b.name?c.__esModule?c.default:c:c[b.name];a._status=3;return a._value=b;case 0:throw a;default:throw a._value;}}function u(){var a=v(this,0);return t(a)}function w(a,b){return new r(3,b,a)}
-function x(a){if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}function y(a,b){if(0===a._status){var c=a._value;a._status=4;a._value=b;x(c)}}function z(a,b){a._chunks.forEach(function(a){y(a,b)})}function v(a,b){var c=a._chunks,d=c.get(b);d||(d=new r(0,null,a),c.set(b,d));return d}
-function B(a,b,c){switch(c[0]){case "$":if("$"===c)return m;if("$"===c[1]||"@"===c[1])return c.substring(1);b=parseInt(c.substring(1),16);a=v(a,b);return t(a);case "@":return b=parseInt(c.substring(1),16),a=v(a,b),{$$typeof:n,_payload:a,_init:t}}return c}function C(a){z(a,Error("Connection closed."))}
-function D(a,b){if(""!==b){var c=b[0],d=b.indexOf(":",1),e=parseInt(b.substring(1,d),16);d=b.substring(d+1);switch(c){case "J":b=a._chunks;(c=b.get(e))?0===c._status&&(a=c._value,c._status=1,c._value=d,x(a)):b.set(e,new r(1,d,a));break;case "M":b=a._chunks;c=b.get(e);d=JSON.parse(d,a._fromJSON);for(var p=d.chunks,g=0;g<p.length;g++){var f=p[g];if(void 0===k.get(f)){var A=__webpack_chunk_load__(f),l=k.set.bind(k,f,null),G=k.set.bind(k,f);A.then(l,G);k.set(f,A)}}c?0===c._status&&(a=c._value,c._status=
-2,c._value=d,x(a)):b.set(e,new r(2,d,a));break;case "S":c=JSON.parse(d);a._chunks.set(e,w(a,Symbol.for(c)));break;case "E":b=JSON.parse(d);c=Error(b.message);c.stack=b.stack;b=a._chunks;(d=b.get(e))?y(d,c):b.set(e,new r(4,c,a));break;default:throw Error("Error parsing the data. It's probably an error code or network corruption.");}}}
-function E(a){return function(b,c){return"string"===typeof c?B(a,this,c):"object"===typeof c&&null!==c?(b=c[0]===m?{$$typeof:m,type:c[1],key:c[2],ref:null,props:c[3],_owner:null}:c,b):c}}function F(){var a=new TextDecoder;a={_chunks:new Map,readRoot:u,_partialRow:"",_stringDecoder:a};a._fromJSON=E(a);return a}
-function H(a,b){function c(b){var g=b.value;if(b.done)C(a);else{b=g;g=a._stringDecoder;for(var f=b.indexOf(10);-1<f;){var p=a._partialRow;var l=b.subarray(0,f);l=g.decode(l);D(a,p+l);a._partialRow="";b=b.subarray(f+1);f=b.indexOf(10)}a._partialRow+=g.decode(b,h);return e.read().then(c,d)}}function d(b){z(a,b)}var e=b.getReader();e.read().then(c,d)}exports.createFromFetch=function(a){var b=F();a.then(function(a){H(b,a.body)},function(a){z(b,a)});return b};
-exports.createFromReadableStream=function(a){var b=F();H(b,a);return b};
-exports.createFromXHR=function(a){function b(){for(var b=a.responseText,c=e,f=b.indexOf("\n",c);-1<f;)c=d._partialRow+b.substring(c,f),D(d,c),d._partialRow="",c=f+1,f=b.indexOf("\n",c);d._partialRow+=b.substring(c);e=b.length}function c(){z(d,new TypeError("Network error"))}var d=F(),e=0;a.addEventListener("progress",b);a.addEventListener("load",function(){b();C(d)});a.addEventListener("error",c);a.addEventListener("abort",c);a.addEventListener("timeout",c);return d};
+'use strict';var h=require("react"),k={stream:!0},m=new Map,p=Symbol.for("react.element"),q=Symbol.for("react.lazy"),r=Symbol.for("react.default_value"),t=h.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ContextRegistry;function u(a){t[a]||(t[a]=h.createServerContext(a,r));return t[a]}function v(a,b,c){this._status=a;this._value=b;this._response=c}v.prototype.then=function(a){0===this._status?(null===this._value&&(this._value=[]),this._value.push(a)):a()};
+function w(a){switch(a._status){case 3:return a._value;case 1:var b=JSON.parse(a._value,a._response._fromJSON);a._status=3;return a._value=b;case 2:b=a._value;for(var c=b.chunks,d=0;d<c.length;d++){var e=m.get(c[d]);if(null!==e)throw e;}c=__webpack_require__(b.id);b="*"===b.name?c:""===b.name?c.__esModule?c.default:c:c[b.name];a._status=3;return a._value=b;case 0:throw a;default:throw a._value;}}function x(){var a=y(this,0);return w(a)}function z(a,b){return new v(3,b,a)}
+function A(a){if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}function C(a,b){if(0===a._status){var c=a._value;a._status=4;a._value=b;A(c)}}function D(a,b){a._chunks.forEach(function(a){C(a,b)})}function y(a,b){var c=a._chunks,d=c.get(b);d||(d=new v(0,null,a),c.set(b,d));return d}
+function E(a,b,c){switch(c[0]){case "$":if("$"===c)return p;if("$"===c[1]||"@"===c[1])return c.substring(1);b=parseInt(c.substring(1),16);a=y(a,b);return w(a);case "@":return b=parseInt(c.substring(1),16),a=y(a,b),{$$typeof:q,_payload:a,_init:w}}return c}function F(a){D(a,Error("Connection closed."))}
+function G(a,b){if(""!==b){var c=b[0],d=b.indexOf(":",1),e=parseInt(b.substring(1,d),16);d=b.substring(d+1);switch(c){case "J":b=a._chunks;(c=b.get(e))?0===c._status&&(a=c._value,c._status=1,c._value=d,A(a)):b.set(e,new v(1,d,a));break;case "M":b=a._chunks;c=b.get(e);d=JSON.parse(d,a._fromJSON);for(var n=d.chunks,g=0;g<n.length;g++){var f=n[g];if(void 0===m.get(f)){var B=__webpack_chunk_load__(f),l=m.set.bind(m,f,null),J=m.set.bind(m,f);B.then(l,J);m.set(f,B)}}c?0===c._status&&(a=c._value,c._status=
+2,c._value=d,A(a)):b.set(e,new v(2,d,a));break;case "P":a._chunks.set(e,z(a,u(d).Provider));break;case "S":c=JSON.parse(d);a._chunks.set(e,z(a,Symbol.for(c)));break;case "E":b=JSON.parse(d);c=Error(b.message);c.stack=b.stack;b=a._chunks;(d=b.get(e))?C(d,c):b.set(e,new v(4,c,a));break;default:throw Error("Error parsing the data. It's probably an error code or network corruption.");}}}
+function H(a){return function(b,c){return"string"===typeof c?E(a,this,c):"object"===typeof c&&null!==c?(b=c[0]===p?{$$typeof:p,type:c[1],key:c[2],ref:null,props:c[3],_owner:null}:c,b):c}}function I(){var a=new TextDecoder;a={_chunks:new Map,readRoot:x,_partialRow:"",_stringDecoder:a};a._fromJSON=H(a);return a}
+function K(a,b){function c(b){var g=b.value;if(b.done)F(a);else{b=g;g=a._stringDecoder;for(var f=b.indexOf(10);-1<f;){var n=a._partialRow;var l=b.subarray(0,f);l=g.decode(l);G(a,n+l);a._partialRow="";b=b.subarray(f+1);f=b.indexOf(10)}a._partialRow+=g.decode(b,k);return e.read().then(c,d)}}function d(b){D(a,b)}var e=b.getReader();e.read().then(c,d)}exports.createFromFetch=function(a){var b=I();a.then(function(a){K(b,a.body)},function(a){D(b,a)});return b};
+exports.createFromReadableStream=function(a){var b=I();K(b,a);return b};
+exports.createFromXHR=function(a){function b(){for(var b=a.responseText,c=e,f=b.indexOf("\n",c);-1<f;)c=d._partialRow+b.substring(c,f),G(d,c),d._partialRow="",c=f+1,f=b.indexOf("\n",c);d._partialRow+=b.substring(c);e=b.length}function c(){D(d,new TypeError("Network error"))}var d=I(),e=0;a.addEventListener("progress",b);a.addEventListener("load",function(){b();F(d)});a.addEventListener("error",c);a.addEventListener("abort",c);a.addEventListener("timeout",c);return d};
diff --git a/packages/next/package.json b/packages/next/package.json
index 8aad660fb8f2..a4b1be4de6f1 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -240,7 +240,7 @@
     "raw-body": "2.4.1",
     "react-is": "17.0.2",
     "react-refresh": "0.8.3",
-    "react-server-dom-webpack": "0.0.0-experimental-13455d26d-20211104",
+    "react-server-dom-webpack": "0.0.0-experimental-577f2de46-20220320",
     "regenerator-runtime": "0.13.4",
     "sass-loader": "12.4.0",
     "schema-utils2": "npm:schema-utils@2.7.1",
diff --git a/yarn.lock b/yarn.lock
index 358e34ece699..28727c1ec641 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17826,15 +17826,14 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-server-dom-webpack@0.0.0-experimental-13455d26d-20211104:
-  version "0.0.0-experimental-13455d26d-20211104"
-  resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-13455d26d-20211104.tgz#ba4ca0c3adcc4dd0ec1ef93ce6a45c6fc043aa71"
-  integrity sha512-ry5xxuF1th6/seRCXnhD8i5r/8e3EvWxIHIwTjN+MIhTVwc8tscMMhq2vqsTRn7Znd0LbrhCPRd4v1V6L+oMig==
+react-server-dom-webpack@0.0.0-experimental-577f2de46-20220320:
+  version "0.0.0-experimental-577f2de46-20220320"
+  resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-577f2de46-20220320.tgz#4c06e0d86a30a006f93f22ed5723af120def3b98"
+  integrity sha512-n8pAJOqCaJHG/Xz0/SqiX4lOnXx7hnZm2iY/vDGmtzQn3bPqbgUljQHgPDIfDeUt8KINhKPFD9j/Dbn6t0yTuw==
   dependencies:
     acorn "^6.2.1"
     loose-envify "^1.1.0"
     neo-async "^2.6.1"
-    object-assign "^4.1.1"
 
 react-ssr-prepass@1.0.8:
   version "1.0.8"

From 59905c10018e08d50c319978d67fb6811575241a Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Thu, 24 Mar 2022 04:47:44 +0800
Subject: [PATCH 10/39] Fix styled transform in next-swc/emotion (#35527)

Fix https://github.com/vercel/next.js/issues/35525



## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 examples/with-emotion-swc/pages/index.js      | 13 ++++++-
 examples/with-emotion-swc/shared/styles.js    | 11 +++++-
 .../next-swc/crates/core/src/emotion/mod.rs   | 30 +++++++++------
 .../fixture/emotion/css-in-callback/input.tsx |  3 ++
 .../fixture/emotion/css-in-callback/output.ts | 38 +++++++++++--------
 5 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/examples/with-emotion-swc/pages/index.js b/examples/with-emotion-swc/pages/index.js
index 481abe91b200..048df431d7b9 100644
--- a/examples/with-emotion-swc/pages/index.js
+++ b/examples/with-emotion-swc/pages/index.js
@@ -1,5 +1,13 @@
 import { css } from '@emotion/react'
-import { Animated, Basic, bounce, Combined, Pink } from '../shared/styles'
+import {
+  Animated,
+  Basic,
+  bounce,
+  Combined,
+  Pink,
+  BasicExtended,
+  ComponentSelectorsExtended,
+} from '../shared/styles'
 
 const Home = () => (
   <div
@@ -14,6 +22,9 @@ const Home = () => (
       With <code>:hover</code>.
     </Combined>
     <Animated animation={bounce}>Let's bounce.</Animated>
+    <ComponentSelectorsExtended>
+      <BasicExtended>Nested</BasicExtended>
+    </ComponentSelectorsExtended>
   </div>
 )
 
diff --git a/examples/with-emotion-swc/shared/styles.js b/examples/with-emotion-swc/shared/styles.js
index cb9720bbfeba..e3dce54b31c6 100644
--- a/examples/with-emotion-swc/shared/styles.js
+++ b/examples/with-emotion-swc/shared/styles.js
@@ -58,10 +58,19 @@ export const Combined = styled.div`
   }
 `
 
-export const Pink = styled.div(basicStyles, {
+export const Pink = styled(Basic)({
   color: 'hotpink',
 })
 
+export const BasicExtended = styled(Basic)``
+
+export const ComponentSelectorsExtended = styled.div`
+  ${BasicExtended} {
+    color: green;
+  }
+  box-shadow: -5px -5px 0 0 green;
+`
+
 export const Animated = styled.div`
   ${basicStyles};
   ${hoverStyles};
diff --git a/packages/next-swc/crates/core/src/emotion/mod.rs b/packages/next-swc/crates/core/src/emotion/mod.rs
index e0ccb879c2a3..682f9e14b056 100644
--- a/packages/next-swc/crates/core/src/emotion/mod.rs
+++ b/packages/next-swc/crates/core/src/emotion/mod.rs
@@ -442,7 +442,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         )));
                                     }
                                     if let Some(cm) = self.create_sourcemap(expr.span.lo()) {
-                                        c.args.push(cm.as_arg());
+                                        expr.args.push(cm.as_arg());
                                     }
                                     c.args.push(
                                         Expr::Object(ObjectLit {
@@ -489,7 +489,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                             );
                                             if let Some(cm) = self.create_sourcemap(expr.span.lo())
                                             {
-                                                args.push(cm.as_arg());
+                                                expr.args.push(cm.as_arg());
                                             }
                                         }
                                         return CallExpr {
@@ -556,9 +556,7 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         }),
                                     )));
                                 }
-                                if let Some(cm) = self.create_sourcemap(call.span.lo()) {
-                                    callee.args.push(cm.as_arg());
-                                }
+
                                 callee.args.push(
                                     Expr::Object(ObjectLit {
                                         span: DUMMY_SP,
@@ -569,11 +567,19 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                 return Expr::Call(CallExpr {
                                     span: DUMMY_SP,
                                     callee: callee.as_callee(),
-                                    args: self
-                                        .create_args_from_tagged_tpl(&mut tagged_tpl.tpl)
-                                        .into_iter()
-                                        .map(|exp| exp.fold_children_with(self))
-                                        .collect(),
+                                    args: {
+                                        let mut args: Vec<ExprOrSpread> = self
+                                            .create_args_from_tagged_tpl(&mut tagged_tpl.tpl)
+                                            .into_iter()
+                                            .map(|exp| exp.fold_children_with(self))
+                                            .collect();
+                                        if let Some(cm) =
+                                            self.create_sourcemap(tagged_tpl.span.lo())
+                                        {
+                                            args.push(cm.as_arg());
+                                        }
+                                        args
+                                    },
                                     type_args: None,
                                 });
                             }
@@ -626,11 +632,13 @@ impl<C: Comments> Fold for EmotionTransformer<C> {
                                         }
                                         let mut args =
                                             self.create_args_from_tagged_tpl(&mut tagged_tpl.tpl);
+
                                         if let Some(cm) =
-                                            self.create_sourcemap(member_expr.span.lo())
+                                            self.create_sourcemap(tagged_tpl.span.lo())
                                         {
                                             args.push(cm.as_arg());
                                         }
+
                                         self.comments.add_pure_comment(member_expr.span.lo());
                                         return Expr::Call(CallExpr {
                                             span: DUMMY_SP,
diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx
index f9e905cef18e..93c6f5efe868 100644
--- a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx
+++ b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/input.tsx
@@ -32,6 +32,9 @@ const SpanContainer = styled('span')({
   background: 'yellow',
 })
 
+export const DivContainerExtended = styled(DivContainer)``
+export const DivContainerExtended2 = styled(DivContainer)({})
+
 const Container = styled('button')`
   background: red;
   ${stylesInCallback}
diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts
index b0b8b7d33e49..41543223f76d 100644
--- a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts
+++ b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts
@@ -7,49 +7,57 @@ const stylesInCallback = (props: any)=>/*#__PURE__*/ css({
         color: "red",
         background: "yellow",
         width: `${props.scale * 100}px`
-    }, "label:stylesInCallback", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNRSJ9 */")
+    }, "label:stylesInCallback", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1FIn0= */")
 ;
 const styles = /*#__PURE__*/ css({
     color: "red",
     width: "20px"
-}, "label:styles", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZZSJ9 */");
-const styles2 = /*#__PURE__*/ css("color:red;width:20px;", "styles2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmdCIn0= */");
+}, "label:styles", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVllIn0= */");
+const styles2 = /*#__PURE__*/ css("color:red;width:20px;", "styles2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCZ0IifQ== */");
 const DivContainer = /*#__PURE__*/ styled("div", {
     target: "ekie5mj0",
     label: "DivContainer"
-}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQnFCIn0= */")({
+})({
     background: "red"
-});
+}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCcUIifQ== */");
 const DivContainer2 = /*#__PURE__*/ styled("div", {
     target: "ekie5mj1",
     label: "DivContainer2"
-})("background:red;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQnNCIn0= */");
-const SpanContainer = /*#__PURE__*/ styled("span", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QnNCIn0= */", {
+})("background:red;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCc0IifQ== */");
+const SpanContainer = /*#__PURE__*/ styled("span", {
     target: "ekie5mj2",
     label: "SpanContainer"
 })({
     background: "yellow"
-});
-const Container = /*#__PURE__*/ styled("button", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbIlJlYWN0LmNyZWF0ZUVsZW1lbnQiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ== */", {
+}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThCc0IifQ== */");
+export const DivContainerExtended = /*#__PURE__*/ styled(DivContainer, {
     target: "ekie5mj3",
+    label: "DivContainerExtended"
+})("/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDb0MifQ== */");
+export const DivContainerExtended2 = /*#__PURE__*/ styled(DivContainer, {
+    target: "ekie5mj4",
+    label: "DivContainerExtended2"
+})({}, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DcUMifQ== */");
+const Container = /*#__PURE__*/ styled("button", {
+    target: "ekie5mj5",
     label: "Container"
 })("background:red;", stylesInCallback, ()=>/*#__PURE__*/ css({
         background: "red"
-    }, "label:Container", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ0kifQ== */")
-, "  color:yellow;font-size:12px;");
+    }, "label:Container", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDSSJ9 */")
+, "  color:yellow;font-size:12px;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDa0IifQ== */");
 const Container2 = /*#__PURE__*/ styled("div", {
-    target: "ekie5mj4",
+    target: "ekie5mj6",
     label: "Container2"
-})("background:red;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q21CIn0= */");
+})("background:red;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEbUIifQ== */");
 export class SimpleComponent extends PureComponent {
     render() {
         return /*#__PURE__*/ _jsxs(Container, {
-            css: /*#__PURE__*/ css("color:hotpink;", "Container2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRGEifQ== */"),
+            css: /*#__PURE__*/ css("color:hotpink;", "Container2", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdEYSJ9 */"),
             children: [
                 /*#__PURE__*/ _jsx(Global, {
                     styles: [
                         css("html,body{padding:3rem 1rem;margin:0;background:papayawhip;min-height:100%;font-family:Helvetica,Arial,sans-serif;font-size:24px;}"),
-                        "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKCdidXR0b24nKWBcbiAgYmFja2dyb3VuZDogcmVkO1xuICAke3N0eWxlc0luQ2FsbGJhY2t9XG4gICR7KCkgPT5cbiAgICBjc3Moe1xuICAgICAgYmFja2dyb3VuZDogJ3JlZCcsXG4gICAgfSl9XG4gIGNvbG9yOiB5ZWxsb3c7XG4gIGZvbnQtc2l6ZTogMTJweDtcbmBcblxuY29uc3QgQ29udGFpbmVyMiA9IHN0eWxlZC5kaXZgXG4gIGJhY2tncm91bmQ6IHJlZDtcbmBcblxuZXhwb3J0IGNsYXNzIFNpbXBsZUNvbXBvbmVudCBleHRlbmRzIFB1cmVDb21wb25lbnQge1xuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDb250YWluZXJcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxHbG9iYWxcbiAgICAgICAgICBzdHlsZXM9e2Nzc2BcbiAgICAgICAgICAgIGh0bWwsXG4gICAgICAgICAgICBib2R5IHtcbiAgICAgICAgICAgICAgcGFkZGluZzogM3JlbSAxcmVtO1xuICAgICAgICAgICAgICBtYXJnaW46IDA7XG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6IHBhcGF5YXdoaXA7XG4gICAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICAgIGZvbnQtZmFtaWx5OiBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgICBmb250LXNpemU6IDI0cHg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgLz5cbiAgICAgICAgPHNwYW4+aGVsbG88L3NwYW4+XG4gICAgICA8L0NvbnRhaW5lcj5cbiAgICApXG4gIH1cbn1cblxuUmVhY3RET00ucmVuZGVyKDxTaW1wbGVDb21wb25lbnQgLz4sIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNhcHAnKSlcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RFMifQ== */"
+                        "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTREUyJ9 */"
                     ]
                 }),
                 /*#__PURE__*/ _jsx("span", {

From ef7b53528f8f7e2226127a4bdc1223f1c677b042 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 23 Mar 2022 18:33:47 -0400
Subject: [PATCH 11/39] Fix `next info` accidentally printing stderr (#35556)

I noticed a few issues that had "Output from `next info`" with the first line as

```
/bin/sh: pnpm: command not found
```

This was because `execSync()` was still printing to stderr when a command was not found.

Changing to `execFileSync()` fixed it so we no longer print to stderr when a command is not found.
---
 packages/next/cli/next-info.ts          | 5 ++++-
 test/integration/cli/test/index.test.js | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/next/cli/next-info.ts b/packages/next/cli/next-info.ts
index 4fd15e44dfc5..9ac5cb350225 100755
--- a/packages/next/cli/next-info.ts
+++ b/packages/next/cli/next-info.ts
@@ -99,7 +99,10 @@ function getPackageVersion(packageName: string) {
 
 function getBinaryVersion(binaryName: string) {
   try {
-    return childProcess.execSync(`${binaryName} --version`).toString().trim()
+    return childProcess
+      .execFileSync(binaryName, ['--version'])
+      .toString()
+      .trim()
   } catch {
     return 'N/A'
   }
diff --git a/test/integration/cli/test/index.test.js b/test/integration/cli/test/index.test.js
index 2fbae8c6ce2c..c3d7aad3092b 100644
--- a/test/integration/cli/test/index.test.js
+++ b/test/integration/cli/test/index.test.js
@@ -489,7 +489,9 @@ describe('CLI Usage', () => {
     test('should print output', async () => {
       const info = await runNextCommand(['info'], {
         stdout: true,
+        stderr: true,
       })
+      expect(info.stderr || '').toBe('')
       expect(info.stdout).toMatch(
         new RegExp(`
     Operating System:

From f16ee05f599de27e777ac2b736c3bf820a19bd7b Mon Sep 17 00:00:00 2001
From: hiro <hiroyuki.kikuchi@zozo.com>
Date: Thu, 24 Mar 2022 10:02:40 +0900
Subject: [PATCH 12/39] Fix typo in docs (#35561)

The following files have been modified.

- `docs/api-reference/next.config.js/rewrites.md`
- `docs/basic-features/script.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
---
 docs/api-reference/next.config.js/rewrites.md | 2 +-
 docs/basic-features/script.md                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/api-reference/next.config.js/rewrites.md b/docs/api-reference/next.config.js/rewrites.md
index 47571668dfb2..946dec86981c 100644
--- a/docs/api-reference/next.config.js/rewrites.md
+++ b/docs/api-reference/next.config.js/rewrites.md
@@ -323,7 +323,7 @@ module.exports = {
 }
 ```
 
-If you're using `trailingSlash: true`, you also need to insert a trailing slash in the `source` paramater. If the destination server is also expecting a trailing slash it should be included in the `destination` parameter as well.
+If you're using `trailingSlash: true`, you also need to insert a trailing slash in the `source` parameter. If the destination server is also expecting a trailing slash it should be included in the `destination` parameter as well.
 
 ```js
 module.exports = {
diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index b08be05800e0..1f9806415d43 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -166,7 +166,7 @@ There are a number of trade-offs that need to be considered when loading a third
 
 Although the `worker` strategy does not require any additional configuration to work, Partytown supports the use of a config object to modify some of its settings, including enabling `debug` mode and forwarding events and triggers.
 
-If you would like to add additonal configuration options, you can include it within the `<Head />` component used in a [custom `_document.js`](/docs/advanced-features/custom-document.md):
+If you would like to add additional configuration options, you can include it within the `<Head />` component used in a [custom `_document.js`](/docs/advanced-features/custom-document.md):
 
 ```jsx
 import { Html, Head, Main, NextScript } from 'next/document'

From db2567b01b2dd0a0c4f5862dc161b4584b9227f1 Mon Sep 17 00:00:00 2001
From: CommanderRoot <CommanderRoot@users.noreply.github.com>
Date: Thu, 24 Mar 2022 22:49:38 +0100
Subject: [PATCH 13/39] chore: replace deprecated String.prototype.substr()
 (#35421)

.substr() is deprecated so we replace it with .slice() which works similarily but isn't deprecated
Signed-off-by: Tobias Speicher <rootcommander@gmail.com>

Co-authored-by: Steven <steven@ceriously.com>
---
 .../actions/next-stats-action/src/add-comment.js   |  2 +-
 .../next-stats-action/src/run/collect-stats.js     |  3 +--
 examples/with-magic/pages/api/login.js             |  2 +-
 packages/next-codemod/transforms/cra-to-next.ts    |  4 ++--
 .../transforms/name-default-component.ts           |  2 +-
 packages/next/build/index.ts                       |  4 ++--
 packages/next/build/output/store.ts                |  2 +-
 packages/next/build/utils.ts                       |  2 +-
 .../loaders/next-serverless-loader/index.ts        |  2 +-
 .../loaders/next-serverless-loader/utils.ts        |  4 ++--
 .../build/webpack/plugins/jsconfig-paths-plugin.ts |  4 ++--
 .../plugins/next-trace-entrypoints-plugin.ts       |  4 ++--
 packages/next/client/dev/amp-dev.js                |  9 +++++----
 packages/next/export/index.ts                      |  2 +-
 packages/next/server/base-server.ts                |  2 +-
 packages/next/server/dev/hot-reloader.ts           |  2 +-
 packages/next/server/router.ts                     |  2 +-
 packages/next/shared/lib/router/router.ts          |  8 ++++----
 .../next/shared/lib/router/utils/format-url.ts     |  2 +-
 .../shared/lib/router/utils/prepare-destination.ts |  2 +-
 .../next/shared/lib/router/utils/route-regex.ts    |  2 +-
 test/integration/api-support/test/index.test.js    |  6 +++---
 test/integration/export-serverless/test/browser.js |  4 ++--
 test/integration/export/test/browser.js            |  4 ++--
 .../server-side-dev-errors/test/index.test.js      | 14 +++++++-------
 test/lib/next-modes/next-start.ts                  |  2 +-
 26 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/.github/actions/next-stats-action/src/add-comment.js b/.github/actions/next-stats-action/src/add-comment.js
index 2f2d9afc1578..a87306703404 100644
--- a/.github/actions/next-stats-action/src/add-comment.js
+++ b/.github/actions/next-stats-action/src/add-comment.js
@@ -20,7 +20,7 @@ const round = (num, places) => {
 
 const shortenLabel = (itemKey) =>
   itemKey.length > 24
-    ? `${itemKey.substr(0, 12)}..${itemKey.substr(itemKey.length - 12, 12)}`
+    ? `${itemKey.slice(0, 12)}..${itemKey.slice(-12)}`
     : itemKey
 
 const twoMB = 2 * 1024 * 1024
diff --git a/.github/actions/next-stats-action/src/run/collect-stats.js b/.github/actions/next-stats-action/src/run/collect-stats.js
index d01d1a5e4fd2..0b585864d47b 100644
--- a/.github/actions/next-stats-action/src/run/collect-stats.js
+++ b/.github/actions/next-stats-action/src/run/collect-stats.js
@@ -74,8 +74,7 @@ module.exports = async function collectStats(
           const responseText = (await res.text()).trim()
 
           let fileName = pathname === '/' ? '/index' : pathname
-          if (fileName.endsWith('/'))
-            fileName = fileName.substr(0, fileName.length - 1)
+          if (fileName.endsWith('/')) fileName = fileName.slice(0, -1)
           logger(
             `Writing file to ${path.join(fetchedPagesDir, `${fileName}.html`)}`
           )
diff --git a/examples/with-magic/pages/api/login.js b/examples/with-magic/pages/api/login.js
index b66975fa1fd3..ae6997950d55 100644
--- a/examples/with-magic/pages/api/login.js
+++ b/examples/with-magic/pages/api/login.js
@@ -3,7 +3,7 @@ import { setLoginSession } from '../../lib/auth'
 
 export default async function login(req, res) {
   try {
-    const didToken = req.headers.authorization.substr(7)
+    const didToken = req.headers.authorization.slice(7)
     const metadata = await magic.users.getMetadataByToken(didToken)
     const session = { ...metadata }
 
diff --git a/packages/next-codemod/transforms/cra-to-next.ts b/packages/next-codemod/transforms/cra-to-next.ts
index 7f218fb8d060..dc7c681fe451 100644
--- a/packages/next-codemod/transforms/cra-to-next.ts
+++ b/packages/next-codemod/transforms/cra-to-next.ts
@@ -218,7 +218,7 @@ class CraTransform {
             return `${reactName}={\`${value.replace(
               /%([a-zA-Z0-9_]{0,})%/g,
               (subStr) => {
-                return `\${process.env.${subStr.substr(1, subStr.length - 2)}}`
+                return `\${process.env.${subStr.slice(1, -1)}}`
               }
             )}\`}`
           }
@@ -293,7 +293,7 @@ class CraTransform {
             : [...globalCssContext.cssImports]
                 .map((file) => {
                   if (!this.isCra) {
-                    file = file.startsWith('/') ? file.substr(1) : file
+                    file = file.startsWith('/') ? file.slice(1) : file
                   }
 
                   return `import '${
diff --git a/packages/next-codemod/transforms/name-default-component.ts b/packages/next-codemod/transforms/name-default-component.ts
index ef81c9a6799f..01bd3482f577 100644
--- a/packages/next-codemod/transforms/name-default-component.ts
+++ b/packages/next-codemod/transforms/name-default-component.ts
@@ -13,7 +13,7 @@ const camelCase = (value: string): string => {
   const val = value.replace(/[-_\s.]+(.)?/g, (_match, chr) =>
     chr ? chr.toUpperCase() : ''
   )
-  return val.substr(0, 1).toUpperCase() + val.substr(1)
+  return val.slice(0, 1).toUpperCase() + val.slice(1)
 }
 
 const isValidIdentifier = (value: string): boolean =>
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index e1176656fe08..ab9f40a27a6b 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -1659,7 +1659,7 @@ export default async function build(
                       // strip leading / and then recurse number of nested dirs
                       // to place from base folder
                       originPage
-                        .substr(1)
+                        .slice(1)
                         .split('/')
                         .map(() => '..')
                         .join('/')
@@ -1709,7 +1709,7 @@ export default async function build(
                 for (const locale of i18n.locales) {
                   const curPath = `/${locale}${page === '/' ? '' : page}`
                   const localeExt = page === '/' ? path.extname(file) : ''
-                  const relativeDestNoPages = relativeDest.substr(
+                  const relativeDestNoPages = relativeDest.slice(
                     'pages/'.length
                   )
 
diff --git a/packages/next/build/output/store.ts b/packages/next/build/output/store.ts
index ff2edad64ed0..4c0af9268030 100644
--- a/packages/next/build/output/store.ts
+++ b/packages/next/build/output/store.ts
@@ -81,7 +81,7 @@ store.subscribe((state) => {
       const matches = cleanError.match(/\[.*\]=/)
       if (matches) {
         for (const match of matches) {
-          const prop = (match.split(']').shift() || '').substr(1)
+          const prop = (match.split(']').shift() || '').slice(1)
           console.log(
             `AMP bind syntax [${prop}]='' is not supported in JSX, use 'data-amp-bind-${prop}' instead. https://nextjs.org/docs/messages/amp-bind-jsx-alt`
           )
diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
index 618a826307de..a2bf0c53337b 100644
--- a/packages/next/build/utils.ts
+++ b/packages/next/build/utils.ts
@@ -723,7 +723,7 @@ export async function buildStaticPaths(
       let cleanedEntry = entry
 
       if (localePathResult.detectedLocale) {
-        cleanedEntry = entry.substr(localePathResult.detectedLocale.length + 1)
+        cleanedEntry = entry.slice(localePathResult.detectedLocale.length + 1)
       } else if (defaultLocale) {
         entry = `/${defaultLocale}${entry}`
       }
diff --git a/packages/next/build/webpack/loaders/next-serverless-loader/index.ts b/packages/next/build/webpack/loaders/next-serverless-loader/index.ts
index e9f8630262fc..08e517fabed8 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader/index.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader/index.ts
@@ -55,7 +55,7 @@ const nextServerlessLoader: webpack.loader.Loader = function () {
     i18n,
     reactRoot,
   }: ServerlessLoaderQuery =
-    typeof this.query === 'string' ? parse(this.query.substr(1)) : this.query
+    typeof this.query === 'string' ? parse(this.query.slice(1)) : this.query
 
   const buildManifest = join(distDir, BUILD_MANIFEST).replace(/\\/g, '/')
   const reactLoadableManifest = join(distDir, REACT_LOADABLE_MANIFEST).replace(
diff --git a/packages/next/build/webpack/loaders/next-serverless-loader/utils.ts b/packages/next/build/webpack/loaders/next-serverless-loader/utils.ts
index c5c2b5197906..13afb72bfa34 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader/utils.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader/utils.ts
@@ -274,9 +274,9 @@ export function getUtils({
         }
 
         pathname =
-          pathname.substr(0, paramIdx) +
+          pathname.slice(0, paramIdx) +
           (paramValue || '') +
-          pathname.substr(paramIdx + builtParam.length)
+          pathname.slice(paramIdx + builtParam.length)
       }
     }
 
diff --git a/packages/next/build/webpack/plugins/jsconfig-paths-plugin.ts b/packages/next/build/webpack/plugins/jsconfig-paths-plugin.ts
index 7089cdfa42bb..43b2f594de47 100644
--- a/packages/next/build/webpack/plugins/jsconfig-paths-plugin.ts
+++ b/packages/next/build/webpack/plugins/jsconfig-paths-plugin.ts
@@ -44,8 +44,8 @@ export function tryParsePattern(pattern: string): Pattern | undefined {
   return indexOfStar === -1
     ? undefined
     : {
-        prefix: pattern.substr(0, indexOfStar),
-        suffix: pattern.substr(indexOfStar + 1),
+        prefix: pattern.slice(0, indexOfStar),
+        suffix: pattern.slice(indexOfStar + 1),
       }
 }
 
diff --git a/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts b/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts
index 21b14ad40165..0e25b554f149 100644
--- a/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts
+++ b/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts
@@ -541,7 +541,7 @@ export class TraceEntryPointsPlugin implements webpack5.WebpackPluginInstance {
                       ) {
                         requestPath = (
                           resContext.descriptionFileRoot +
-                          request.substr(getPkgName(request)?.length || 0) +
+                          request.slice(getPkgName(request)?.length || 0) +
                           nodePath.sep +
                           'package.json'
                         )
@@ -555,7 +555,7 @@ export class TraceEntryPointsPlugin implements webpack5.WebpackPluginInstance {
                         (separatorIndex = requestPath.lastIndexOf('/')) >
                         rootSeparatorIndex
                       ) {
-                        requestPath = requestPath.substr(0, separatorIndex)
+                        requestPath = requestPath.slice(0, separatorIndex)
                         const curPackageJsonPath = `${requestPath}/package.json`
                         if (await job.isFile(curPackageJsonPath)) {
                           await job.emitFile(
diff --git a/packages/next/client/dev/amp-dev.js b/packages/next/client/dev/amp-dev.js
index 36b9af20b048..03cc51b47499 100644
--- a/packages/next/client/dev/amp-dev.js
+++ b/packages/next/client/dev/amp-dev.js
@@ -48,12 +48,13 @@ async function tryApplyUpdates() {
     ).some((mod) => {
       return (
         mod.indexOf(
-          `pages${curPage.substr(0, 1) === '/' ? curPage : `/${curPage}`}`
+          `pages${curPage.startsWith('/') ? curPage : `/${curPage}`}`
         ) !== -1 ||
         mod.indexOf(
-          `pages${
-            curPage.substr(0, 1) === '/' ? curPage : `/${curPage}`
-          }`.replace(/\//g, '\\')
+          `pages${curPage.startsWith('/') ? curPage : `/${curPage}`}`.replace(
+            /\//g,
+            '\\'
+          )
         ) !== -1
       )
     })
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index 937c01ab089c..f2e468fe187d 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -646,7 +646,7 @@ export default async function exportApp(
             // strip leading / and then recurse number of nested dirs
             // to place from base folder
             pageName
-              .substr(1)
+              .slice(1)
               .split('/')
               .map(() => '..')
               .join('/')
diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
index 5168da0997e9..68d1eca05ffa 100644
--- a/packages/next/server/base-server.ts
+++ b/packages/next/server/base-server.ts
@@ -1144,7 +1144,7 @@ export default abstract class Server {
     // ensure correct status is set when visiting a status page
     // directly e.g. /500
     if (STATIC_STATUS_PAGES.includes(pathname)) {
-      res.statusCode = parseInt(pathname.substr(1), 10)
+      res.statusCode = parseInt(pathname.slice(1), 10)
     }
 
     // static pages can only respond to GET/HEAD
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index bcd58454ab57..d2ca2c8f3d55 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -733,7 +733,7 @@ export default class HotReloader {
         this.send({
           event: 'serverOnlyChanges',
           pages: serverOnlyChanges.map((pg) =>
-            denormalizePagePath(pg.substr('pages'.length))
+            denormalizePagePath(pg.slice('pages'.length))
           ),
         })
       }
diff --git a/packages/next/server/router.ts b/packages/next/server/router.ts
index b101f838544e..075d307a14cd 100644
--- a/packages/next/server/router.ts
+++ b/packages/next/server/router.ts
@@ -56,7 +56,7 @@ export function replaceBasePath(pathname: string, basePath: string): string {
   // and doesn't contain extra chars e.g. basePath /docs
   // should replace for /docs, /docs/, /docs/a but not /docsss
   if (hasBasePath(pathname, basePath)) {
-    pathname = pathname.substr(basePath.length)
+    pathname = pathname.slice(basePath.length)
     if (!pathname.startsWith('/')) pathname = `/${pathname}`
   }
   return pathname
diff --git a/packages/next/shared/lib/router/router.ts b/packages/next/shared/lib/router/router.ts
index 804f18a0d67c..4abfb6c2e07c 100644
--- a/packages/next/shared/lib/router/router.ts
+++ b/packages/next/shared/lib/router/router.ts
@@ -121,7 +121,7 @@ function addPathPrefix(path: string, prefix?: string) {
 
   return (
     normalizePathTrailingSlash(`${prefix}${pathname}`) +
-    path.substr(pathname.length)
+    path.slice(pathname.length)
   )
 }
 
@@ -177,7 +177,7 @@ export function delLocale(path: string, locale?: string) {
       (pathLower.startsWith('/' + localeLower + '/') ||
         pathLower === '/' + localeLower)
       ? (pathname.length === locale.length + 1 ? '/' : '') +
-          path.substr(locale.length + 1)
+          path.slice(locale.length + 1)
       : path
   }
   return path
@@ -320,7 +320,7 @@ export function resolveHref(
   // invalid and will never match a Next.js page/file
   const urlProtoMatch = urlAsString.match(/^[a-zA-Z]{1,}:\/\//)
   const urlAsStringNoProto = urlProtoMatch
-    ? urlAsString.substr(urlProtoMatch[0].length)
+    ? urlAsString.slice(urlProtoMatch[0].length)
     : urlAsString
 
   const urlParts = urlAsStringNoProto.split('?')
@@ -751,7 +751,7 @@ export default class Router implements BaseRouter {
     if (typeof window !== 'undefined') {
       // make sure "as" doesn't start with double slashes or else it can
       // throw an error as it's considered invalid
-      if (as.substr(0, 2) !== '//') {
+      if (!as.startsWith('//')) {
         // in order for `e.state` to work on the `onpopstate` event
         // we have to register the initial route upon initialization
         const options: TransitionOptions = { locale }
diff --git a/packages/next/shared/lib/router/utils/format-url.ts b/packages/next/shared/lib/router/utils/format-url.ts
index 205ab30a7142..efc9df8c4ea4 100644
--- a/packages/next/shared/lib/router/utils/format-url.ts
+++ b/packages/next/shared/lib/router/utils/format-url.ts
@@ -51,7 +51,7 @@ export function formatUrl(urlObj: UrlObject) {
 
   let search = urlObj.search || (query && `?${query}`) || ''
 
-  if (protocol && protocol.substr(-1) !== ':') protocol += ':'
+  if (protocol && !protocol.endsWith(':')) protocol += ':'
 
   if (
     urlObj.slashes ||
diff --git a/packages/next/shared/lib/router/utils/prepare-destination.ts b/packages/next/shared/lib/router/utils/prepare-destination.ts
index f91526c4d353..5653948c4fd9 100644
--- a/packages/next/shared/lib/router/utils/prepare-destination.ts
+++ b/packages/next/shared/lib/router/utils/prepare-destination.ts
@@ -109,7 +109,7 @@ export function compileNonPath(value: string, params: Params): string {
 
   // the value needs to start with a forward-slash to be compiled
   // correctly
-  return compile(`/${value}`, { validate: false })(params).substr(1)
+  return compile(`/${value}`, { validate: false })(params).slice(1)
 }
 
 export function prepareDestination(args: {
diff --git a/packages/next/shared/lib/router/utils/route-regex.ts b/packages/next/shared/lib/router/utils/route-regex.ts
index ca26d12a1e1f..0787b623437b 100644
--- a/packages/next/shared/lib/router/utils/route-regex.ts
+++ b/packages/next/shared/lib/router/utils/route-regex.ts
@@ -73,7 +73,7 @@ export function getParametrizedRoute(route: string) {
           if (cleanedKey.length === 0 || cleanedKey.length > 30) {
             invalidKey = true
           }
-          if (!isNaN(parseInt(cleanedKey.substr(0, 1)))) {
+          if (!isNaN(parseInt(cleanedKey.slice(0, 1)))) {
             invalidKey = true
           }
 
diff --git a/test/integration/api-support/test/index.test.js b/test/integration/api-support/test/index.test.js
index b81e387c7f82..09df1e904625 100644
--- a/test/integration/api-support/test/index.test.js
+++ b/test/integration/api-support/test/index.test.js
@@ -50,7 +50,7 @@ function runTests(dev = false) {
     expect(res2.headers.get('transfer-encoding')).toBe(null)
 
     if (dev) {
-      expect(stderr.substr(stderrIdx)).toContain(
+      expect(stderr.slice(stderrIdx)).toContain(
         'A body was attempted to be set with a 204 statusCode'
       )
     }
@@ -509,7 +509,7 @@ function runTests(dev = false) {
     it('should not show warning when the API resolves and the response is piped', async () => {
       const startIdx = stderr.length > 0 ? stderr.length - 1 : stderr.length
       await fetchViaHTTP(appPort, `/api/test-res-pipe`, { port: appPort })
-      expect(stderr.substr(startIdx)).not.toContain(
+      expect(stderr.slice(startIdx)).not.toContain(
         `API resolved without sending a response for /api/test-res-pipe`
       )
     })
@@ -527,7 +527,7 @@ function runTests(dev = false) {
       const startIdx = stderr.length > 0 ? stderr.length - 1 : stderr.length
       const apiURL = '/api/external-resolver'
       const req = await fetchViaHTTP(appPort, apiURL)
-      expect(stderr.substr(startIdx)).not.toContain(
+      expect(stderr.slice(startIdx)).not.toContain(
         `API resolved without sending a response for ${apiURL}`
       )
       expect(await req.text()).toBe('hello world')
diff --git a/test/integration/export-serverless/test/browser.js b/test/integration/export-serverless/test/browser.js
index 4749bd0cd63a..c39e0286a036 100644
--- a/test/integration/export-serverless/test/browser.js
+++ b/test/integration/export-serverless/test/browser.js
@@ -18,7 +18,7 @@ export default function (context) {
         .elementByCss('#about-via-link')
         .getAttribute('href')
 
-      expect(link.substr(link.length - 1)).toBe('/')
+      expect(link.slice(-1)).toBe('/')
     })
 
     it('should not add trailing slash on Link when disabled', async () => {
@@ -27,7 +27,7 @@ export default function (context) {
         .elementByCss('#about-via-link')
         .getAttribute('href')
 
-      expect(link.substr(link.length - 1)).not.toBe('/')
+      expect(link.slice(-1)).not.toBe('/')
     })
 
     it('should do navigations via Link', async () => {
diff --git a/test/integration/export/test/browser.js b/test/integration/export/test/browser.js
index d6418e631679..a95ea501de85 100644
--- a/test/integration/export/test/browser.js
+++ b/test/integration/export/test/browser.js
@@ -18,7 +18,7 @@ export default function (context) {
         .elementByCss('#about-via-link')
         .getAttribute('href')
 
-      expect(link.substr(link.length - 1)).toBe('/')
+      expect(link.slice(-1)).toBe('/')
     })
 
     it('should not add any slash on hash Link', async () => {
@@ -52,7 +52,7 @@ export default function (context) {
         .elementByCss('#about-via-link')
         .getAttribute('href')
 
-      expect(link.substr(link.length - 1)).not.toBe('/')
+      expect(link.slice(-1)).not.toBe('/')
     })
 
     it('should do navigations via Link', async () => {
diff --git a/test/integration/server-side-dev-errors/test/index.test.js b/test/integration/server-side-dev-errors/test/index.test.js
index 11a40d4f08c0..f2570ffcd184 100644
--- a/test/integration/server-side-dev-errors/test/index.test.js
+++ b/test/integration/server-side-dev-errors/test/index.test.js
@@ -49,7 +49,7 @@ describe('server-side dev errors', () => {
       const browser = await webdriver(appPort, '/gsp')
 
       await check(async () => {
-        const err = stderr.substr(stderrIdx)
+        const err = stderr.slice(stderrIdx)
 
         return err.includes('pages/gsp.js') &&
           err.includes('6:2') &&
@@ -81,7 +81,7 @@ describe('server-side dev errors', () => {
       const browser = await webdriver(appPort, '/gssp')
 
       await check(async () => {
-        const err = stderr.substr(stderrIdx)
+        const err = stderr.slice(stderrIdx)
 
         return err.includes('pages/gssp.js') &&
           err.includes('6:2') &&
@@ -113,7 +113,7 @@ describe('server-side dev errors', () => {
       const browser = await webdriver(appPort, '/blog/first')
 
       await check(async () => {
-        const err = stderr.substr(stderrIdx)
+        const err = stderr.slice(stderrIdx)
 
         return err.includes('pages/blog/[slug].js') &&
           err.includes('6:2') &&
@@ -145,7 +145,7 @@ describe('server-side dev errors', () => {
       const browser = await webdriver(appPort, '/api/hello')
 
       await check(async () => {
-        const err = stderr.substr(stderrIdx)
+        const err = stderr.slice(stderrIdx)
 
         return err.includes('pages/api/hello.js') &&
           err.includes('2:2') &&
@@ -177,7 +177,7 @@ describe('server-side dev errors', () => {
       const browser = await webdriver(appPort, '/api/blog/first')
 
       await check(async () => {
-        const err = stderr.substr(stderrIdx)
+        const err = stderr.slice(stderrIdx)
 
         return err.includes('pages/api/blog/[slug].js') &&
           err.includes('2:2') &&
@@ -202,7 +202,7 @@ describe('server-side dev errors', () => {
     await webdriver(appPort, '/uncaught-rejection')
 
     await check(async () => {
-      const err = stderr.substr(stderrIdx)
+      const err = stderr.slice(stderrIdx)
 
       return err.includes('pages/uncaught-rejection.js') &&
         err.includes('7:19') &&
@@ -218,7 +218,7 @@ describe('server-side dev errors', () => {
     await webdriver(appPort, '/uncaught-exception')
 
     await check(async () => {
-      const err = stderr.substr(stderrIdx)
+      const err = stderr.slice(stderrIdx)
 
       return err.includes('pages/uncaught-exception.js') &&
         err.includes('7:10') &&
diff --git a/test/lib/next-modes/next-start.ts b/test/lib/next-modes/next-start.ts
index 4317a28fb1ea..a1b89f25a9f4 100644
--- a/test/lib/next-modes/next-start.ts
+++ b/test/lib/next-modes/next-start.ts
@@ -142,7 +142,7 @@ export class NextStartInstance extends NextInstance {
         this.childProcess = undefined
         resolve({
           exitCode: signal || code,
-          cliOutput: this.cliOutput.substr(curOutput),
+          cliOutput: this.cliOutput.slice(curOutput),
         })
       })
     })

From b21e3c258e24becc3c33397c023c0c9d9af59f75 Mon Sep 17 00:00:00 2001
From: CommanderRoot <CommanderRoot@users.noreply.github.com>
Date: Thu, 24 Mar 2022 23:35:33 +0100
Subject: [PATCH 14/39] test: warn on substr() usage (#35499)

* test: warn on substr() usage

Don't allow any new substr() usage after #35421

Signed-off-by: Tobias Speicher <rootcommander@gmail.com>

* Apply suggestions from code review

* Use slice in router-utils

Co-authored-by: Steven <steven@ceriously.com>
---
 .eslintrc.json                       | 9 ++++++++-
 packages/next/server/router-utils.ts | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 224a065e585b..3f4f64868a1e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -203,7 +203,14 @@
     "no-octal-escape": "warn",
     "no-redeclare": ["warn", { "builtinGlobals": false }],
     "no-regex-spaces": "warn",
-    "no-restricted-syntax": ["warn", "WithStatement"],
+    "no-restricted-syntax": [
+      "warn",
+      "WithStatement",
+      {
+        "message": "substr() is deprecated, use slice() or substring() instead",
+        "selector": "MemberExpression > Identifier[name='substr']"
+      }
+    ],
     "no-script-url": "warn",
     "no-self-assign": "warn",
     "no-self-compare": "warn",
diff --git a/packages/next/server/router-utils.ts b/packages/next/server/router-utils.ts
index 630521434fdb..c25ea5eeb572 100644
--- a/packages/next/server/router-utils.ts
+++ b/packages/next/server/router-utils.ts
@@ -3,7 +3,7 @@ export function replaceBasePath(pathname: string, basePath: string): string {
   // and doesn't contain extra chars e.g. basePath /docs
   // should replace for /docs, /docs/, /docs/a but not /docsss
   if (hasBasePath(pathname, basePath)) {
-    pathname = pathname.substr(basePath.length)
+    pathname = pathname.slice(basePath.length)
     if (!pathname.startsWith('/')) pathname = `/${pathname}`
   }
   return pathname

From a5540e8fda35735349fe37d0683fc424bbffcbbf Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Fri, 25 Mar 2022 10:32:52 -0500
Subject: [PATCH 15/39] v12.1.1-canary.18

---
 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-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index b9c10c6aca41..16fb349ba59c 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1-canary.17"
+  "version": "12.1.1-canary.18"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 7199c8a27ed1..a2825ef8f68f 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 5d5c053bb88f..b816a4629161 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "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.1.1-canary.17",
+    "@next/eslint-plugin-next": "12.1.1-canary.18",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 62ceddaf8f8a..46d98fb0d8f4 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": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "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 0b1b0d037c3c..d88059d9a586 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 6af12dfa01a5..235b6e136346 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 69010149c17d..d88c7f4fa4a8 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index f3b865480071..f547d0d3c374 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 32bc832788d5..ae0b6ffe311d 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "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 364f2434a25f..395cb72658e9 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "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 7ddbeca5bfcb..0e706ea2d62f 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 5d845564fdb6..f1a189449bf6 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index a4b1be4de6f1..a0e2f2a58ae6 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.1-canary.17",
+    "@next/env": "12.1.1-canary.18",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.1-canary.17",
-    "@next/polyfill-nomodule": "12.1.1-canary.17",
-    "@next/react-dev-overlay": "12.1.1-canary.17",
-    "@next/react-refresh-utils": "12.1.1-canary.17",
-    "@next/swc": "12.1.1-canary.17",
+    "@next/polyfill-module": "12.1.1-canary.18",
+    "@next/polyfill-nomodule": "12.1.1-canary.18",
+    "@next/react-dev-overlay": "12.1.1-canary.18",
+    "@next/react-refresh-utils": "12.1.1-canary.18",
+    "@next/swc": "12.1.1-canary.18",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 57db00907726..0cfc08b468ab 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": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "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 83cbad74a15f..97dd09b72a2f 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": "12.1.1-canary.17",
+  "version": "12.1.1-canary.18",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From 79a8651bc454c0d2be6e805237bbe93ad6bf02ab Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Fri, 25 Mar 2022 11:45:19 -0500
Subject: [PATCH 16/39] v12.1.1

---
 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-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index 16fb349ba59c..c4a024fa4c6e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1-canary.18"
+  "version": "12.1.1"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index a2825ef8f68f..4930dae2ffff 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index b816a4629161..4ce4c72cc722 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "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.1.1-canary.18",
+    "@next/eslint-plugin-next": "12.1.1",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 46d98fb0d8f4..d6ee485482cd 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": "12.1.1-canary.18",
+  "version": "12.1.1",
   "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 d88059d9a586..709af5bc4588 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 235b6e136346..84a82572964e 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index d88c7f4fa4a8..0018d374c75c 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index f547d0d3c374..7b27d9a64da0 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index ae0b6ffe311d..91646c423264 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "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 395cb72658e9..3c174e5185fc 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "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 0e706ea2d62f..256b9ccec795 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index f1a189449bf6..4db275b71c12 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index a0e2f2a58ae6..532b3d3cfab5 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.1-canary.18",
+  "version": "12.1.1",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.1-canary.18",
+    "@next/env": "12.1.1",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.1-canary.18",
-    "@next/polyfill-nomodule": "12.1.1-canary.18",
-    "@next/react-dev-overlay": "12.1.1-canary.18",
-    "@next/react-refresh-utils": "12.1.1-canary.18",
-    "@next/swc": "12.1.1-canary.18",
+    "@next/polyfill-module": "12.1.1",
+    "@next/polyfill-nomodule": "12.1.1",
+    "@next/react-dev-overlay": "12.1.1",
+    "@next/react-refresh-utils": "12.1.1",
+    "@next/swc": "12.1.1",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 0cfc08b468ab..a71b0e09a600 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": "12.1.1-canary.18",
+  "version": "12.1.1",
   "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 97dd09b72a2f..d7391a1b5849 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": "12.1.1-canary.18",
+  "version": "12.1.1",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From 4e8e191a6e6520aca82e32e108f1f5ae6146b577 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 25 Mar 2022 22:17:33 +0100
Subject: [PATCH 17/39] RSC: handle commonjs in flight loader (#35563)

We need to handle cjs cases for client/server components when they're compiled to commonjs in some cases.
e.g. if there's an internal `_app.server.js` in nextjs, the assets in the dist files are compiled to cjs by swc. Or any 3rd party libraries are consumed could be cjs only.

### How it works

* Detect the source file is ESM or CJS first by detect if there's any ESM import/export
* Append the new exports or collect exports info based on the module type
---
 .../loaders/next-flight-client-loader.ts      | 55 ++++++++++++-------
 .../loaders/next-flight-server-loader.ts      | 30 ++++++----
 packages/next/build/webpack/loaders/utils.ts  | 21 +++++++
 .../app/components/cjs.client.js              |  3 +
 .../app/components/cjs.js                     |  3 +
 .../app/pages/various-exports.server.js       |  8 +++
 .../test/rsc.js                               |  2 +
 7 files changed, 92 insertions(+), 30 deletions(-)
 create mode 100644 packages/next/build/webpack/loaders/utils.ts
 create mode 100644 test/integration/react-streaming-and-server-components/app/components/cjs.client.js
 create mode 100644 test/integration/react-streaming-and-server-components/app/components/cjs.js

diff --git a/packages/next/build/webpack/loaders/next-flight-client-loader.ts b/packages/next/build/webpack/loaders/next-flight-client-loader.ts
index c08689af661e..ee60abb516d1 100644
--- a/packages/next/build/webpack/loaders/next-flight-client-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-client-loader.ts
@@ -6,6 +6,7 @@
  */
 
 import { parse } from '../../swc'
+import { buildExports } from './utils'
 
 function addExportNames(names: string[], node: any) {
   switch (node.type) {
@@ -39,7 +40,7 @@ function addExportNames(names: string[], node: any) {
   }
 }
 
-async function parseExportNamesInto(
+async function parseModuleInfo(
   resourcePath: string,
   transformedSource: string,
   names: Array<string>
@@ -56,7 +57,7 @@ async function parseExportNamesInto(
       case 'ExportDefaultExpression':
       case 'ExportDefaultDeclaration':
         names.push('default')
-        continue
+        break
       case 'ExportNamedDeclaration':
         if (node.declaration) {
           if (node.declaration.type === 'VariableDeclaration') {
@@ -74,12 +75,26 @@ async function parseExportNamesInto(
             addExportNames(names, specificers[j].exported)
           }
         }
-        continue
+        break
       case 'ExportDeclaration':
         if (node.declaration?.identifier) {
           addExportNames(names, node.declaration.identifier)
         }
-        continue
+        break
+      case 'ExpressionStatement': {
+        const {
+          expression: { left },
+        } = node
+        // exports.xxx = xxx
+        if (
+          left.type === 'MemberExpression' &&
+          left?.object.type === 'Identifier' &&
+          left.object?.value === 'exports'
+        ) {
+          addExportNames(names, left.property)
+        }
+        break
+      }
       default:
         break
     }
@@ -98,28 +113,28 @@ export default async function transformSource(
   }
 
   const names: string[] = []
-  await parseExportNamesInto(resourcePath, transformedSource, names)
+  await parseModuleInfo(resourcePath, transformedSource, names)
 
   // next.js/packages/next/<component>.js
   if (/[\\/]next[\\/](link|image)\.js$/.test(resourcePath)) {
     names.push('default')
   }
 
-  let newSrc =
+  const moduleRefDef =
     "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n"
-  for (let i = 0; i < names.length; i++) {
-    const name = names[i]
-    if (name === 'default') {
-      newSrc += 'export default '
-    } else {
-      newSrc += 'export const ' + name + ' = '
-    }
-    newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: '
-    newSrc += JSON.stringify(resourcePath)
-    newSrc += ', name: '
-    newSrc += JSON.stringify(name)
-    newSrc += '};\n'
-  }
 
-  return newSrc
+  const clientRefsExports = names.reduce((res: any, name) => {
+    const moduleRef =
+      '{ $$typeof: MODULE_REFERENCE, filepath: ' +
+      JSON.stringify(resourcePath) +
+      ', name: ' +
+      JSON.stringify(name) +
+      ' };\n'
+    res[name] = moduleRef
+    return res
+  }, {})
+
+  // still generate module references in ESM
+  const output = moduleRefDef + buildExports(clientRefsExports, true)
+  return output
 }
diff --git a/packages/next/build/webpack/loaders/next-flight-server-loader.ts b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
index dc8884da6fc3..b87f234690b1 100644
--- a/packages/next/build/webpack/loaders/next-flight-server-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
@@ -1,5 +1,6 @@
 import { parse } from '../../swc'
 import { getRawPageExtensions } from '../../utils'
+import { buildExports, isEsmNodeType } from './utils'
 
 const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
 
@@ -24,7 +25,7 @@ const createServerComponentFilter = (pageExtensions: string[]) => {
   return (importSource: string) => regex.test(importSource)
 }
 
-async function parseImportsInfo({
+async function parseModuleInfo({
   resourcePath,
   source,
   isClientCompilation,
@@ -39,16 +40,18 @@ async function parseImportsInfo({
 }): Promise<{
   source: string
   imports: string
+  isEsm: boolean
 }> {
   const ast = await parse(source, { filename: resourcePath, isModule: true })
   const { body } = ast
-
   let transformedSource = ''
   let lastIndex = 0
   let imports = ''
+  let isEsm = false
 
   for (let i = 0; i < body.length; i++) {
     const node = body[i]
+    isEsm = isEsm || isEsmNodeType(node.type)
     switch (node.type) {
       case 'ImportDeclaration': {
         const importSource = node.source.value
@@ -117,7 +120,7 @@ async function parseImportsInfo({
     transformedSource += source.substring(lastIndex)
   }
 
-  return { source: transformedSource, imports }
+  return { source: transformedSource, imports, isEsm }
 }
 
 export default async function transformSource(
@@ -152,7 +155,11 @@ export default async function transformSource(
     }
   }
 
-  const { source: transformedSource, imports } = await parseImportsInfo({
+  const {
+    source: transformedSource,
+    imports,
+    isEsm,
+  } = await parseModuleInfo({
     resourcePath,
     source,
     isClientCompilation,
@@ -172,14 +179,17 @@ export default async function transformSource(
    *   export const __next_rsc__ = { __webpack_require__, _: () => { ... } }
    */
 
-  let rscExports = `export const __next_rsc__={
-    __webpack_require__,
-    _: () => {${imports}}
-  }`
+  const rscExports: any = {
+    __next_rsc__: `{
+      __webpack_require__,
+      _: () => {\n${imports}\n}
+    }`,
+  }
 
   if (isClientCompilation) {
-    rscExports += '\nexport default function RSC () {}'
+    rscExports['default'] = 'function RSC() {}'
   }
 
-  return transformedSource + '\n' + rscExports
+  const output = transformedSource + '\n' + buildExports(rscExports, isEsm)
+  return output
 }
diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
new file mode 100644
index 000000000000..c0628c568154
--- /dev/null
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -0,0 +1,21 @@
+export function buildExports(moduleExports: any, isESM: boolean) {
+  let ret = ''
+  Object.keys(moduleExports).forEach((key) => {
+    const exportExpression = isESM
+      ? `export ${key === 'default' ? key : `const ${key} =`} ${
+          moduleExports[key]
+        }`
+      : `exports.${key} = ${moduleExports[key]}`
+
+    ret += exportExpression + '\n'
+  })
+  return ret
+}
+
+const esmNodeTypes = [
+  'ImportDeclaration',
+  'ExportNamedDeclaration',
+  'ExportDefaultExpression',
+  'ExportDefaultDeclaration',
+]
+export const isEsmNodeType = (type: string) => esmNodeTypes.includes(type)
diff --git a/test/integration/react-streaming-and-server-components/app/components/cjs.client.js b/test/integration/react-streaming-and-server-components/app/components/cjs.client.js
new file mode 100644
index 000000000000..d3c078184ab6
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/components/cjs.client.js
@@ -0,0 +1,3 @@
+exports.Cjs = function Cjs() {
+  return 'cjs-client'
+}
diff --git a/test/integration/react-streaming-and-server-components/app/components/cjs.js b/test/integration/react-streaming-and-server-components/app/components/cjs.js
new file mode 100644
index 000000000000..444f1229a227
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/components/cjs.js
@@ -0,0 +1,3 @@
+exports.Cjs = function Cjs() {
+  return 'cjs-shared'
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js b/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js
index b89234a14c6b..5a9b4ce9acb5 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js
@@ -4,6 +4,8 @@ import { a, b, c, d, e } from '../components/shared-exports'
 import DefaultArrow, {
   Named as ClientNamed,
 } from '../components/client-exports.client'
+import { Cjs as CjsShared } from '../components/cjs'
+import { Cjs as CjsClient } from '../components/cjs.client'
 
 export default function Page() {
   return (
@@ -21,6 +23,12 @@ export default function Page() {
       <div>
         <ClientNamed />
       </div>
+      <di>
+        <CjsShared />
+      </di>
+      <di>
+        <CjsClient />
+      </di>
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/test/rsc.js b/test/integration/react-streaming-and-server-components/test/rsc.js
index 472e03559bc7..0078f7056f64 100644
--- a/test/integration/react-streaming-and-server-components/test/rsc.js
+++ b/test/integration/react-streaming-and-server-components/test/rsc.js
@@ -206,6 +206,8 @@ export default function (context, { runtime, env }) {
     expect(hydratedContent).toContain('abcde')
     expect(hydratedContent).toContain('default-export-arrow.client')
     expect(hydratedContent).toContain('named.client')
+    expect(hydratedContent).toContain('cjs-shared')
+    expect(hydratedContent).toContain('cjs-client')
   })
 
   it('should handle 404 requests and missing routes correctly', async () => {

From d5e122594da9d6936c0c92cd59a20b6f6eff1fb0 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 25 Mar 2022 22:54:07 +0100
Subject: [PATCH 18/39] Update rsc refresh typing and doc example (#35543)

* Update rsc refresh typing and doc example

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

Co-authored-by: Shu Ding <g@shud.in>

Co-authored-by: Shu Ding <g@shud.in>
---
 docs/api-reference/next/streaming.md      | 2 ++
 packages/next/client/index.tsx            | 2 +-
 packages/next/client/streaming/refresh.ts | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/api-reference/next/streaming.md b/docs/api-reference/next/streaming.md
index 210b18c48df3..90b651435677 100644
--- a/docs/api-reference/next/streaming.md
+++ b/docs/api-reference/next/streaming.md
@@ -88,6 +88,8 @@ export default function Search() {
     <SearchUI
       onChange={() => {
         refresh()
+        // Or refresh with updated props:
+        // refresh(nextProps)
       }}
     />
   )
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index cd2f3fc315b2..941c51bcd9db 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -808,7 +808,7 @@ if (process.env.__NEXT_RSC) {
     const startTransition = (React as any).startTransition
     const rerender = () => dispatch({})
     // If there is no cache, or there is serialized data already
-    function refreshCache(nextProps: any) {
+    function refreshCache(nextProps?: any) {
       startTransition(() => {
         const currentCacheKey = getCacheKey()
         const response = createFromFetch(
diff --git a/packages/next/client/streaming/refresh.ts b/packages/next/client/streaming/refresh.ts
index 7caa504a4deb..c79d3c21ecd3 100644
--- a/packages/next/client/streaming/refresh.ts
+++ b/packages/next/client/streaming/refresh.ts
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 
-export const RefreshContext = createContext((_: any) => {})
+export const RefreshContext = createContext((_props?: any) => {})
 
 export function useRefreshRoot() {
   return useContext(RefreshContext)

From 4f6bb5e4fa432692d4ac54c302e4eee8534c5960 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sat, 26 Mar 2022 00:05:35 +0100
Subject: [PATCH 19/39] Revert "Revert "Make concurrent features independent
 from the global runtime option"" (#35490)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Jiachi Liu <inbox@huozhi.im>
---
 packages/next/build/entries.ts                |   3 -
 packages/next/build/index.ts                  |  35 +++--
 packages/next/build/webpack-config.ts         |  13 +-
 packages/next/export/index.ts                 |   1 +
 packages/next/export/worker.ts                |  11 +-
 packages/next/server/dev/hot-reloader.ts      |  13 +-
 packages/next/server/load-components.ts       |  18 ++-
 packages/next/server/next-server.ts           |   2 +-
 packages/next/server/render.tsx               |  17 +--
 packages/next/shared/lib/html-context.ts      |   1 +
 .../react-18-invalid-config/index.test.js     |  13 --
 .../react-18/app/pages/suspense/no-preload.js |   3 +-
 test/integration/react-18/test/basics.js      |   2 +-
 test/integration/react-18/test/blocking.js    |   7 +-
 .../app/pages/err/render.js                   |   4 +
 .../app/pages/err/suspense.js                 |   4 +
 .../app/pages/next-api/image.server.js        |   4 +
 .../app/pages/next-api/link.server.js         |   4 +
 .../app/pages/partial-hydration.server.js     |   4 +
 .../app/pages/routes/[dynamic].server.js      |   4 +
 .../app/pages/streaming-rsc.server.js         |   4 +
 .../app/pages/streaming.js                    |   4 +
 .../switchable-runtime/next.config.js         |   9 ++
 .../switchable-runtime/package.json           |   9 ++
 .../switchable-runtime/pages-manifest.json    |   9 ++
 .../pages/edge-rsc.server.js                  |  18 +++
 .../switchable-runtime/pages/edge.js          |  18 +++
 .../pages/node-rsc-ssg.server.js              |  26 ++++
 .../pages/node-rsc-ssr.server.js              |  26 ++++
 .../pages/node-rsc.server.js                  |  18 +++
 .../switchable-runtime/pages/node-ssg.js      |  26 ++++
 .../switchable-runtime/pages/node-ssr.js      |  26 ++++
 .../switchable-runtime/pages/node.js          |  18 +++
 .../switchable-runtime/pages/static.js        |  14 ++
 .../switchable-runtime/utils/runtime.js       |   3 +
 .../switchable-runtime/utils/time.js          |   3 +
 .../test/switchable-runtime.test.js           | 127 ++++++++++++++++++
 .../unsupported-native-module/next.config.js  |   1 -
 .../unsupported-native-module/pages/index.js  |   4 +
 39 files changed, 468 insertions(+), 58 deletions(-)
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/next.config.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/package.json
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages-manifest.json
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
 create mode 100644 test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
 create mode 100644 test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js

diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index 304b7047b149..c6a57df897a0 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -187,9 +187,6 @@ export async function getPageRuntime(
   if (!pageRuntime) {
     if (isRuntimeRequired) {
       pageRuntime = globalRuntimeFallback
-    } else {
-      // @TODO: Remove this branch to fully implement the RFC.
-      pageRuntime = globalRuntimeFallback
     }
   }
 
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index ab9f40a27a6b..8709592226b0 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -76,7 +76,11 @@ import {
 } from '../telemetry/events'
 import { Telemetry } from '../telemetry/storage'
 import { CompilerResult, runCompiler } from './compiler'
-import { createEntrypoints, createPagesMapping } from './entries'
+import {
+  createEntrypoints,
+  createPagesMapping,
+  getPageRuntime,
+} from './entries'
 import { generateBuildId } from './generate-build-id'
 import { isWriteable } from './is-writeable'
 import * as Log from './output/log'
@@ -153,11 +157,10 @@ export default async function build(
     setGlobal('phase', PHASE_PRODUCTION_BUILD)
     setGlobal('distDir', distDir)
 
-    // Currently, when the runtime option is set (either `nodejs` or `edge`),
-    // we enable concurrent features (Fizz-related rendering architecture).
-    const runtime = config.experimental.runtime
+    // We enable concurrent features (Fizz-related rendering architecture) when
+    // using React 18 or experimental.
     const hasReactRoot = shouldUseReactRoot()
-    const hasConcurrentFeatures = !!runtime
+    const hasConcurrentFeatures = hasReactRoot
 
     const hasServerComponents =
       hasReactRoot && !!config.experimental.serverComponents
@@ -622,6 +625,7 @@ export default async function build(
               entrypoints: entrypoints.client,
               rewrites,
               runWebpackSpan,
+              hasReactRoot,
             }),
             getBaseWebpackConfig(dir, {
               buildId,
@@ -633,6 +637,7 @@ export default async function build(
               entrypoints: entrypoints.server,
               rewrites,
               runWebpackSpan,
+              hasReactRoot,
             }),
             hasReactRoot
               ? getBaseWebpackConfig(dir, {
@@ -646,6 +651,7 @@ export default async function build(
                   entrypoints: entrypoints.edgeServer,
                   rewrites,
                   runWebpackSpan,
+                  hasReactRoot,
                 })
               : null,
           ])
@@ -954,10 +960,22 @@ export default async function build(
             let ssgPageRoutes: string[] | null = null
             let isMiddlewareRoute = !!page.match(MIDDLEWARE_ROUTE)
 
+            const pagePath = pagePaths.find((_path) =>
+              _path.startsWith(actualPage + '.')
+            )
+            const pageRuntime =
+              hasConcurrentFeatures && pagePath
+                ? await getPageRuntime(
+                    join(pagesDir, pagePath),
+                    config.experimental.runtime
+                  )
+                : null
+
             if (
               !isMiddlewareRoute &&
               !isReservedPage(page) &&
-              !hasConcurrentFeatures
+              // We currently don't support staic optimization in the Edge runtime.
+              pageRuntime !== 'edge'
             ) {
               try {
                 let isPageStaticSpan =
@@ -1483,10 +1501,7 @@ export default async function build(
 
     const combinedPages = [...staticPages, ...ssgPages]
 
-    if (
-      !hasConcurrentFeatures &&
-      (combinedPages.length > 0 || useStatic404 || useDefaultStatic500)
-    ) {
+    if (combinedPages.length > 0 || useStatic404 || useDefaultStatic500) {
       const staticGenerationSpan = nextBuildSpan.traceChild('static-generation')
       await staticGenerationSpan.traceAsyncFn(async () => {
         detectConflictingPaths(
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 9ad462a01dc9..1446dccb00cf 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -52,7 +52,6 @@ import type { Span } from '../trace'
 import { getRawPageExtensions } from './utils'
 import browserslist from 'next/dist/compiled/browserslist'
 import loadJsConfig from './load-jsconfig'
-import { shouldUseReactRoot } from '../server/config'
 import { getMiddlewareSourceMapPlugins } from './webpack/plugins/middleware-source-maps-plugin'
 
 const watchOptions = Object.freeze({
@@ -314,6 +313,7 @@ export default async function getBaseWebpackConfig(
     rewrites,
     isDevFallback = false,
     runWebpackSpan,
+    hasReactRoot,
   }: {
     buildId: string
     config: NextConfigComplete
@@ -327,6 +327,7 @@ export default async function getBaseWebpackConfig(
     rewrites: CustomRoutes['rewrites']
     isDevFallback?: boolean
     runWebpackSpan: Span
+    hasReactRoot: boolean
   }
 ): Promise<webpack.Configuration> {
   const { useTypeScript, jsConfig, resolvedBaseUrl } = await loadJsConfig(
@@ -339,10 +340,10 @@ export default async function getBaseWebpackConfig(
     rewrites.afterFiles.length > 0 ||
     rewrites.fallback.length > 0
   const hasReactRefresh: boolean = dev && !isServer
-  const hasReactRoot = shouldUseReactRoot()
+
   const runtime = config.experimental.runtime
 
-  // Make sure reactRoot is enabled when react 18 is detected
+  // Make sure `reactRoot` is enabled when React 18 or experimental is detected.
   if (hasReactRoot) {
     config.experimental.reactRoot = true
   }
@@ -357,14 +358,14 @@ export default async function getBaseWebpackConfig(
       '`experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18.'
     )
   }
-  if (config.experimental.serverComponents && !runtime) {
+  if (config.experimental.serverComponents && !hasReactRoot) {
     throw new Error(
-      '`experimental.runtime` is required to be set along with `experimental.serverComponents`.'
+      '`experimental.serverComponents` requires React 18 to be installed.'
     )
   }
 
   const targetWeb = isEdgeRuntime || !isServer
-  const hasConcurrentFeatures = !!runtime && hasReactRoot
+  const hasConcurrentFeatures = hasReactRoot
   const hasServerComponents =
     hasConcurrentFeatures && !!config.experimental.serverComponents
   const disableOptimizedLoading = hasConcurrentFeatures
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index f2e468fe187d..0f241d21ffe6 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -588,6 +588,7 @@ export default async function exportApp(
               nextConfig.experimental.disableOptimizedLoading,
             parentSpanId: pageExportSpan.id,
             httpAgentOptions: nextConfig.httpAgentOptions,
+            serverComponents: nextConfig.experimental.serverComponents,
           })
 
           for (const validation of result.ampValidations || []) {
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index f2e6dbb64f13..3679b28eebd1 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -59,6 +59,7 @@ interface ExportPageInput {
   disableOptimizedLoading: any
   parentSpanId: any
   httpAgentOptions: NextConfigComplete['httpAgentOptions']
+  serverComponents?: boolean
 }
 
 interface ExportPageResults {
@@ -106,6 +107,7 @@ export default async function exportPage({
   optimizeCss,
   disableOptimizedLoading,
   httpAgentOptions,
+  serverComponents,
 }: ExportPageInput): Promise<ExportPageResults> {
   setHttpAgentOptions(httpAgentOptions)
   const exportPageSpan = trace('export-page-worker', parentSpanId)
@@ -260,7 +262,7 @@ export default async function exportPage({
           getServerSideProps,
           getStaticProps,
           pageConfig,
-        } = await loadComponents(distDir, page, serverless)
+        } = await loadComponents(distDir, page, serverless, serverComponents)
         const ampState = {
           ampFirst: pageConfig?.amp === true,
           hasQuery: Boolean(query.amp),
@@ -321,7 +323,12 @@ export default async function exportPage({
           throw new Error(`Failed to render serverless page`)
         }
       } else {
-        const components = await loadComponents(distDir, page, serverless)
+        const components = await loadComponents(
+          distDir,
+          page,
+          serverless,
+          serverComponents
+        )
         const ampState = {
           ampFirst: components.pageConfig?.amp === true,
           hasQuery: Boolean(query.amp),
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index d2ca2c8f3d55..ed5d7ee5aea3 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -154,6 +154,7 @@ export default class HotReloader {
   private config: NextConfigComplete
   private runtime?: 'nodejs' | 'edge'
   private hasServerComponents: boolean
+  private hasReactRoot: boolean
   public clientStats: webpack5.Stats | null
   public serverStats: webpack5.Stats | null
   private clientError: Error | null = null
@@ -197,7 +198,9 @@ export default class HotReloader {
 
     this.config = config
     this.runtime = config.experimental.runtime
-    this.hasServerComponents = !!config.experimental.serverComponents
+    this.hasReactRoot = shouldUseReactRoot()
+    this.hasServerComponents =
+      this.hasReactRoot && !!config.experimental.serverComponents
     this.previewProps = previewProps
     this.rewrites = rewrites
     this.hotReloaderSpan = trace('hot-reloader', undefined, {
@@ -340,8 +343,6 @@ export default class HotReloader {
           )
         )
 
-      const hasReactRoot = shouldUseReactRoot()
-
       return webpackConfigSpan
         .traceChild('generate-webpack-config')
         .traceAsyncFn(() =>
@@ -356,6 +357,7 @@ export default class HotReloader {
                 rewrites: this.rewrites,
                 entrypoints: entrypoints.client,
                 runWebpackSpan: this.hotReloaderSpan,
+                hasReactRoot: this.hasReactRoot,
               }),
               getBaseWebpackConfig(this.dir, {
                 dev: true,
@@ -366,9 +368,10 @@ export default class HotReloader {
                 rewrites: this.rewrites,
                 entrypoints: entrypoints.server,
                 runWebpackSpan: this.hotReloaderSpan,
+                hasReactRoot: this.hasReactRoot,
               }),
               // The edge runtime is only supported with React root.
-              hasReactRoot
+              this.hasReactRoot
                 ? getBaseWebpackConfig(this.dir, {
                     dev: true,
                     isServer: true,
@@ -379,6 +382,7 @@ export default class HotReloader {
                     rewrites: this.rewrites,
                     entrypoints: entrypoints.edgeServer,
                     runWebpackSpan: this.hotReloaderSpan,
+                    hasReactRoot: this.hasReactRoot,
                   })
                 : null,
             ].filter(Boolean) as webpack.Configuration[]
@@ -417,6 +421,7 @@ export default class HotReloader {
           this.pagesDir
         )
       ).client,
+      hasReactRoot: this.hasReactRoot,
     })
     const fallbackCompiler = webpack(fallbackConfig)
 
diff --git a/packages/next/server/load-components.ts b/packages/next/server/load-components.ts
index ae247d9ea66f..361f0183899d 100644
--- a/packages/next/server/load-components.ts
+++ b/packages/next/server/load-components.ts
@@ -6,6 +6,7 @@ import type {
 import {
   BUILD_MANIFEST,
   REACT_LOADABLE_MANIFEST,
+  MIDDLEWARE_FLIGHT_MANIFEST,
 } from '../shared/lib/constants'
 import { join } from 'path'
 import { requirePage } from './require'
@@ -30,6 +31,7 @@ export type LoadComponentsReturnType = {
   pageConfig: PageConfig
   buildManifest: BuildManifest
   reactLoadableManifest: ReactLoadableManifest
+  serverComponentManifest?: any | null
   Document: DocumentType
   App: AppType
   getStaticProps?: GetStaticProps
@@ -61,7 +63,8 @@ export async function loadDefaultErrorComponents(distDir: string) {
 export async function loadComponents(
   distDir: string,
   pathname: string,
-  serverless: boolean
+  serverless: boolean,
+  serverComponents?: boolean
 ): Promise<LoadComponentsReturnType> {
   if (serverless) {
     const ComponentMod = await requirePage(pathname, distDir, serverless)
@@ -102,10 +105,14 @@ export async function loadComponents(
     requirePage(pathname, distDir, serverless),
   ])
 
-  const [buildManifest, reactLoadableManifest] = await Promise.all([
-    require(join(distDir, BUILD_MANIFEST)),
-    require(join(distDir, REACT_LOADABLE_MANIFEST)),
-  ])
+  const [buildManifest, reactLoadableManifest, serverComponentManifest] =
+    await Promise.all([
+      require(join(distDir, BUILD_MANIFEST)),
+      require(join(distDir, REACT_LOADABLE_MANIFEST)),
+      serverComponents
+        ? require(join(distDir, 'server', MIDDLEWARE_FLIGHT_MANIFEST + '.json'))
+        : null,
+    ])
 
   const Component = interopDefault(ComponentMod)
   const Document = interopDefault(DocumentMod)
@@ -125,5 +132,6 @@ export async function loadComponents(
     getServerSideProps,
     getStaticProps,
     getStaticPaths,
+    serverComponentManifest,
   }
 }
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index d7fa9a4d5f8c..736cd9de1be7 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -696,7 +696,7 @@ export default class NextNodeServer extends BaseServer {
   }
 
   protected getServerComponentManifest() {
-    if (!this.nextConfig.experimental.runtime) return undefined
+    if (!this.nextConfig.experimental.serverComponents) return undefined
     return require(join(
       this.distDir,
       'server',
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index f55aad54a077..c3d1b2849d31 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -456,13 +456,13 @@ export async function renderToHTML(
     devOnlyCacheBusterQueryString,
     supportsDynamicHTML,
     images,
-    // reactRoot,
-    runtime,
+    reactRoot,
+    runtime: globalRuntime,
     ComponentMod,
     AppMod,
   } = renderOpts
 
-  const hasConcurrentFeatures = !!runtime
+  const hasConcurrentFeatures = reactRoot
 
   let Document = renderOpts.Document
   const OriginalComponent = renderOpts.Component
@@ -471,7 +471,7 @@ export async function renderToHTML(
   const isServerComponent =
     !!serverComponentManifest &&
     hasConcurrentFeatures &&
-    ComponentMod.__next_rsc__
+    !!ComponentMod.__next_rsc__
 
   let Component: React.ComponentType<{}> | ((props: any) => JSX.Element) =
     renderOpts.Component
@@ -1256,7 +1256,7 @@ export async function renderToHTML(
       | typeof Document
       | undefined
 
-    if (runtime === 'edge' && Document.getInitialProps) {
+    if (process.browser && Document.getInitialProps) {
       // In the Edge runtime, `Document.getInitialProps` isn't supported.
       // We throw an error here if it's customized.
       if (!builtinDocument) {
@@ -1342,7 +1342,8 @@ export async function renderToHTML(
         ) : (
           <Body>
             <AppContainerWithIsomorphicFiberStructure>
-              {renderOpts.serverComponents && AppMod.__next_rsc__ ? (
+              {isServerComponent && AppMod.__next_rsc__ ? (
+                // _app.server.js is used.
                 <Component {...props.pageProps} router={router} />
               ) : (
                 <App {...props} Component={Component} router={router} />
@@ -1374,7 +1375,6 @@ export async function renderToHTML(
               ),
               generateStaticHTML: true,
             })
-
             const flushed = await streamToString(flushEffectStream)
             return flushed
           }
@@ -1502,7 +1502,8 @@ export async function renderToHTML(
     optimizeCss: renderOpts.optimizeCss,
     optimizeFonts: renderOpts.optimizeFonts,
     nextScriptWorkers: renderOpts.nextScriptWorkers,
-    runtime,
+    runtime: globalRuntime,
+    hasConcurrentFeatures,
   }
 
   const document = (
diff --git a/packages/next/shared/lib/html-context.ts b/packages/next/shared/lib/html-context.ts
index 0a4455715361..b069fca0f49f 100644
--- a/packages/next/shared/lib/html-context.ts
+++ b/packages/next/shared/lib/html-context.ts
@@ -38,6 +38,7 @@ export type HtmlProps = {
   optimizeFonts?: boolean
   nextScriptWorkers?: boolean
   runtime?: 'edge' | 'nodejs'
+  hasConcurrentFeatures?: boolean
 }
 
 export const HtmlContext = createContext<HtmlProps>(null as any)
diff --git a/test/integration/react-18-invalid-config/index.test.js b/test/integration/react-18-invalid-config/index.test.js
index e0096a0b3502..9372f0f199f4 100644
--- a/test/integration/react-18-invalid-config/index.test.js
+++ b/test/integration/react-18-invalid-config/index.test.js
@@ -25,19 +25,6 @@ describe('Invalid react 18 webpack config', () => {
     )
   })
 
-  it('should require `experimental.runtime` for server components', async () => {
-    writeNextConfig({
-      reactRoot: true,
-      serverComponents: true,
-    })
-    const { stderr } = await nextBuild(appDir, [], { stderr: true })
-    nextConfig.restore()
-
-    expect(stderr).toContain(
-      '`experimental.runtime` is required to be set along with `experimental.serverComponents`.'
-    )
-  })
-
   it('should warn user when not using react 18 and `experimental.reactRoot` is enabled', async () => {
     const reactDomPackagePah = join(appDir, 'node_modules/react-dom')
     await fs.mkdirp(reactDomPackagePah)
diff --git a/test/integration/react-18/app/pages/suspense/no-preload.js b/test/integration/react-18/app/pages/suspense/no-preload.js
index aaf54e244118..8ae8c7c599f2 100644
--- a/test/integration/react-18/app/pages/suspense/no-preload.js
+++ b/test/integration/react-18/app/pages/suspense/no-preload.js
@@ -2,6 +2,7 @@ import { Suspense } from 'react'
 import dynamic from 'next/dynamic'
 
 const Bar = dynamic(() => import('../../components/bar'), {
+  ssr: false,
   suspense: true,
   // Explicitly declare loaded modules.
   // For suspense cases, they'll be ignored.
@@ -14,7 +15,7 @@ const Bar = dynamic(() => import('../../components/bar'), {
 
 export default function NoPreload() {
   return (
-    <Suspense fallback={'rab'}>
+    <Suspense fallback={'fallback'}>
       <Bar />
     </Suspense>
   )
diff --git a/test/integration/react-18/test/basics.js b/test/integration/react-18/test/basics.js
index debbad85a56b..bc63d2ad4f0f 100644
--- a/test/integration/react-18/test/basics.js
+++ b/test/integration/react-18/test/basics.js
@@ -31,7 +31,7 @@ export default (context) => {
     const nextData = JSON.parse($('#__NEXT_DATA__').text())
     const content = $('#__next').text()
     // <Bar> is suspended
-    expect(content).toBe('rab')
+    expect(content).toBe('fallback')
     expect(nextData.dynamicIds).toBeUndefined()
   })
 
diff --git a/test/integration/react-18/test/blocking.js b/test/integration/react-18/test/blocking.js
index c4feeb2e8a30..0db4aacd6cf9 100644
--- a/test/integration/react-18/test/blocking.js
+++ b/test/integration/react-18/test/blocking.js
@@ -8,15 +8,16 @@ export default (context, render) => {
     return cheerio.load(html)
   }
 
-  it('should render fallback on server side if suspense without preload', async () => {
+  it('should render fallback on server side if suspense without ssr', async () => {
     const $ = await get$('/suspense/no-preload')
     const nextData = JSON.parse($('#__NEXT_DATA__').text())
     const content = $('#__next').text()
-    expect(content).toBe('rab')
+    expect(content).toBe('fallback')
     expect(nextData.dynamicIds).toBeUndefined()
   })
 
-  it('should render fallback on server side if suspended on server with preload', async () => {
+  // Testing the same thing as above.
+  it.skip('should render import fallback on server side if suspended without ssr', async () => {
     const $ = await get$('/suspense/thrown')
     const html = $('body').html()
     expect(html).toContain('loading')
diff --git a/test/integration/react-streaming-and-server-components/app/pages/err/render.js b/test/integration/react-streaming-and-server-components/app/pages/err/render.js
index 0c6ec0bd1bae..7d9d321f7cb0 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/err/render.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/err/render.js
@@ -5,3 +5,7 @@ export default function MyError() {
     throw new Error('oops')
   }
 }
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js b/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js
index e23ccd094bba..05f85b9f4b16 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/err/suspense.js
@@ -18,3 +18,7 @@ export default function page() {
     </>
   )
 }
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js b/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js
index 0083c3b9d4cc..96c50ace36a5 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/next-api/image.server.js
@@ -7,3 +7,7 @@ const Page = () => {
 }
 
 export default Page
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js b/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js
index a4d5cb765082..1162cea6f999 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js
@@ -16,3 +16,7 @@ export default function LinkPage({ router }) {
     </>
   )
 }
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js b/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js
index c3740b8719fe..8604f3bdcb72 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/partial-hydration.server.js
@@ -40,3 +40,7 @@ export default function () {
     </>
   )
 }
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js b/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js
index 288d6165f999..27c7c0bddf02 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js
@@ -1,3 +1,7 @@
 export default function Pid({ router }) {
   return <div>{`query: ${router.query.dynamic}`}</div>
 }
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js b/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js
index c6653c9e71f8..7d7c0cacce37 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/streaming-rsc.server.js
@@ -29,3 +29,7 @@ export default function Page() {
     </div>
   )
 }
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/streaming.js b/test/integration/react-streaming-and-server-components/app/pages/streaming.js
index ac58f5e9e2c3..70aaf4ced70e 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/streaming.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/streaming.js
@@ -21,3 +21,7 @@ export default function Page() {
     </Suspense>
   )
 }
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/next.config.js b/test/integration/react-streaming-and-server-components/switchable-runtime/next.config.js
new file mode 100644
index 000000000000..7b4ccb839cd6
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/next.config.js
@@ -0,0 +1,9 @@
+const withReact18 = require('../../react-18/test/with-react-18')
+
+module.exports = withReact18({
+  reactStrictMode: true,
+  experimental: {
+    serverComponents: true,
+    // runtime: 'edge',
+  },
+})
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/package.json b/test/integration/react-streaming-and-server-components/switchable-runtime/package.json
new file mode 100644
index 000000000000..90af0ce830c9
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/package.json
@@ -0,0 +1,9 @@
+{
+  "private": true,
+  "scripts": {
+    "lnext": "node -r ../../react-18/test/require-hook.js ../../../../packages/next/dist/bin/next",
+    "dev": "yarn lnext dev",
+    "build": "yarn lnext build",
+    "start": "yarn lnext start"
+  }
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages-manifest.json b/test/integration/react-streaming-and-server-components/switchable-runtime/pages-manifest.json
new file mode 100644
index 000000000000..4aa797aeaee3
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages-manifest.json
@@ -0,0 +1,9 @@
+{
+  "/_app": "pages/_app.js",
+  "/_error": "pages/_error.js",
+  "/edge-rsc": "pages/edge-rsc.js",
+  "/static": "pages/static.js",
+  "/node-rsc": "pages/node-rsc.js",
+  "/node": "pages/node.js",
+  "/edge": "pages/edge.js"
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
new file mode 100644
index 000000000000..83dc8c219e84
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
@@ -0,0 +1,18 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page() {
+  return (
+    <div>
+      This is a SSR RSC page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
new file mode 100644
index 000000000000..c3425c7e64af
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
@@ -0,0 +1,18 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page() {
+  return (
+    <div>
+      This is a SSR page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'edge',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
new file mode 100644
index 000000000000..362e634644eb
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
@@ -0,0 +1,26 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page({ type }) {
+  return (
+    <div>
+      This is a {type} RSC page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export function getStaticProps() {
+  return {
+    props: {
+      type: 'SSG',
+    },
+  }
+}
+
+export const config = {
+  runtime: 'nodejs',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
new file mode 100644
index 000000000000..1b8b01526a3c
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
@@ -0,0 +1,26 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page({ type }) {
+  return (
+    <div>
+      This is a {type} RSC page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export function getServerSideProps() {
+  return {
+    props: {
+      type: 'SSR',
+    },
+  }
+}
+
+export const config = {
+  runtime: 'nodejs',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
new file mode 100644
index 000000000000..f3563039b63b
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
@@ -0,0 +1,18 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page() {
+  return (
+    <div>
+      This is a static RSC page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'nodejs',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
new file mode 100644
index 000000000000..d555009acfcd
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
@@ -0,0 +1,26 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page({ type }) {
+  return (
+    <div>
+      This is a {type} page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export function getStaticProps() {
+  return {
+    props: {
+      type: 'SSG',
+    },
+  }
+}
+
+export const config = {
+  runtime: 'nodejs',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
new file mode 100644
index 000000000000..e58276b47a76
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
@@ -0,0 +1,26 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page({ type }) {
+  return (
+    <div>
+      This is a {type} page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export function getServerSideProps() {
+  return {
+    props: {
+      type: 'SSR',
+    },
+  }
+}
+
+export const config = {
+  runtime: 'nodejs',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
new file mode 100644
index 000000000000..bf065da478ba
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
@@ -0,0 +1,18 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page() {
+  return (
+    <div>
+      This is a static page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'nodejs',
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
new file mode 100644
index 000000000000..e44edfd79523
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
@@ -0,0 +1,14 @@
+import getRuntime from '../utils/runtime'
+import getTime from '../utils/time'
+
+export default function Page() {
+  return (
+    <div>
+      This is a static page.
+      <br />
+      {'Runtime: ' + getRuntime()}
+      <br />
+      {'Time: ' + getTime()}
+    </div>
+  )
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
new file mode 100644
index 000000000000..444f1ee8b498
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
@@ -0,0 +1,3 @@
+export default function getRuntime() {
+  return process.version ? `Node.js ${process.version}` : 'Edge/Browser'
+}
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
new file mode 100644
index 000000000000..cf78549b9a7c
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
@@ -0,0 +1,3 @@
+export default function getTime() {
+  return Date.now()
+}
diff --git a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js
new file mode 100644
index 000000000000..62ebdcadf426
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js
@@ -0,0 +1,127 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+  // File,
+  nextBuild as _nextBuild,
+  nextStart as _nextStart,
+} from 'next-test-utils'
+
+import { findPort, killApp, renderViaHTTP } from 'next-test-utils'
+
+const nodeArgs = ['-r', join(__dirname, '../../react-18/test/require-hook.js')]
+
+const appDir = join(__dirname, '../switchable-runtime')
+// const nextConfig = new File(join(appDir, 'next.config.js'))
+
+async function nextBuild(dir, options) {
+  return await _nextBuild(dir, [], {
+    ...options,
+    stdout: true,
+    stderr: true,
+    nodeArgs,
+  })
+}
+
+async function nextStart(dir, port) {
+  return await _nextStart(dir, port, {
+    stdout: true,
+    stderr: true,
+    nodeArgs,
+  })
+}
+
+async function testRoute(appPort, url, { isStatic, isEdge }) {
+  const html1 = await renderViaHTTP(appPort, url)
+  const renderedAt1 = +html1.match(/Time: (\d+)/)[1]
+  expect(html1).toContain(`Runtime: ${isEdge ? 'Edge' : 'Node.js'}`)
+
+  const html2 = await renderViaHTTP(appPort, url)
+  const renderedAt2 = +html2.match(/Time: (\d+)/)[1]
+  expect(html2).toContain(`Runtime: ${isEdge ? 'Edge' : 'Node.js'}`)
+
+  if (isStatic) {
+    // Should not be re-rendered, some timestamp should be returned.
+    expect(renderedAt1).toBe(renderedAt2)
+  } else {
+    // Should be re-rendered.
+    expect(renderedAt1).toBeLessThan(renderedAt2)
+  }
+}
+
+describe('Without global runtime configuration', () => {
+  const context = { appDir }
+
+  beforeAll(async () => {
+    context.appPort = await findPort()
+    const { stderr } = await nextBuild(context.appDir)
+    context.stderr = stderr
+    context.server = await nextStart(context.appDir, context.appPort)
+  })
+  afterAll(async () => {
+    await killApp(context.server)
+  })
+
+  it('should build /static as a static page with the nodejs runtime', async () => {
+    await testRoute(context.appPort, '/static', {
+      isStatic: true,
+      isEdge: false,
+    })
+  })
+
+  it('should build /node as a static page with the nodejs runtime', async () => {
+    await testRoute(context.appPort, '/node', {
+      isStatic: true,
+      isEdge: false,
+    })
+  })
+
+  it('should build /node-ssr as a dynamic page with the nodejs runtime', async () => {
+    await testRoute(context.appPort, '/node-ssr', {
+      isStatic: false,
+      isEdge: false,
+    })
+  })
+
+  it('should build /node-ssg as a static page with the nodejs runtime', async () => {
+    await testRoute(context.appPort, '/node-ssg', {
+      isStatic: true,
+      isEdge: false,
+    })
+  })
+
+  it('should build /node-rsc as a static page with the nodejs runtime', async () => {
+    await testRoute(context.appPort, '/node-rsc', {
+      isStatic: true,
+      isEdge: false,
+    })
+  })
+
+  it('should build /node-rsc-ssr as a dynamic page with the nodejs runtime', async () => {
+    await testRoute(context.appPort, '/node-rsc-ssr', {
+      isStatic: false,
+      isEdge: false,
+    })
+  })
+
+  it('should build /node-rsc-ssg as a static page with the nodejs runtime', async () => {
+    await testRoute(context.appPort, '/node-rsc-ssg', {
+      isStatic: true,
+      isEdge: false,
+    })
+  })
+
+  it('should build /edge as a dynamic page with the edge runtime', async () => {
+    await testRoute(context.appPort, '/edge', {
+      isStatic: false,
+      isEdge: true,
+    })
+  })
+
+  it('should build /edge-rsc as a dynamic page with the edge runtime', async () => {
+    await testRoute(context.appPort, '/edge-rsc', {
+      isStatic: false,
+      isEdge: true,
+    })
+  })
+})
diff --git a/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js b/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js
index 4783ccbdadb7..deb87bcba88d 100644
--- a/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js
+++ b/test/integration/react-streaming-and-server-components/unsupported-native-module/next.config.js
@@ -3,7 +3,6 @@ const withReact18 = require('../../react-18/test/with-react-18')
 module.exports = withReact18({
   experimental: {
     reactRoot: true,
-    runtime: 'edge',
     serverComponents: true,
   },
 })
diff --git a/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js b/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js
index 31f0f204a9d3..8371b4c194f7 100644
--- a/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js
+++ b/test/integration/react-streaming-and-server-components/unsupported-native-module/pages/index.js
@@ -8,3 +8,7 @@ export default function Index() {
   console.log(EOF)
   return 'Access Node.js native module dns'
 }
+
+export const config = {
+  runtime: 'edge',
+}

From d41f8a5ecf652ef1b9ee6e53aa7d543f2fc85cf6 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sat, 26 Mar 2022 02:19:51 +0100
Subject: [PATCH 20/39] Update terminal tree view for switchable runtime
 (#35394)

* Update terminal tree view for switchable runtime

* share PageRuntime type

* fix lint
---
 packages/next/build/entries.ts                | 13 ++---
 packages/next/build/index.ts                  | 11 ++--
 packages/next/build/utils.ts                  |  9 +--
 packages/next/server/config-shared.ts         |  4 +-
 .../test/switchable-runtime.test.js           | 55 ++++++++++---------
 5 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index c6a57df897a0..85e39d25cfc0 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -1,3 +1,5 @@
+import type { PageRuntime, NextConfigComplete } from '../server/config-shared'
+import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
 import fs from 'fs'
 import chalk from 'next/dist/compiled/chalk'
 import { posix, join } from 'path'
@@ -12,11 +14,9 @@ import { MiddlewareLoaderOptions } from './webpack/loaders/next-middleware-loade
 import { ClientPagesLoaderOptions } from './webpack/loaders/next-client-pages-loader'
 import { ServerlessLoaderQuery } from './webpack/loaders/next-serverless-loader'
 import { LoadedEnvFiles } from '@next/env'
-import { NextConfigComplete } from '../server/config-shared'
 import { parse } from '../build/swc'
 import { isCustomErrorPage, isFlightPage, isReservedPage } from './utils'
 import { ssrEntries } from './webpack/plugins/middleware-plugin'
-import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
 import {
   MIDDLEWARE_RUNTIME_WEBPACK,
   MIDDLEWARE_SSR_RUNTIME_WEBPACK,
@@ -99,17 +99,14 @@ type Entrypoints = {
   edgeServer: webpack5.EntryObject
 }
 
-const cachedPageRuntimeConfig = new Map<
-  string,
-  [number, 'nodejs' | 'edge' | undefined]
->()
+const cachedPageRuntimeConfig = new Map<string, [number, PageRuntime]>()
 
 // @TODO: We should limit the maximum concurrency of this function as there
 // could be thousands of pages existing.
 export async function getPageRuntime(
   pageFilePath: string,
   globalRuntimeFallback?: 'nodejs' | 'edge'
-): Promise<'nodejs' | 'edge' | undefined> {
+): Promise<PageRuntime> {
   const cached = cachedPageRuntimeConfig.get(pageFilePath)
   if (cached) {
     return cached[1]
@@ -129,7 +126,7 @@ export async function getPageRuntime(
   // discussion:
   // https://github.com/vercel/next.js/discussions/34179
   let isRuntimeRequired: boolean = false
-  let pageRuntime: 'nodejs' | 'edge' | undefined = undefined
+  let pageRuntime: PageRuntime = undefined
 
   // Since these configurations should always be static analyzable, we can
   // skip these cases that "runtime" and "gSP", "gSSP" are not included in the
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index 8709592226b0..b14888080a37 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -969,7 +969,7 @@ export default async function build(
                     join(pagesDir, pagePath),
                     config.experimental.runtime
                   )
-                : null
+                : undefined
 
             if (
               !isMiddlewareRoute &&
@@ -1084,14 +1084,13 @@ export default async function build(
               totalSize: allSize,
               static: isStatic,
               isSsg,
-              isWebSsr:
-                hasConcurrentFeatures &&
-                !isMiddlewareRoute &&
-                !isReservedPage(page) &&
-                !isCustomErrorPage(page),
               isHybridAmp,
               ssgPageRoutes,
               initialRevalidateSeconds: false,
+              runtime:
+                !isReservedPage(page) && !isCustomErrorPage(page)
+                  ? pageRuntime
+                  : undefined,
               pageDuration: undefined,
               ssgPageDurations: undefined,
             })
diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts
index a2bf0c53337b..110ef701c36c 100644
--- a/packages/next/build/utils.ts
+++ b/packages/next/build/utils.ts
@@ -1,3 +1,5 @@
+import type { NextConfigComplete, PageRuntime } from '../server/config-shared'
+
 import '../server/node-polyfill-fetch'
 import chalk from 'next/dist/compiled/chalk'
 import getGzipSize from 'next/dist/compiled/gzip-size'
@@ -37,7 +39,6 @@ import * as Log from './output/log'
 import { loadComponents } from '../server/load-components'
 import { trace } from '../trace'
 import { setHttpAgentOptions } from '../server/config'
-import { NextConfigComplete } from '../server/config-shared'
 import isError from '../lib/is-error'
 import { recursiveDelete } from '../lib/recursive-delete'
 import { Sema } from 'next/dist/compiled/async-sema'
@@ -77,11 +78,11 @@ export interface PageInfo {
   totalSize: number
   static: boolean
   isSsg: boolean
-  isWebSsr: boolean
   ssgPageRoutes: string[] | null
   initialRevalidateSeconds: number | false
   pageDuration: number | undefined
   ssgPageDurations: number[] | undefined
+  runtime: PageRuntime
 }
 
 export async function printTreeView(
@@ -195,12 +196,12 @@ export async function printTreeView(
         ? ' '
         : item.endsWith('/_middleware')
         ? 'ƒ'
-        : pageInfo?.isWebSsr
-        ? 'ℇ'
         : pageInfo?.static
         ? '○'
         : pageInfo?.isSsg
         ? '●'
+        : pageInfo?.runtime === 'edge'
+        ? 'ℇ'
         : 'λ'
 
     usedSymbols.add(symbol)
diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
index 0007760e4017..029d39957155 100644
--- a/packages/next/server/config-shared.ts
+++ b/packages/next/server/config-shared.ts
@@ -7,6 +7,8 @@ import {
   imageConfigDefault,
 } from '../shared/lib/image-config'
 
+export type PageRuntime = 'nodejs' | 'edge' | undefined
+
 export type NextConfigComplete = Required<NextConfig> & {
   images: Required<ImageConfigComplete>
   typescript: Required<TypeScriptConfig>
@@ -101,7 +103,7 @@ export interface ExperimentalConfig {
   craCompat?: boolean
   esmExternals?: boolean | 'loose'
   isrMemoryCacheSize?: number
-  runtime?: 'nodejs' | 'edge'
+  runtime?: Exclude<PageRuntime, undefined>
   serverComponents?: boolean
   fullySpecified?: boolean
   urlImports?: NonNullable<webpack5.Configuration['experiments']>['buildHttp']
diff --git a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js
index 62ebdcadf426..d5cabd5f9a4e 100644
--- a/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js
+++ b/test/integration/react-streaming-and-server-components/test/switchable-runtime.test.js
@@ -1,34 +1,16 @@
 /* eslint-env jest */
 
 import { join } from 'path'
-import {
-  // File,
-  nextBuild as _nextBuild,
-  nextStart as _nextStart,
-} from 'next-test-utils'
-
 import { findPort, killApp, renderViaHTTP } from 'next-test-utils'
-
-const nodeArgs = ['-r', join(__dirname, '../../react-18/test/require-hook.js')]
+import { nextBuild, nextStart } from './utils'
 
 const appDir = join(__dirname, '../switchable-runtime')
-// const nextConfig = new File(join(appDir, 'next.config.js'))
-
-async function nextBuild(dir, options) {
-  return await _nextBuild(dir, [], {
-    ...options,
-    stdout: true,
-    stderr: true,
-    nodeArgs,
-  })
-}
 
-async function nextStart(dir, port) {
-  return await _nextStart(dir, port, {
-    stdout: true,
-    stderr: true,
-    nodeArgs,
-  })
+function splitLines(text) {
+  return text
+    .split(/\r?\n/g)
+    .map((str) => str.trim())
+    .filter(Boolean)
 }
 
 async function testRoute(appPort, url, { isStatic, isEdge }) {
@@ -54,7 +36,8 @@ describe('Without global runtime configuration', () => {
 
   beforeAll(async () => {
     context.appPort = await findPort()
-    const { stderr } = await nextBuild(context.appDir)
+    const { stdout, stderr } = await nextBuild(context.appDir)
+    context.stdout = stdout
     context.stderr = stderr
     context.server = await nextStart(context.appDir, context.appPort)
   })
@@ -124,4 +107,26 @@ describe('Without global runtime configuration', () => {
       isEdge: true,
     })
   })
+
+  it('should display correct tree view with page types in terminal', async () => {
+    const stdoutLines = splitLines(context.stdout).filter((line) =>
+      /^[┌├└/]/.test(line)
+    )
+    const expectedOutputLines = splitLines(`
+  ┌ λ /404
+  ├ ℇ /edge
+  ├ ℇ /edge-rsc
+  ├ ○ /node
+  ├ ○ /node-rsc
+  ├ ● /node-rsc-ssg
+  ├ λ /node-rsc-ssr
+  ├ ● /node-ssg
+  ├ λ /node-ssr
+  └ ○ /static
+  `)
+    const isMatched = expectedOutputLines.every((line, index) =>
+      stdoutLines[index].startsWith(line)
+    )
+    expect(isMatched).toBe(true)
+  })
 })

From 3a313a4ca662846b6ed87cde7312e9cd7b3348eb Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Sat, 26 Mar 2022 03:29:52 -0500
Subject: [PATCH 21/39] Fix create-next-app failing without yarn installed
 (#35608)

This fixes our package manager detection which was changed slightly in https://github.com/vercel/next.js/pull/34947 for `pnpm` support to ensure the default case still attempts detecting the available package manager if no preference is specified in the command args. This also adds a test case to ensure the install succeeds when we fail to detect a valid `yarn` binary and no preference is set via the `npm_config_user_agent` env variable.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

Fixes: https://github.com/vercel/next.js/issues/35607
Fixes: https://github.com/vercel/next.js/issues/35599
---
 packages/create-next-app/index.ts             |  2 +-
 .../integration/create-next-app/index.test.ts | 25 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts
index 8d7f25427610..3c16c40a7dd6 100644
--- a/packages/create-next-app/index.ts
+++ b/packages/create-next-app/index.ts
@@ -129,7 +129,7 @@ async function run(): Promise<void> {
     ? 'npm'
     : !!program.usePnpm
     ? 'pnpm'
-    : 'yarn'
+    : getPkgManager()
 
   const example = typeof program.example === 'string' && program.example.trim()
   try {
diff --git a/test/integration/create-next-app/index.test.ts b/test/integration/create-next-app/index.test.ts
index 1f68f56875c0..b0707196dedf 100644
--- a/test/integration/create-next-app/index.test.ts
+++ b/test/integration/create-next-app/index.test.ts
@@ -305,7 +305,30 @@ describe('create next app', () => {
 
   it('should create a project in the current directory', async () => {
     await usingTempDir(async (cwd) => {
-      const res = await run(['.'], { cwd })
+      const env = { ...process.env }
+      const tmpBin = path.join(__dirname, 'bin')
+      const tmpYarn = path.join(tmpBin, 'yarn')
+
+      if (process.platform !== 'win32') {
+        // ensure install succeeds with invalid yarn binary
+        // which simulates no yarn binary being available as
+        // an alternative to removing the binary and reinstalling
+        await fs.remove(tmpBin)
+        await fs.mkdir(tmpBin)
+        await fs.writeFile(tmpYarn, '#!/bin/sh\nexit 1')
+        await fs.chmod(tmpYarn, '755')
+        env.PATH = `${tmpBin}:${env.PATH}`
+        delete env.npm_config_user_agent
+      }
+
+      const res = await run(['.'], {
+        cwd,
+        env,
+        extendEnv: false,
+        stdio: 'inherit',
+      })
+      await fs.remove(tmpBin)
+
       expect(res.exitCode).toBe(0)
 
       const files = [

From 24c0fc0169ccc009e75d7099c262e9cf075a38ca Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Sat, 26 Mar 2022 17:05:01 +0800
Subject: [PATCH 22/39] Prevent spaces between expressions from being removed
 (#35613)

fixes https://github.com/vercel/next.js/issues/35609

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: John Daly <1719443+JohnDaly@users.noreply.github.com>
---
 packages/next-swc/crates/core/src/emotion/mod.rs  |  9 +++++++--
 .../core/tests/fixture/emotion/compress/input.tsx | 15 +++++++++++++++
 .../core/tests/fixture/emotion/compress/output.ts | 12 ++++++++++++
 .../fixture/emotion/css-in-callback/output.ts     |  2 +-
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx
 create mode 100644 packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts

diff --git a/packages/next-swc/crates/core/src/emotion/mod.rs b/packages/next-swc/crates/core/src/emotion/mod.rs
index 682f9e14b056..1e773b7a393a 100644
--- a/packages/next-swc/crates/core/src/emotion/mod.rs
+++ b/packages/next-swc/crates/core/src/emotion/mod.rs
@@ -309,8 +309,13 @@ impl<C: Comments> EmotionTransformer<C> {
                     let q = q.take();
                     let minified =
                         minify_css_string(&q.raw.value, index == 0, index == args_len - 1);
-                    if !minified.replace(' ', "").is_empty() {
-                        args.push(minified.as_arg());
+                    // Compress one more spaces into one space
+                    if minified.replace(' ', "").is_empty() {
+                        if index != 0 && index != args_len - 1 {
+                            args.push(" ".as_arg());
+                        }
+                    } else {
+                        args.push(minified.as_arg())
                     }
                 }
             } else if let Some(e) = tagged_tpl.exprs.get_mut(i) {
diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx b/packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx
new file mode 100644
index 000000000000..23c1567733f2
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/emotion/compress/input.tsx
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled'
+
+const unitNormal = '1rem'
+const unitLarge = '2rem'
+
+const Example = styled.div`
+  margin: ${unitNormal} ${unitLarge};
+`
+
+export const Animated = styled.div`
+  & code {
+    background-color: linen;
+  }
+  animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
+`
diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts b/packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts
new file mode 100644
index 000000000000..891239927a05
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/emotion/compress/output.ts
@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+const unitNormal = "1rem";
+const unitLarge = "2rem";
+const Example = /*#__PURE__*/ styled("div", {
+    target: "ekie5mj0",
+    label: "Example"
+})("margin:", unitNormal, " ", unitLarge, ";", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCB1bml0Tm9ybWFsID0gJzFyZW0nXG5jb25zdCB1bml0TGFyZ2UgPSAnMnJlbSdcblxuY29uc3QgRXhhbXBsZSA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogJHt1bml0Tm9ybWFsfSAke3VuaXRMYXJnZX07XG5gXG5cbmV4cG9ydCBjb25zdCBBbmltYXRlZCA9IHN0eWxlZC5kaXZgXG4gICYgY29kZSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogbGluZW47XG4gIH1cbiAgYW5pbWF0aW9uOiAkeyh7IGFuaW1hdGlvbiB9KSA9PiBhbmltYXRpb259IDAuMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQgYWx0ZXJuYXRlO1xuYFxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtnQiJ9 */");
+export const Animated = /*#__PURE__*/ styled("div", {
+    target: "ekie5mj1",
+    label: "Animated"
+})("& code{background-color:linen;}animation:", ({ animation  })=>animation
+, " 0.2s infinite ease-in-out alternate;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCB1bml0Tm9ybWFsID0gJzFyZW0nXG5jb25zdCB1bml0TGFyZ2UgPSAnMnJlbSdcblxuY29uc3QgRXhhbXBsZSA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogJHt1bml0Tm9ybWFsfSAke3VuaXRMYXJnZX07XG5gXG5cbmV4cG9ydCBjb25zdCBBbmltYXRlZCA9IHN0eWxlZC5kaXZgXG4gICYgY29kZSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogbGluZW47XG4gIH1cbiAgYW5pbWF0aW9uOiAkeyh7IGFuaW1hdGlvbiB9KSA9PiBhbmltYXRpb259IDAuMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQgYWx0ZXJuYXRlO1xuYFxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVN3QiJ9 */");
diff --git a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts
index 41543223f76d..ef1b5dcee7bf 100644
--- a/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts
+++ b/packages/next-swc/crates/core/tests/fixture/emotion/css-in-callback/output.ts
@@ -41,7 +41,7 @@ export const DivContainerExtended2 = /*#__PURE__*/ styled(DivContainer, {
 const Container = /*#__PURE__*/ styled("button", {
     target: "ekie5mj5",
     label: "Container"
-})("background:red;", stylesInCallback, ()=>/*#__PURE__*/ css({
+})("background:red;", stylesInCallback, " ", ()=>/*#__PURE__*/ css({
         background: "red"
     }, "label:Container", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDSSJ9 */")
 , "  color:yellow;font-size:12px;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQudHMiLCJzb3VyY2VzIjpbImlucHV0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgR2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nXG5cbmNvbnN0IHN0eWxlc0luQ2FsbGJhY2sgPSAocHJvcHM6IGFueSkgPT5cbiAgY3NzKHtcbiAgICBjb2xvcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZDogJ3llbGxvdycsXG4gICAgd2lkdGg6IGAke3Byb3BzLnNjYWxlICogMTAwfXB4YCxcbiAgfSlcblxuY29uc3Qgc3R5bGVzID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxuICB3aWR0aDogJzIwcHgnLFxufSlcblxuY29uc3Qgc3R5bGVzMiA9IGNzc2BcbiAgY29sb3I6IHJlZDtcbiAgd2lkdGg6IDIwcHg7XG5gXG5cbmNvbnN0IERpdkNvbnRhaW5lciA9IHN0eWxlZC5kaXYoe1xuICBiYWNrZ3JvdW5kOiAncmVkJyxcbn0pXG5cbmNvbnN0IERpdkNvbnRhaW5lcjIgPSBzdHlsZWQuZGl2YFxuICBiYWNrZ3JvdW5kOiByZWQ7XG5gXG5cbmNvbnN0IFNwYW5Db250YWluZXIgPSBzdHlsZWQoJ3NwYW4nKSh7XG4gIGJhY2tncm91bmQ6ICd5ZWxsb3cnLFxufSlcblxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkID0gc3R5bGVkKERpdkNvbnRhaW5lcilgYFxuZXhwb3J0IGNvbnN0IERpdkNvbnRhaW5lckV4dGVuZGVkMiA9IHN0eWxlZChEaXZDb250YWluZXIpKHt9KVxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoJ2J1dHRvbicpYFxuICBiYWNrZ3JvdW5kOiByZWQ7XG4gICR7c3R5bGVzSW5DYWxsYmFja31cbiAgJHsoKSA9PlxuICAgIGNzcyh7XG4gICAgICBiYWNrZ3JvdW5kOiAncmVkJyxcbiAgICB9KX1cbiAgY29sb3I6IHllbGxvdztcbiAgZm9udC1zaXplOiAxMnB4O1xuYFxuXG5jb25zdCBDb250YWluZXIyID0gc3R5bGVkLmRpdmBcbiAgYmFja2dyb3VuZDogcmVkO1xuYFxuXG5leHBvcnQgY2xhc3MgU2ltcGxlQ29tcG9uZW50IGV4dGVuZHMgUHVyZUNvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRhaW5lclxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPEdsb2JhbFxuICAgICAgICAgIHN0eWxlcz17Y3NzYFxuICAgICAgICAgICAgaHRtbCxcbiAgICAgICAgICAgIGJvZHkge1xuICAgICAgICAgICAgICBwYWRkaW5nOiAzcmVtIDFyZW07XG4gICAgICAgICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogcGFwYXlhd2hpcDtcbiAgICAgICAgICAgICAgbWluLWhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBgfVxuICAgICAgICAvPlxuICAgICAgICA8c3Bhbj5oZWxsbzwvc3Bhbj5cbiAgICAgIDwvQ29udGFpbmVyPlxuICAgIClcbiAgfVxufVxuXG5SZWFjdERPTS5yZW5kZXIoPFNpbXBsZUNvbXBvbmVudCAvPiwgZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2FwcCcpKVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDa0IifQ== */");

From b82f546526941622597794df3d20b6926df07019 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sat, 26 Mar 2022 10:28:14 +0100
Subject: [PATCH 23/39] Fix: disable script worker in edge and fix rsc loader
 and runtime (#35604)

* Disable script worker for edge runtime (could lead to build error)
* Fix rsc loader CJS detection
* Fix pagePath searching for per-page runtime

test through rsc notes demo, successful deployment: https://next-rsc-notes-9bix7l1nu.vercel.sh/
---
 packages/next/build/index.ts                 | 8 +++++---
 packages/next/build/webpack-config.ts        | 1 +
 packages/next/build/webpack/loaders/utils.ts | 1 +
 packages/next/pages/_document.tsx            | 3 ++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index b14888080a37..f96f20f6228a 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -960,8 +960,10 @@ export default async function build(
             let ssgPageRoutes: string[] | null = null
             let isMiddlewareRoute = !!page.match(MIDDLEWARE_ROUTE)
 
-            const pagePath = pagePaths.find((_path) =>
-              _path.startsWith(actualPage + '.')
+            const pagePath = pagePaths.find(
+              (p) =>
+                p.startsWith(actualPage + '.') ||
+                p.startsWith(actualPage + '/index.')
             )
             const pageRuntime =
               hasConcurrentFeatures && pagePath
@@ -974,7 +976,7 @@ export default async function build(
             if (
               !isMiddlewareRoute &&
               !isReservedPage(page) &&
-              // We currently don't support staic optimization in the Edge runtime.
+              // We currently don't support static optimization in the Edge runtime.
               pageRuntime !== 'edge'
             ) {
               try {
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 1446dccb00cf..33b3bdf0a34e 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -981,6 +981,7 @@ export default async function getBaseWebpackConfig(
           ...(isEdgeRuntime
             ? [
                 {
+                  '@builder.io/partytown': '{}',
                   'next/dist/compiled/etag': '{}',
                   'next/dist/compiled/chalk': '{}',
                   'react-dom': '{}',
diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
index c0628c568154..e28e02eaea04 100644
--- a/packages/next/build/webpack/loaders/utils.ts
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -14,6 +14,7 @@ export function buildExports(moduleExports: any, isESM: boolean) {
 
 const esmNodeTypes = [
   'ImportDeclaration',
+  'ExportDeclaration',
   'ExportNamedDeclaration',
   'ExportDefaultExpression',
   'ExportDefaultDeclaration',
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 57a5f4a24af3..1b1885121ef1 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -79,7 +79,8 @@ function hasComponentProps(child: any): child is React.ReactElement {
 function getPreNextWorkerScripts(context: HtmlProps, props: OriginProps) {
   const { assetPrefix, scriptLoader, crossOrigin, nextScriptWorkers } = context
 
-  if (!nextScriptWorkers) return null
+  // disable `nextScriptWorkers` in edge runtime
+  if (!nextScriptWorkers || process.browser) return null
 
   try {
     let {

From 27d23f5b7b0e38cf2285d018270210ca9718a2f2 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sat, 26 Mar 2022 21:19:21 +0100
Subject: [PATCH 24/39] docs: update styling support for streaming (#35375)

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
---
 docs/advanced-features/react-18/streaming.md | 4 +++-
 errors/client-flush-effects.md               | 8 ++++----
 errors/multiple-flush-effects.md             | 6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/advanced-features/react-18/streaming.md b/docs/advanced-features/react-18/streaming.md
index 984264190dc5..0734d0983464 100644
--- a/docs/advanced-features/react-18/streaming.md
+++ b/docs/advanced-features/react-18/streaming.md
@@ -68,4 +68,6 @@ Currently, data fetching within `Suspense` boundaries on the server side is not
 
 #### Styling
 
-The Next.js team is working on support for `styled-jsx` and CSS modules in streaming SSR. Stay tuned for updates.
+Inline styles, Global CSS, CSS modules and Next.js built-in `styled-jsx` are supported with streaming. The Next.js team is working on the guide of integrating other CSS-in-JS solutions in streaming SSR. Stay tuned for updates.
+
+> Note: The styling code should be only placed in client components, not server components, when using React Server Components
diff --git a/errors/client-flush-effects.md b/errors/client-flush-effects.md
index 64f107b49990..18ca8dd126cc 100644
--- a/errors/client-flush-effects.md
+++ b/errors/client-flush-effects.md
@@ -1,16 +1,16 @@
-# `useFlushEffects` can not be called on the client
+# `unstable_useFlushEffects` can not be called on the client
 
 #### Why This Error Occurred
 
-The `useFlushEffects` hook was executed while rendering a component on the client, or in another unsupported environment.
+The `unstable_useFlushEffects` hook was executed while rendering a component on the client, or in another unsupported environment.
 
 #### Possible Ways to Fix It
 
-The `useFlushEffects` hook can only be called while _server rendering a client component_. As a best practice, we recommend creating a wrapper hook:
+The `unstable_useFlushEffects` hook can only be called while _server rendering a client component_. As a best practice, we recommend creating a wrapper hook:
 
 ```jsx
 // lib/use-style-libraries.js
-import { useFlushEffects } from 'next/streaming'
+import { unstable_useFlushEffects as useFlushEffects } from 'next/streaming'
 
 export default function useStyleLibraries() {
   if (typeof window === 'undefined') {
diff --git a/errors/multiple-flush-effects.md b/errors/multiple-flush-effects.md
index 51a9d7a58a0d..b19e88edd04b 100644
--- a/errors/multiple-flush-effects.md
+++ b/errors/multiple-flush-effects.md
@@ -1,9 +1,9 @@
-# The `useFlushEffects` hook cannot be used more than once.
+# The `unstable_useFlushEffects` hook cannot be used more than once.
 
 #### Why This Error Occurred
 
-The `useFlushEffects` hook is being used more than once while a page is being rendered.
+The `unstable_useFlushEffects` hook is being used more than once while a page is being rendered.
 
 #### Possible Ways to Fix It
 
-The `useFlushEffects` hook should only be called inside the body of the `pages/_app` component, before returning any `<Suspense>` boundaries. Restructure your application to prevent extraneous calls.
+The `unstable_useFlushEffects` hook should only be called inside the body of the `pages/_app` component, before returning any `<Suspense>` boundaries. Restructure your application to prevent extraneous calls.

From bb6ea6399dd0835b0a0f4601934e6fde2ece1e3e Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sun, 27 Mar 2022 03:02:17 +0200
Subject: [PATCH 25/39] Fix hydration issue in the switchable runtime tests
 (#35616)

In this test we are mainly focusing on the SSR'd result so hydration is't critical, but it will definitely help to get rid of these hydration errors.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 .../switchable-runtime/pages/edge-rsc.server.js   |  8 ++++----
 .../switchable-runtime/pages/edge.js              |  8 ++++----
 .../pages/node-rsc-ssg.server.js                  |  8 ++++----
 .../pages/node-rsc-ssr.server.js                  |  8 ++++----
 .../switchable-runtime/pages/node-rsc.server.js   |  8 ++++----
 .../switchable-runtime/pages/node-ssg.js          |  8 ++++----
 .../switchable-runtime/pages/node-ssr.js          |  8 ++++----
 .../switchable-runtime/pages/node.js              |  8 ++++----
 .../switchable-runtime/pages/static.js            |  8 ++++----
 .../switchable-runtime/utils/runtime.js           | 15 +++++++++++++--
 .../switchable-runtime/utils/time.js              | 13 +++++++++++--
 11 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
index 83dc8c219e84..0c05e6023b4d 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge-rsc.server.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page() {
   return (
     <div>
       This is a SSR RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
index c3425c7e64af..9f99eaecaa15 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/edge.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page() {
   return (
     <div>
       This is a SSR page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
index 362e634644eb..7f9804f683e8 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssg.server.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page({ type }) {
   return (
     <div>
       This is a {type} RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
index 1b8b01526a3c..d064a5cbbfd5 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc-ssr.server.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page({ type }) {
   return (
     <div>
       This is a {type} RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
index f3563039b63b..4c373d397b58 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-rsc.server.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page() {
   return (
     <div>
       This is a static RSC page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
index d555009acfcd..ccd6832cf2e3 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssg.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page({ type }) {
   return (
     <div>
       This is a {type} page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
index e58276b47a76..1f7ee2e0b14c 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node-ssr.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page({ type }) {
   return (
     <div>
       This is a {type} page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
index bf065da478ba..b2186ca7ceb6 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/node.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page() {
   return (
     <div>
       This is a static page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
index e44edfd79523..ea410104fb5d 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/pages/static.js
@@ -1,14 +1,14 @@
-import getRuntime from '../utils/runtime'
-import getTime from '../utils/time'
+import Runtime from '../utils/runtime'
+import Time from '../utils/time'
 
 export default function Page() {
   return (
     <div>
       This is a static page.
       <br />
-      {'Runtime: ' + getRuntime()}
+      <Runtime />
       <br />
-      {'Time: ' + getTime()}
+      <Time />
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
index 444f1ee8b498..bea2a3fe18ad 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/runtime.js
@@ -1,3 +1,14 @@
-export default function getRuntime() {
-  return process.version ? `Node.js ${process.version}` : 'Edge/Browser'
+export default function Runtime() {
+  let runtime
+
+  if (typeof window !== 'undefined') {
+    // We have to make sure it matches the existing markup when hydrating.
+    runtime = document.getElementById('__runtime').textContent
+  } else {
+    runtime =
+      'Runtime: ' +
+      (process.version ? `Node.js ${process.version}` : 'Edge/Browser')
+  }
+
+  return <span id="__runtime">{runtime}</span>
 }
diff --git a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
index cf78549b9a7c..c0894628bb99 100644
--- a/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
+++ b/test/integration/react-streaming-and-server-components/switchable-runtime/utils/time.js
@@ -1,3 +1,12 @@
-export default function getTime() {
-  return Date.now()
+export default function Time() {
+  let time
+
+  if (typeof window !== 'undefined') {
+    // We have to make sure it matches the existing markup when hydrating.
+    time = document.getElementById('__time').textContent
+  } else {
+    time = 'Time: ' + Date.now()
+  }
+
+  return <span id="__time">{time}</span>
 }

From 086cf91ada4c0c6cee41686eda5fa7357b9b9b47 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Sat, 26 Mar 2022 22:32:33 -0500
Subject: [PATCH 26/39] v12.1.2-canary.0

---
 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-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index c4a024fa4c6e..056ce66681be 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1"
+  "version": "12.1.2-canary.0"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 4930dae2ffff..25e7a71d151c 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 4ce4c72cc722..594178e4d4e8 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "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.1.1",
+    "@next/eslint-plugin-next": "12.1.2-canary.0",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index d6ee485482cd..191e93c0e53e 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": "12.1.1",
+  "version": "12.1.2-canary.0",
   "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 709af5bc4588..b7ad5917caf4 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 84a82572964e..9591e55d3bf6 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 0018d374c75c..00a4d7daacfd 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 7b27d9a64da0..ecccc07db097 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 91646c423264..447964a637bf 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "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 3c174e5185fc..719adc4f2f5f 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "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 256b9ccec795..49c16517aa05 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 4db275b71c12..7150ee69abb1 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index 532b3d3cfab5..ceaefd606b69 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.1",
+  "version": "12.1.2-canary.0",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.1",
+    "@next/env": "12.1.2-canary.0",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.1",
-    "@next/polyfill-nomodule": "12.1.1",
-    "@next/react-dev-overlay": "12.1.1",
-    "@next/react-refresh-utils": "12.1.1",
-    "@next/swc": "12.1.1",
+    "@next/polyfill-module": "12.1.2-canary.0",
+    "@next/polyfill-nomodule": "12.1.2-canary.0",
+    "@next/react-dev-overlay": "12.1.2-canary.0",
+    "@next/react-refresh-utils": "12.1.2-canary.0",
+    "@next/swc": "12.1.2-canary.0",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index a71b0e09a600..6790d114cb9a 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": "12.1.1",
+  "version": "12.1.2-canary.0",
   "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 d7391a1b5849..8f2383bd3ad2 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": "12.1.1",
+  "version": "12.1.2-canary.0",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From 0d401ddcb58b6b602c0ff7098893c91f973b99d2 Mon Sep 17 00:00:00 2001
From: TianenPang <32772271+TianenPang@users.noreply.github.com>
Date: Mon, 28 Mar 2022 02:15:08 +0800
Subject: [PATCH 27/39] Fix typo in rewrites docs (#35639)

Correct the type of `trailingSlash` in config example

Modified: `docs/api-reference/next.config.js/rewrites.md`

```diff
- trailingSlash: 'true',
+ trailingSlash: true,
```
---
 docs/api-reference/next.config.js/rewrites.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api-reference/next.config.js/rewrites.md b/docs/api-reference/next.config.js/rewrites.md
index 946dec86981c..d95e115fe813 100644
--- a/docs/api-reference/next.config.js/rewrites.md
+++ b/docs/api-reference/next.config.js/rewrites.md
@@ -327,7 +327,7 @@ If you're using `trailingSlash: true`, you also need to insert a trailing slash
 
 ```js
 module.exports = {
-  trailingSlash: 'true',
+  trailingSlash: true,
   async rewrites() {
     return [
       {

From 4bfcf8345c5c40271e2aecc72d34640fde3c44cc Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 28 Mar 2022 13:34:32 +0200
Subject: [PATCH 28/39] enhance: detect ESM by ast type (#35627)

Simplify the esmodule detection. If there's any import/exprt usage, it will return `Module` in ast.type otherwise `Script` when `isModule` is set to `"unknown"`
---
 packages/next/build/entries.ts                       |  2 +-
 .../webpack/loaders/next-flight-client-loader.ts     |  2 +-
 .../webpack/loaders/next-flight-server-loader.ts     | 12 +++++++-----
 packages/next/build/webpack/loaders/utils.ts         |  9 ---------
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index 85e39d25cfc0..9cfbb276b8d4 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -135,7 +135,7 @@ export async function getPageRuntime(
     try {
       const { body } = await parse(pageContent, {
         filename: pageFilePath,
-        isModule: true,
+        isModule: 'unknown',
       })
 
       for (const node of body) {
diff --git a/packages/next/build/webpack/loaders/next-flight-client-loader.ts b/packages/next/build/webpack/loaders/next-flight-client-loader.ts
index ee60abb516d1..d4343ad5048d 100644
--- a/packages/next/build/webpack/loaders/next-flight-client-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-client-loader.ts
@@ -47,7 +47,7 @@ async function parseModuleInfo(
 ): Promise<void> {
   const { body } = await parse(transformedSource, {
     filename: resourcePath,
-    isModule: true,
+    isModule: 'unknown',
   })
   for (let i = 0; i < body.length; i++) {
     const node = body[i]
diff --git a/packages/next/build/webpack/loaders/next-flight-server-loader.ts b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
index b87f234690b1..112f3c740a89 100644
--- a/packages/next/build/webpack/loaders/next-flight-server-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
@@ -1,6 +1,6 @@
 import { parse } from '../../swc'
 import { getRawPageExtensions } from '../../utils'
-import { buildExports, isEsmNodeType } from './utils'
+import { buildExports } from './utils'
 
 const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']
 
@@ -42,16 +42,18 @@ async function parseModuleInfo({
   imports: string
   isEsm: boolean
 }> {
-  const ast = await parse(source, { filename: resourcePath, isModule: true })
-  const { body } = ast
+  const ast = await parse(source, {
+    filename: resourcePath,
+    isModule: 'unknown',
+  })
+  const { type, body } = ast
   let transformedSource = ''
   let lastIndex = 0
   let imports = ''
-  let isEsm = false
+  const isEsm = type === 'Module'
 
   for (let i = 0; i < body.length; i++) {
     const node = body[i]
-    isEsm = isEsm || isEsmNodeType(node.type)
     switch (node.type) {
       case 'ImportDeclaration': {
         const importSource = node.source.value
diff --git a/packages/next/build/webpack/loaders/utils.ts b/packages/next/build/webpack/loaders/utils.ts
index e28e02eaea04..d771a714c277 100644
--- a/packages/next/build/webpack/loaders/utils.ts
+++ b/packages/next/build/webpack/loaders/utils.ts
@@ -11,12 +11,3 @@ export function buildExports(moduleExports: any, isESM: boolean) {
   })
   return ret
 }
-
-const esmNodeTypes = [
-  'ImportDeclaration',
-  'ExportDeclaration',
-  'ExportNamedDeclaration',
-  'ExportDefaultExpression',
-  'ExportDefaultDeclaration',
-]
-export const isEsmNodeType = (type: string) => esmNodeTypes.includes(type)

From 41a2eb2303bd338b110a1dc170ad5fdc4b805c0e Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Mon, 28 Mar 2022 14:32:34 +0200
Subject: [PATCH 29/39] Clean up legacy react 18 tests (#35615)

### source changes
* Error dynamic suspense option in non concurrent mode, don't check react root anymore since they should be bound

### tests changes

* Remove duplicated rsc client test
* Merge type checking cases (`next/dynamic`)
* Remove blocking rendering tests cases since we should opt-in Fizz rendering when using React.lazy
* Remove some thrown promises cases, leverage the streaming component we had in RSC test
---
 packages/next/shared/lib/dynamic.tsx          | 13 ++-
 .../react-18-invalid-config/components/foo.js |  1 +
 .../react-18-invalid-config/index.test.js     | 22 ++++-
 .../react-18-invalid-config/pages/dynamic.js  | 12 +++
 .../react-18/app/components/bar.js            | 24 ------
 .../react-18/app/components/dynamic-hello.js  | 18 ----
 .../react-18/app/components/foo.js            |  3 -
 .../react-18/app/components/hello.js          | 37 --------
 .../react-18/app/components/promise-cache.js  | 37 --------
 .../react-18/app/components/red.js            | 21 -----
 .../react-18/app/components/red.tsx           | 21 +++++
 .../react-18/app/components/ts-foo.tsx        |  3 -
 test/integration/react-18/app/pages/_app.js   | 11 ---
 test/integration/react-18/app/pages/ssr.js    |  8 --
 .../app/pages/suspense/backpressure.js        | 28 -------
 .../react-18/app/pages/suspense/no-preload.js | 22 -----
 .../react-18/app/pages/suspense/no-thrown.js  |  5 --
 .../react-18/app/pages/suspense/thrown.js     |  5 --
 .../react-18/app/pages/suspense/typing.tsx    | 14 ----
 .../{styled-jsx.js => styled-jsx.tsx}         |  2 +
 test/integration/react-18/test/basics.js      | 20 +----
 test/integration/react-18/test/blocking.js    | 26 ------
 test/integration/react-18/test/concurrent.js  | 59 +------------
 test/integration/react-18/test/index.test.js  | 84 -------------------
 .../react-18/test/streaming-data.js           | 16 ++++
 .../app/components/bar.client.js              |  3 +
 .../app/pages/dynamic-imports.js              |  7 +-
 .../app/pages/index.server.js                 |  4 -
 .../app/pages/various-exports.server.js       |  8 +-
 .../test/basic.js                             |  4 +-
 .../test/rsc.js                               |  1 -
 31 files changed, 95 insertions(+), 444 deletions(-)
 create mode 100644 test/integration/react-18-invalid-config/components/foo.js
 create mode 100644 test/integration/react-18-invalid-config/pages/dynamic.js
 delete mode 100644 test/integration/react-18/app/components/bar.js
 delete mode 100644 test/integration/react-18/app/components/dynamic-hello.js
 delete mode 100644 test/integration/react-18/app/components/foo.js
 delete mode 100644 test/integration/react-18/app/components/hello.js
 delete mode 100644 test/integration/react-18/app/components/promise-cache.js
 delete mode 100644 test/integration/react-18/app/components/red.js
 create mode 100644 test/integration/react-18/app/components/red.tsx
 delete mode 100644 test/integration/react-18/app/components/ts-foo.tsx
 delete mode 100644 test/integration/react-18/app/pages/_app.js
 delete mode 100644 test/integration/react-18/app/pages/ssr.js
 delete mode 100644 test/integration/react-18/app/pages/suspense/backpressure.js
 delete mode 100644 test/integration/react-18/app/pages/suspense/no-preload.js
 delete mode 100644 test/integration/react-18/app/pages/suspense/no-thrown.js
 delete mode 100644 test/integration/react-18/app/pages/suspense/thrown.js
 delete mode 100644 test/integration/react-18/app/pages/suspense/typing.tsx
 rename test/integration/react-18/app/pages/use-flush-effect/{styled-jsx.js => styled-jsx.tsx} (87%)
 delete mode 100644 test/integration/react-18/test/blocking.js
 create mode 100644 test/integration/react-18/test/streaming-data.js
 create mode 100644 test/integration/react-streaming-and-server-components/app/components/bar.client.js

diff --git a/packages/next/shared/lib/dynamic.tsx b/packages/next/shared/lib/dynamic.tsx
index bf5bb6ee6245..36879c07d539 100644
--- a/packages/next/shared/lib/dynamic.tsx
+++ b/packages/next/shared/lib/dynamic.tsx
@@ -117,14 +117,11 @@ export default function dynamic<P = {}>(
   const suspenseOptions = loadableOptions as LoadableSuspenseOptions & {
     loader: Loader<P>
   }
-  if (!process.env.__NEXT_CONCURRENT_FEATURES) {
-    // Error if react root is not enabled and `suspense` option is set to true
-    if (!process.env.__NEXT_REACT_ROOT && suspenseOptions.suspense) {
-      // TODO: add error doc when this feature is stable
-      throw new Error(
-        `Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
-      )
-    }
+  // Error if Fizz rendering is not enabled and `suspense` option is set to true
+  if (!process.env.__NEXT_CONCURRENT_FEATURES && suspenseOptions.suspense) {
+    throw new Error(
+      `Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
+    )
   }
   if (suspenseOptions.suspense) {
     return loadableFn(suspenseOptions)
diff --git a/test/integration/react-18-invalid-config/components/foo.js b/test/integration/react-18-invalid-config/components/foo.js
new file mode 100644
index 000000000000..f759e165008e
--- /dev/null
+++ b/test/integration/react-18-invalid-config/components/foo.js
@@ -0,0 +1 @@
+export default () => 'foo'
diff --git a/test/integration/react-18-invalid-config/index.test.js b/test/integration/react-18-invalid-config/index.test.js
index 9372f0f199f4..50d3c8bb5140 100644
--- a/test/integration/react-18-invalid-config/index.test.js
+++ b/test/integration/react-18-invalid-config/index.test.js
@@ -6,6 +6,7 @@ import { File, nextBuild } from 'next-test-utils'
 
 const appDir = __dirname
 const nextConfig = new File(join(appDir, 'next.config.js'))
+const reactDomPackagePah = join(appDir, 'node_modules/react-dom')
 
 function writeNextConfig(config) {
   const content = `module.exports = { experimental: ${JSON.stringify(config)} }`
@@ -24,21 +25,36 @@ describe('Invalid react 18 webpack config', () => {
       '`experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18.'
     )
   })
+})
 
-  it('should warn user when not using react 18 and `experimental.reactRoot` is enabled', async () => {
-    const reactDomPackagePah = join(appDir, 'node_modules/react-dom')
+describe('React 17 with React 18 config', () => {
+  beforeAll(async () => {
     await fs.mkdirp(reactDomPackagePah)
     await fs.writeFile(
       join(reactDomPackagePah, 'package.json'),
       JSON.stringify({ name: 'react-dom', version: '17.0.0' })
     )
     writeNextConfig({ reactRoot: true })
-    const { stderr } = await nextBuild(appDir, [], { stderr: true })
+  })
+  afterAll(async () => {
     await fs.remove(reactDomPackagePah)
     nextConfig.restore()
+  })
 
+  it('should warn user when not using react 18 and `experimental.reactRoot` is enabled', async () => {
+    const { stderr } = await nextBuild(appDir, [], { stderr: true })
     expect(stderr).toContain(
       'You have to use React 18 to use `experimental.reactRoot`.'
     )
   })
+
+  it('suspense is not allowed in blocking rendering mode', async () => {
+    const { stderr, code } = await nextBuild(appDir, [], {
+      stderr: true,
+    })
+    expect(stderr).toContain(
+      'Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense'
+    )
+    expect(code).toBe(1)
+  })
 })
diff --git a/test/integration/react-18-invalid-config/pages/dynamic.js b/test/integration/react-18-invalid-config/pages/dynamic.js
new file mode 100644
index 000000000000..f54d136c7b5d
--- /dev/null
+++ b/test/integration/react-18-invalid-config/pages/dynamic.js
@@ -0,0 +1,12 @@
+import React, { Suspense } from 'react'
+import dynamic from 'next/dynamic'
+
+const Foo = dynamic(() => import('../components/foo'), { suspense: true })
+
+export default function Dynamic() {
+  return (
+    <Suspense>
+      <Foo />
+    </Suspense>
+  )
+}
diff --git a/test/integration/react-18/app/components/bar.js b/test/integration/react-18/app/components/bar.js
deleted file mode 100644
index 44a8eb0864dc..000000000000
--- a/test/integration/react-18/app/components/bar.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-import { useCachedPromise } from './promise-cache'
-
-const Foo = dynamic(() => import('./foo'), {
-  suspense: true,
-})
-
-export default function Bar() {
-  useCachedPromise(
-    'bar',
-    () => new Promise((resolve) => setTimeout(resolve, 300)),
-    true
-  )
-
-  return (
-    <div>
-      bar
-      <Suspense fallback={'oof'}>
-        <Foo />
-      </Suspense>
-    </div>
-  )
-}
diff --git a/test/integration/react-18/app/components/dynamic-hello.js b/test/integration/react-18/app/components/dynamic-hello.js
deleted file mode 100644
index 61d0ecaea9b8..000000000000
--- a/test/integration/react-18/app/components/dynamic-hello.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-
-let ssr
-const suspense = false
-
-const Hello = dynamic(() => import('./hello'), {
-  ssr,
-  suspense,
-})
-
-export default function DynamicHello(props) {
-  return (
-    <Suspense fallback={'loading'}>
-      <Hello {...props} />
-    </Suspense>
-  )
-}
diff --git a/test/integration/react-18/app/components/foo.js b/test/integration/react-18/app/components/foo.js
deleted file mode 100644
index 3689dc33e306..000000000000
--- a/test/integration/react-18/app/components/foo.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Foo() {
-  return 'foo'
-}
diff --git a/test/integration/react-18/app/components/hello.js b/test/integration/react-18/app/components/hello.js
deleted file mode 100644
index 2812405370b7..000000000000
--- a/test/integration/react-18/app/components/hello.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { useCachedPromise } from './promise-cache'
-
-export default function Hello({ name, thrown = false }) {
-  useCachedPromise(
-    name,
-    () => new Promise((resolve) => setTimeout(resolve, 200)),
-    thrown
-  )
-
-  const [hydrated, setHydrated] = React.useState(() => false)
-  React.useEffect(() => {
-    if (!hydrated) {
-      setHydrated(true)
-    }
-  }, [hydrated])
-
-  const serverRendered = React.useMemo(() => {
-    if (typeof window === 'undefined') {
-      return true
-    }
-    const elem = document.getElementById('server-rendered')
-    if (elem) {
-      return elem.innerText === 'true'
-    }
-    return false
-  }, [])
-
-  return (
-    <p>
-      hello {ReactDOM.version}
-      <span id="server-rendered">{serverRendered.toString()}</span>
-      {hydrated ? <span id="hydrated">{hydrated.toString()}</span> : null}
-    </p>
-  )
-}
diff --git a/test/integration/react-18/app/components/promise-cache.js b/test/integration/react-18/app/components/promise-cache.js
deleted file mode 100644
index eab490fb9ae9..000000000000
--- a/test/integration/react-18/app/components/promise-cache.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-
-const PromiseCacheContext = React.createContext(null)
-
-export const cache = new Map()
-export const PromiseCacheProvider = PromiseCacheContext.Provider
-
-export function useCachedPromise(key, fn, thrown = false) {
-  const cache = React.useContext(PromiseCacheContext)
-
-  if (!thrown) return undefined
-  let entry = cache.get(key)
-  if (!entry) {
-    entry = {
-      status: 'PENDING',
-      value: fn().then(
-        (value) => {
-          cache.set(key, {
-            status: 'RESOLVED',
-            value,
-          })
-        },
-        (err) => {
-          cache.set(key, {
-            status: 'REJECTED',
-            value: err,
-          })
-        }
-      ),
-    }
-    cache.set(key, entry)
-  }
-  if (['PENDING', 'REJECTED'].includes(entry.status)) {
-    throw entry.value
-  }
-  return entry.value
-}
diff --git a/test/integration/react-18/app/components/red.js b/test/integration/react-18/app/components/red.js
deleted file mode 100644
index 8f92c5ccc52d..000000000000
--- a/test/integration/react-18/app/components/red.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { useCachedPromise } from './promise-cache'
-
-export default function Styled({ name }) {
-  useCachedPromise(
-    name,
-    () => new Promise((resolve) => setTimeout(resolve, 1000)),
-    true
-  )
-
-  return (
-    <div>
-      <p>This is Red.</p>
-      <style jsx>{`
-        p {
-          color: red;
-        }
-      `}</style>
-    </div>
-  )
-}
diff --git a/test/integration/react-18/app/components/red.tsx b/test/integration/react-18/app/components/red.tsx
new file mode 100644
index 000000000000..3da9eaccfef4
--- /dev/null
+++ b/test/integration/react-18/app/components/red.tsx
@@ -0,0 +1,21 @@
+import React, { Suspense } from 'react'
+import { createStreamingData } from '../../test/streaming-data'
+
+const Data = createStreamingData()
+
+export default function Styled() {
+  return (
+    <Suspense fallback={`fallback`}>
+      <Data>
+        <div>
+          <p>This is Red.</p>
+          <style jsx>{`
+            p {
+              color: red;
+            }
+          `}</style>
+        </div>
+      </Data>
+    </Suspense>
+  )
+}
diff --git a/test/integration/react-18/app/components/ts-foo.tsx b/test/integration/react-18/app/components/ts-foo.tsx
deleted file mode 100644
index f29172cb4aa5..000000000000
--- a/test/integration/react-18/app/components/ts-foo.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function TsFoo() {
-  return <div>ts-foo</div>
-}
diff --git a/test/integration/react-18/app/pages/_app.js b/test/integration/react-18/app/pages/_app.js
deleted file mode 100644
index 1f136e7e8a8d..000000000000
--- a/test/integration/react-18/app/pages/_app.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PromiseCacheProvider } from '../components/promise-cache'
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <PromiseCacheProvider value={new Map()}>
-      <Component {...pageProps} />
-    </PromiseCacheProvider>
-  )
-}
-
-export default MyApp
diff --git a/test/integration/react-18/app/pages/ssr.js b/test/integration/react-18/app/pages/ssr.js
deleted file mode 100644
index 456cff7cb48e..000000000000
--- a/test/integration/react-18/app/pages/ssr.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function SSR() {
-  return 'hello'
-}
-
-export function getServerSideProps() {
-  // Prevent static optimization
-  return { props: {} }
-}
diff --git a/test/integration/react-18/app/pages/suspense/backpressure.js b/test/integration/react-18/app/pages/suspense/backpressure.js
deleted file mode 100644
index 3c7218950e58..000000000000
--- a/test/integration/react-18/app/pages/suspense/backpressure.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { useCachedPromise } from '../../components/promise-cache'
-
-export default function Backpressure() {
-  const elements = []
-  for (let i = 0; i < 2000; i++) {
-    elements.push(
-      <React.Suspense key={i} fallback={<span>loading...</span>}>
-        <Item idx={i} />
-      </React.Suspense>
-    )
-  }
-  return <React.Suspense>{elements}</React.Suspense>
-}
-
-function Item({ idx }) {
-  const key = idx.toString()
-  if (typeof window === 'undefined') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCachedPromise(key, () => Promise.resolve(), true)
-  }
-  return <span className="item">{key}</span>
-}
-
-// Disable offline build
-export function getServerSideProps() {
-  return { props: {} }
-}
diff --git a/test/integration/react-18/app/pages/suspense/no-preload.js b/test/integration/react-18/app/pages/suspense/no-preload.js
deleted file mode 100644
index 8ae8c7c599f2..000000000000
--- a/test/integration/react-18/app/pages/suspense/no-preload.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-
-const Bar = dynamic(() => import('../../components/bar'), {
-  ssr: false,
-  suspense: true,
-  // Explicitly declare loaded modules.
-  // For suspense cases, they'll be ignored.
-  // For loadable component cases, they'll be handled
-  loadableGenerated: {
-    modules: ['../../components/bar'],
-    webpack: [require.resolveWeak('../../components/bar')],
-  },
-})
-
-export default function NoPreload() {
-  return (
-    <Suspense fallback={'fallback'}>
-      <Bar />
-    </Suspense>
-  )
-}
diff --git a/test/integration/react-18/app/pages/suspense/no-thrown.js b/test/integration/react-18/app/pages/suspense/no-thrown.js
deleted file mode 100644
index 123ab2d39b0f..000000000000
--- a/test/integration/react-18/app/pages/suspense/no-thrown.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import DynamicHello from '../../components/dynamic-hello'
-
-export default function NoThrown() {
-  return <DynamicHello name="no-thrown" thrown={false} />
-}
diff --git a/test/integration/react-18/app/pages/suspense/thrown.js b/test/integration/react-18/app/pages/suspense/thrown.js
deleted file mode 100644
index 3f8d40a49ac4..000000000000
--- a/test/integration/react-18/app/pages/suspense/thrown.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import DynamicHello from '../../components/dynamic-hello'
-
-export default function Thrown() {
-  return <DynamicHello name="thrown" thrown />
-}
diff --git a/test/integration/react-18/app/pages/suspense/typing.tsx b/test/integration/react-18/app/pages/suspense/typing.tsx
deleted file mode 100644
index 5b5df73d7366..000000000000
--- a/test/integration/react-18/app/pages/suspense/typing.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-
-const DynamicFoo = dynamic(() => import('../../components/ts-foo'), {
-  suspense: true,
-})
-
-export default function Typing() {
-  return (
-    <Suspense fallback={null}>
-      <DynamicFoo />
-    </Suspense>
-  )
-}
diff --git a/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js b/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx
similarity index 87%
rename from test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js
rename to test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx
index 27105d3f9c3a..039f554337c3 100644
--- a/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js
+++ b/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx
@@ -1,3 +1,5 @@
+// use tsx to cover typescript usage of next/dynamic + suspense: true
+
 import React from 'react'
 import dynamic from 'next/dynamic'
 
diff --git a/test/integration/react-18/test/basics.js b/test/integration/react-18/test/basics.js
index bc63d2ad4f0f..051b6d4d2d5d 100644
--- a/test/integration/react-18/test/basics.js
+++ b/test/integration/react-18/test/basics.js
@@ -2,7 +2,7 @@
 
 import webdriver from 'next-webdriver'
 import cheerio from 'cheerio'
-import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
+import { renderViaHTTP } from 'next-test-utils'
 
 export default (context) => {
   it('no warnings for image related link props', async () => {
@@ -17,24 +17,6 @@ export default (context) => {
     expect(await browser.elementById('react-dom-version').text()).toMatch(/18/)
   })
 
-  it('should works with suspense in ssg', async () => {
-    const res1 = await fetchViaHTTP(context.appPort, '/suspense/thrown')
-    const res2 = await fetchViaHTTP(context.appPort, '/suspense/no-thrown')
-
-    expect(res1.status).toBe(200)
-    expect(res2.status).toBe(200)
-  })
-
-  it('should render fallback without preloads on server side', async () => {
-    const html = await renderViaHTTP(context.appPort, '/suspense/no-preload')
-    const $ = cheerio.load(html)
-    const nextData = JSON.parse($('#__NEXT_DATA__').text())
-    const content = $('#__next').text()
-    // <Bar> is suspended
-    expect(content).toBe('fallback')
-    expect(nextData.dynamicIds).toBeUndefined()
-  })
-
   it('useId() values should match on hydration', async () => {
     const html = await renderViaHTTP(context.appPort, '/use-id')
     const $ = cheerio.load(html)
diff --git a/test/integration/react-18/test/blocking.js b/test/integration/react-18/test/blocking.js
deleted file mode 100644
index 0db4aacd6cf9..000000000000
--- a/test/integration/react-18/test/blocking.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-env jest */
-
-import cheerio from 'cheerio'
-
-export default (context, render) => {
-  async function get$(path, query) {
-    const html = await render(path, query)
-    return cheerio.load(html)
-  }
-
-  it('should render fallback on server side if suspense without ssr', async () => {
-    const $ = await get$('/suspense/no-preload')
-    const nextData = JSON.parse($('#__NEXT_DATA__').text())
-    const content = $('#__next').text()
-    expect(content).toBe('fallback')
-    expect(nextData.dynamicIds).toBeUndefined()
-  })
-
-  // Testing the same thing as above.
-  it.skip('should render import fallback on server side if suspended without ssr', async () => {
-    const $ = await get$('/suspense/thrown')
-    const html = $('body').html()
-    expect(html).toContain('loading')
-    expect(JSON.parse($('#__NEXT_DATA__').text()).dynamicIds).toBeUndefined()
-  })
-}
diff --git a/test/integration/react-18/test/concurrent.js b/test/integration/react-18/test/concurrent.js
index 15eb424b16be..92871dbab3b8 100644
--- a/test/integration/react-18/test/concurrent.js
+++ b/test/integration/react-18/test/concurrent.js
@@ -7,7 +7,7 @@ export default (context, _render) => {
   async function withBrowser(path, cb) {
     let browser
     try {
-      browser = await webdriver(context.appPort, path, false)
+      browser = await webdriver(context.appPort, path)
       await cb(browser)
     } finally {
       if (browser) {
@@ -16,61 +16,6 @@ export default (context, _render) => {
     }
   }
 
-  it('should resolve suspense modules on server side if suspense', async () => {
-    await withBrowser('/suspense/no-preload', async (browser) => {
-      await check(() => browser.waitForElementByCss('#__next').text(), /barfoo/)
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
-  it('should resolve suspense on server side if not suspended on server', async () => {
-    await withBrowser('/suspense/no-thrown', async (browser) => {
-      await check(
-        () => browser.waitForElementByCss('#server-rendered').text(),
-        /true/
-      )
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
-  it('should resolve suspense on server side if suspended on server', async () => {
-    await withBrowser('/suspense/thrown', async (browser) => {
-      await check(
-        () => browser.waitForElementByCss('#server-rendered').text(),
-        /true/
-      )
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
-  it('should hydrate suspenses on client side if suspended on server', async () => {
-    await withBrowser('/suspense/thrown', async (browser) => {
-      await check(() => browser.waitForElementByCss('#hydrated').text(), /true/)
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
-  it('should drain the entire response', async () => {
-    await withBrowser('/suspense/backpressure', async (browser) => {
-      await check(
-        () => browser.eval('document.querySelectorAll(".item").length'),
-        /2000/
-      )
-    })
-  })
-
   it('throws if useFlushEffects is used more than once', async () => {
     await renderViaHTTP(context.appPort, '/use-flush-effect/multiple-calls')
     expect(context.stderr).toContain(
@@ -94,7 +39,7 @@ export default (context, _render) => {
         /blue/
       )
       await check(
-        () => browser.waitForElementByCss('#__jsx-c74678abd3b78a').text(),
+        () => browser.waitForElementByCss('#__jsx-8b0811664c4e575e').text(),
         /red/
       )
     })
diff --git a/test/integration/react-18/test/index.test.js b/test/integration/react-18/test/index.test.js
index 37e0fbe5263a..168c815bc5b4 100644
--- a/test/integration/react-18/test/index.test.js
+++ b/test/integration/react-18/test/index.test.js
@@ -13,7 +13,6 @@ import {
   hasRedbox,
   getRedboxHeader,
 } from 'next-test-utils'
-import blocking from './blocking'
 import concurrent from './concurrent'
 import basics from './basics'
 import strictMode from './strict-mode'
@@ -23,74 +22,8 @@ import webdriver from 'next-webdriver'
 const nodeArgs = ['-r', join(__dirname, 'require-hook.js')]
 const appDir = join(__dirname, '../app')
 const nextConfig = new File(join(appDir, 'next.config.js'))
-const dynamicHello = new File(join(appDir, 'components/dynamic-hello.js'))
 const invalidPage = new File(join(appDir, 'pages/invalid.js'))
 
-const USING_CREATE_ROOT = 'Using the createRoot API for React'
-
-async function getBuildOutput(dir) {
-  const { stdout, stderr } = await nextBuild(dir, [], {
-    stdout: true,
-    stderr: true,
-    nodeArgs,
-  })
-  return stdout + stderr
-}
-
-async function getDevOutput(dir) {
-  const port = await findPort()
-
-  let stdout = ''
-  let stderr = ''
-  let instance = await launchApp(dir, port, {
-    stdout: true,
-    stderr: true,
-    onStdout(msg) {
-      stdout += msg
-    },
-    onStderr(msg) {
-      stderr += msg
-    },
-    nodeArgs,
-  })
-  await killApp(instance)
-  return stdout + stderr
-}
-
-describe('React 18 Support', () => {
-  describe('Use legacy render', () => {
-    beforeAll(() => {
-      nextConfig.replace('reactRoot: true', 'reactRoot: false')
-    })
-    afterAll(() => {
-      nextConfig.restore()
-    })
-
-    test('supported version of react in dev', async () => {
-      const output = await getDevOutput(appDir)
-      expect(output).not.toMatch(USING_CREATE_ROOT)
-    })
-
-    test('supported version of react in build', async () => {
-      const output = await getBuildOutput(appDir)
-      expect(output).not.toMatch(USING_CREATE_ROOT)
-    })
-
-    test('suspense is not allowed in blocking rendering mode', async () => {
-      nextConfig.replace('withReact18({', '/*withReact18*/({')
-      const { stderr, code } = await nextBuild(appDir, [], {
-        stderr: true,
-      })
-      nextConfig.replace('/*withReact18*/({', 'withReact18({')
-
-      expect(stderr).toContain(
-        'Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense'
-      )
-      expect(code).toBe(1)
-    })
-  })
-})
-
 describe('Basics', () => {
   runTests('default setting with react 18', (context) => basics(context))
 })
@@ -115,19 +48,6 @@ describe('Strict mode - dev', () => {
   strictMode(context)
 })
 
-describe('Blocking mode', () => {
-  beforeAll(() => {
-    dynamicHello.replace('suspense = false', `suspense = true`)
-  })
-  afterAll(() => {
-    dynamicHello.restore()
-  })
-
-  runTests('`runtime` is disabled', (context) => {
-    blocking(context, (p, q) => renderViaHTTP(context.appPort, p, q))
-  })
-})
-
 function runTestsAgainstRuntime(runtime) {
   runTests(
     `Concurrent mode in the ${runtime} runtime`,
@@ -151,16 +71,12 @@ function runTestsAgainstRuntime(runtime) {
           invalidPage.write(`export const value = 1`)
         }
         nextConfig.replace("// runtime: 'edge'", `runtime: '${runtime}'`)
-        dynamicHello.replace('suspense = false', `suspense = true`)
-        // `noSSR` mode will be ignored by suspense
-        dynamicHello.replace('let ssr', `let ssr = false`)
       },
       afterAll: (env) => {
         if (env === 'dev') {
           invalidPage.delete()
         }
         nextConfig.restore()
-        dynamicHello.restore()
       },
     }
   )
diff --git a/test/integration/react-18/test/streaming-data.js b/test/integration/react-18/test/streaming-data.js
new file mode 100644
index 000000000000..7940347c3949
--- /dev/null
+++ b/test/integration/react-18/test/streaming-data.js
@@ -0,0 +1,16 @@
+export function createStreamingData() {
+  let result
+  let promise
+  function Data({ children, duration = 500 }) {
+    if (result) return result
+    if (!promise)
+      promise = new Promise((res) => {
+        setTimeout(() => {
+          result = children
+          res()
+        }, duration)
+      })
+    throw promise
+  }
+  return Data
+}
diff --git a/test/integration/react-streaming-and-server-components/app/components/bar.client.js b/test/integration/react-streaming-and-server-components/app/components/bar.client.js
new file mode 100644
index 000000000000..b58488a9c3b5
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/components/bar.client.js
@@ -0,0 +1,3 @@
+export default function bar() {
+  return 'bar.client'
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js b/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js
index 60e8bf7fe0c1..2b3c34f65a80 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js
@@ -1,12 +1,17 @@
 import { lazy, Suspense } from 'react'
+import dynamic from 'next/dynamic'
 
 const Foo = lazy(() => import('../components/foo.client'))
+const Bar = dynamic(() => import('../components/bar.client'), {
+  suspense: true,
+})
 
 export default function Page() {
   return (
     <div>
-      <Suspense fallback="loading...">
+      <Suspense fallback="fallback">
         <Foo />
+        <Bar />
       </Suspense>
     </div>
   )
diff --git a/test/integration/react-streaming-and-server-components/app/pages/index.server.js b/test/integration/react-streaming-and-server-components/app/pages/index.server.js
index 4bbf05c55236..7ca7e5e30855 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/index.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/index.server.js
@@ -1,4 +1,3 @@
-import Foo from '../components/foo.client'
 import Nav from '../components/nav.server'
 
 const envVar = process.env.ENV_VAR_TEST
@@ -11,9 +10,6 @@ export default function Index({ header, router }) {
       <div>{'path:' + router.pathname}</div>
       <div>{'env:' + envVar}</div>
       <div>{'header:' + header}</div>
-      <div>
-        <Foo />
-      </div>
       <Nav />
     </div>
   )
diff --git a/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js b/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js
index 5a9b4ce9acb5..7d8a12fe2968 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js
@@ -23,12 +23,12 @@ export default function Page() {
       <div>
         <ClientNamed />
       </div>
-      <di>
+      <div>
         <CjsShared />
-      </di>
-      <di>
+      </div>
+      <div>
         <CjsClient />
-      </di>
+      </div>
     </div>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/test/basic.js b/test/integration/react-streaming-and-server-components/test/basic.js
index c46f5c428364..5c5aec7ba820 100644
--- a/test/integration/react-streaming-and-server-components/test/basic.js
+++ b/test/integration/react-streaming-and-server-components/test/basic.js
@@ -61,6 +61,8 @@ export default async function basic(context, { env }) {
 
     const browser = await webdriver(context.appPort, '/dynamic-imports')
     const content = await browser.eval(`window.document.body.innerText`)
-    expect(content).toMatchInlineSnapshot('"foo.client"')
+    const dynamicIds = await browser.eval(`__NEXT_DATA__.dynamicIds`)
+    expect(content).toMatchInlineSnapshot('"foo.clientbar.client"')
+    expect(dynamicIds).toBe(undefined)
   })
 }
diff --git a/test/integration/react-streaming-and-server-components/test/rsc.js b/test/integration/react-streaming-and-server-components/test/rsc.js
index 0078f7056f64..e96e8dd40f84 100644
--- a/test/integration/react-streaming-and-server-components/test/rsc.js
+++ b/test/integration/react-streaming-and-server-components/test/rsc.js
@@ -20,7 +20,6 @@ export default function (context, { runtime, env }) {
     expect(homeHTML).toContain('env:env_var_test')
     expect(homeHTML).toContain('header:test-util')
     expect(homeHTML).toContain('path:/')
-    expect(homeHTML).toContain('foo.client')
   })
 
   it('should reuse the inline flight response without sending extra requests', async () => {

From f5917ad3eec4c22ad8aa13b83d3c6dd0e7e8368b Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Mon, 28 Mar 2022 16:24:57 +0200
Subject: [PATCH 30/39] Fix server component render condition (#35663)

We are currently using `!!ComponentMod.__next_rsc__` as the hint for the renderer to tell if the component is a server component, however that export field (`__next_rsc__`) is assigned to client components (`.client.[ext]`) as well.

This PR adds a new `__next_rsc_server__` field which is only true when the component is a server component so the renderer can handle client components correctly.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 .../next/build/webpack/loaders/next-flight-server-loader.ts   | 1 +
 packages/next/server/render.tsx                               | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/next/build/webpack/loaders/next-flight-server-loader.ts b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
index 112f3c740a89..693003fa64b6 100644
--- a/packages/next/build/webpack/loaders/next-flight-server-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-server-loader.ts
@@ -186,6 +186,7 @@ export default async function transformSource(
       __webpack_require__,
       _: () => {\n${imports}\n}
     }`,
+    __next_rsc_server__: isServerComponent(resourcePath) ? 'true' : 'false',
   }
 
   if (isClientCompilation) {
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index c3d1b2849d31..dc182741f126 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -469,9 +469,9 @@ export async function renderToHTML(
 
   // We don't need to opt-into the flight inlining logic if the page isn't a RSC.
   const isServerComponent =
-    !!serverComponentManifest &&
     hasConcurrentFeatures &&
-    !!ComponentMod.__next_rsc__
+    !!serverComponentManifest &&
+    !!ComponentMod.__next_rsc_server__
 
   let Component: React.ComponentType<{}> | ((props: any) => JSX.Element) =
     renderOpts.Component

From ab119bcc7963cc53efce8f1d22c60d34b4478271 Mon Sep 17 00:00:00 2001
From: Luis Alvarez D <luis@vercel.com>
Date: Mon, 28 Mar 2022 11:05:58 -0500
Subject: [PATCH 31/39] Update middleware examples list (#35622)

Logging and analytics are not provided in vercel/examples using middleware.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 docs/api-reference/next/server.md | 2 --
 docs/middleware.md                | 2 --
 2 files changed, 4 deletions(-)

diff --git a/docs/api-reference/next/server.md b/docs/api-reference/next/server.md
index 0d42e941acb5..d9139858801c 100644
--- a/docs/api-reference/next/server.md
+++ b/docs/api-reference/next/server.md
@@ -55,8 +55,6 @@ The `NextFetchEvent` object extends the native [`FetchEvent`](https://developer.
 
 The `waitUntil()` method can be used to prolong the execution of the function, after the response has been sent. In practice this means that you can send a response, then continue the function execution if you have other background work to make.
 
-An example of _why_ you would use `waitUntil()` is integrations with logging tools such as [Sentry](https://sentry.io) or [DataDog](https://www.datadoghq.com). After the response has been sent, you can send logs of response times, errors, API call durations or overall performance metrics.
-
 The `event` object is fully typed and can be imported from `next/server`.
 
 ```ts
diff --git a/docs/middleware.md b/docs/middleware.md
index d204f99a6c4d..b3dfc1bffb67 100644
--- a/docs/middleware.md
+++ b/docs/middleware.md
@@ -71,9 +71,7 @@ Middleware can be used for anything that shares logic for a set of pages, includ
 - [Redirects and rewrites](https://github.com/vercel/examples/tree/main/edge-functions)
 - [Handling unsupported browsers](https://github.com/vercel/examples/tree/main/edge-functions)
 - [Feature flags and A/B tests](https://github.com/vercel/examples/tree/main/edge-functions)
-- [Server-side analytics](https://github.com/vercel/examples/tree/main/edge-functions)
 - [Advanced i18n routing requirements](https://github.com/vercel/examples/tree/main/edge-functions)
-- [Logging](https://github.com/vercel/examples/tree/main/edge-functions)
 
 ## Execution Order
 

From 65680ba3cb6dea19952ed6313c10b41c33b81818 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Mon, 28 Mar 2022 18:27:50 +0200
Subject: [PATCH 32/39] Rename createRSCHook to createFlightHook (#35665)

Updates the naming of these to be in line with what it does.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
---
 packages/next/server/render.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index dc182741f126..2b5f36910aef 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -307,7 +307,7 @@ function checkRedirectValues(
 
 const rscCache = new Map()
 
-function createRSCHook() {
+function createFlightHook() {
   return (
     writable: WritableStream<Uint8Array>,
     id: string,
@@ -356,7 +356,7 @@ function createRSCHook() {
   }
 }
 
-const useRSCResponse = createRSCHook()
+const useFlightResponse = createFlightHook()
 
 // Create the wrapper component for a Flight stream.
 function createServerComponentRenderer(
@@ -386,7 +386,7 @@ function createServerComponentRenderer(
       serverComponentManifest
     )
 
-    const response = useRSCResponse(
+    const response = useFlightResponse(
       writable,
       cachePrefix + ',' + id,
       reqStream,

From 12e1bb7d329e4b9f51511e906e0121c3a3d82a68 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 28 Mar 2022 12:31:30 -0500
Subject: [PATCH 33/39] Ensure eslint plugins dont conflict (#35667)

---
 packages/eslint-config-next/index.js          |  45 +++++++
 test/lib/create-next-install.js               |   6 +-
 .../eslint-plugin-deps/index.test.ts          | 118 ++++++++++++++++++
 3 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 test/production/eslint-plugin-deps/index.test.ts

diff --git a/packages/eslint-config-next/index.js b/packages/eslint-config-next/index.js
index e5f39af71a40..5c846dee12af 100644
--- a/packages/eslint-config-next/index.js
+++ b/packages/eslint-config-next/index.js
@@ -4,6 +4,51 @@
  *
  * https://www.npmjs.com/package/@rushstack/eslint-patch
  */
+const keptPaths = []
+const sortedPaths = []
+const cwd = process.cwd().replace(/\\/g, '/')
+const originalPaths = require.resolve.paths('eslint-plugin-import')
+
+// eslint throws a conflict error when plugins resolve to different
+// locations, since we want to lock our dependencies by default
+// but also need to allow using user dependencies this updates
+// our resolve paths to first check the cwd and iterate to
+// eslint-config-next's dependencies if needed
+
+for (let i = originalPaths.length - 1; i >= 0; i--) {
+  const currentPath = originalPaths[i]
+
+  if (currentPath.replace(/\\/g, '/').startsWith(cwd)) {
+    sortedPaths.push(currentPath)
+  } else {
+    keptPaths.unshift(currentPath)
+  }
+}
+
+// maintain order of node_modules outside of cwd
+sortedPaths.push(...keptPaths)
+
+const hookPropertyMap = new Map(
+  [
+    ['eslint-plugin-import', 'eslint-plugin-import'],
+    ['eslint-plugin-react', 'eslint-plugin-react'],
+    ['eslint-plugin-jsx-a11y', 'eslint-plugin-jsx-a11y'],
+  ].map(([request, replacement]) => [
+    request,
+    require.resolve(replacement, { paths: sortedPaths }),
+  ])
+)
+
+const mod = require('module')
+const resolveFilename = mod._resolveFilename
+mod._resolveFilename = function (request, parent, isMain, options) {
+  const hookResolved = hookPropertyMap.get(request)
+  if (hookResolved) {
+    request = hookResolved
+  }
+  return resolveFilename.call(mod, request, parent, isMain, options)
+}
+
 require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
diff --git a/test/lib/create-next-install.js b/test/lib/create-next-install.js
index 466ff311da21..bb3abf8bb49e 100644
--- a/test/lib/create-next-install.js
+++ b/test/lib/create-next-install.js
@@ -51,7 +51,11 @@ async function createNextInstall(
 
   const pkgPaths = await linkPackages(tmpRepoDir)
   const combinedDependencies = {
-    ...dependencies,
+    ...Object.keys(dependencies).reduce((prev, pkg) => {
+      const pkgPath = pkgPaths.get(pkg)
+      prev[pkg] = pkgPath || dependencies[pkg]
+      return prev
+    }, {}),
     next: pkgPaths.get('next'),
   }
 
diff --git a/test/production/eslint-plugin-deps/index.test.ts b/test/production/eslint-plugin-deps/index.test.ts
new file mode 100644
index 000000000000..4ff95f1a0231
--- /dev/null
+++ b/test/production/eslint-plugin-deps/index.test.ts
@@ -0,0 +1,118 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('eslint plugin deps', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.tsx': `export default function Page() { 
+  return <p>hello world</p>;
+}
+`,
+        '.eslintrc': `
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react", "@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "next/core-web-vitals",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:import/typescript",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier"
+  ],
+  "env": {
+    "es2021": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "project": ["./tsconfig.json"],
+    "ecmaFeatures": { "jsx": true }
+  },
+  "settings": {
+    "react": { "version": "detect" },
+    "import/resolver": { "typescript": {} }
+  },
+  "rules": {
+    "no-else-return": "error",
+    "semi": ["error", "always"],
+    "no-useless-rename": "error",
+    "quotes": ["error", "double"],
+    "eol-last": ["error", "always"],
+    "no-console": [2, { "allow": ["warn", "error"] }],
+    "no-multiple-empty-lines": ["error", { "max": 1 }],
+    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true, "enforceForJSX": true }],
+
+    "import/named": 0,
+    "import/order": [
+      "error",
+      {
+        "warnOnUnassignedImports": true,
+        "newlines-between": "always",
+        "groups": ["builtin", "external", "internal", "parent", ["sibling", "index"], "object", "type"]
+      }
+    ],
+
+    "react/display-name": 0,
+    "react/prop-types": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/self-closing-comp": ["error", { "component": true }],
+
+    "react-hooks/exhaustive-deps": ["warn", { "additionalHooks": "useIsomorphicLayoutEffect" }],
+
+    "@typescript-eslint/indent": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/member-delimiter-style": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/no-unused-vars": [2, { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/array-type": ["error", { "default": "array-simple" }],
+    "@typescript-eslint/no-unnecessary-boolean-literal-compare": [
+      "error",
+      { "allowComparingNullableBooleansToTrue": false }
+    ]
+  }
+}
+        `,
+      },
+      dependencies: {
+        '@typescript-eslint/eslint-plugin': '^5.16.0',
+        '@typescript-eslint/parser': '^5.16.0',
+        'eslint-config-prettier': '^8.5.0',
+        'eslint-plugin-import': '^2.25.4',
+        'eslint-plugin-react': '^7.29.4',
+        next: '12.1.1',
+        react: '17.0.2',
+        'react-dom': '17.0.2',
+        '@types/node': '17.0.23',
+        '@types/react': '17.0.43',
+        '@types/react-dom': '17.0.14',
+        eslint: '^8.12.0',
+        'eslint-config-next': '^12.1.1',
+        typescript: '4.6.3',
+      },
+      packageJson: {
+        scripts: {
+          build: 'next build --no-lint && next lint',
+        },
+      },
+      buildCommand: 'yarn build',
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should work', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    expect(html).toContain('hello world')
+  })
+})

From 825425494a9d691f70f4a7a2808767c23052637d Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 28 Mar 2022 13:08:22 -0500
Subject: [PATCH 34/39] v12.1.2-canary.1

---
 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-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index 056ce66681be..ae26a691de76 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.2-canary.0"
+  "version": "12.1.2-canary.1"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 25e7a71d151c..688c3fdb2a90 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 594178e4d4e8..57b27acfc7f5 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "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.1.2-canary.0",
+    "@next/eslint-plugin-next": "12.1.2-canary.1",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 191e93c0e53e..8a2b5843b5c0 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": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "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 b7ad5917caf4..a58b11e7903f 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index 9591e55d3bf6..eea165a96043 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index 00a4d7daacfd..e42692157a11 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index ecccc07db097..0d198863dbd1 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 447964a637bf..92e9cae35890 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "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 719adc4f2f5f..2d37bc22624f 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "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 49c16517aa05..8e43d1fc2097 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 7150ee69abb1..653b5291688b 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index ceaefd606b69..a81dec2955a8 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.2-canary.0",
+    "@next/env": "12.1.2-canary.1",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.2-canary.0",
-    "@next/polyfill-nomodule": "12.1.2-canary.0",
-    "@next/react-dev-overlay": "12.1.2-canary.0",
-    "@next/react-refresh-utils": "12.1.2-canary.0",
-    "@next/swc": "12.1.2-canary.0",
+    "@next/polyfill-module": "12.1.2-canary.1",
+    "@next/polyfill-nomodule": "12.1.2-canary.1",
+    "@next/react-dev-overlay": "12.1.2-canary.1",
+    "@next/react-refresh-utils": "12.1.2-canary.1",
+    "@next/swc": "12.1.2-canary.1",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 6790d114cb9a..0cf6b9f284cc 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": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "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 8f2383bd3ad2..590224daa7c3 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": "12.1.2-canary.0",
+  "version": "12.1.2-canary.1",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From 50be7cc17d192084613ead62fbb5f4026bd96cee Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 28 Mar 2022 13:56:02 -0500
Subject: [PATCH 35/39] v12.1.2

---
 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-swc/package.json               |  2 +-
 packages/next/package.json                   | 14 +++++++-------
 packages/react-dev-overlay/package.json      |  2 +-
 packages/react-refresh-utils/package.json    |  2 +-
 15 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/lerna.json b/lerna.json
index ae26a691de76..6108fab7589b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.2-canary.1"
+  "version": "12.1.2"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
index 688c3fdb2a90..caed389602ef 100644
--- a/packages/create-next-app/package.json
+++ b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "keywords": [
     "react",
     "next",
diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
index 57b27acfc7f5..4eb7643da700 100644
--- a/packages/eslint-config-next/package.json
+++ b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "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.1.2-canary.1",
+    "@next/eslint-plugin-next": "12.1.2",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
index 8a2b5843b5c0..2aa944bcab16 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": "12.1.2-canary.1",
+  "version": "12.1.2",
   "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 a58b11e7903f..67bf835b6c7b 100644
--- a/packages/next-bundle-analyzer/package.json
+++ b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
index eea165a96043..632bb48f8fd5 100644
--- a/packages/next-codemod/package.json
+++ b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",
diff --git a/packages/next-env/package.json b/packages/next-env/package.json
index e42692157a11..7120241d4ca5 100644
--- a/packages/next-env/package.json
+++ b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "keywords": [
     "react",
     "next",
diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
index 0d198863dbd1..4dcd5733adcf 100644
--- a/packages/next-mdx/package.json
+++ b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {
diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
index 92e9cae35890..6a85c002c7f8 100644
--- a/packages/next-plugin-storybook/package.json
+++ b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "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 2d37bc22624f..9155e26ae721 100644
--- a/packages/next-polyfill-module/package.json
+++ b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "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 8e43d1fc2097..0c1057bde87d 100644
--- a/packages/next-polyfill-nomodule/package.json
+++ b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",
diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
index 653b5291688b..0e67b7c724d1 100644
--- a/packages/next-swc/package.json
+++ b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",
diff --git a/packages/next/package.json b/packages/next/package.json
index a81dec2955a8..da85dd199e07 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.1.2-canary.1",
+  "version": "12.1.2",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -69,7 +69,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "12.1.2-canary.1",
+    "@next/env": "12.1.2",
     "caniuse-lite": "^1.0.30001283",
     "postcss": "8.4.5",
     "styled-jsx": "5.0.1",
@@ -118,11 +118,11 @@
     "@hapi/accept": "5.0.2",
     "@napi-rs/cli": "2.4.4",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "12.1.2-canary.1",
-    "@next/polyfill-nomodule": "12.1.2-canary.1",
-    "@next/react-dev-overlay": "12.1.2-canary.1",
-    "@next/react-refresh-utils": "12.1.2-canary.1",
-    "@next/swc": "12.1.2-canary.1",
+    "@next/polyfill-module": "12.1.2",
+    "@next/polyfill-nomodule": "12.1.2",
+    "@next/react-dev-overlay": "12.1.2",
+    "@next/react-refresh-utils": "12.1.2",
+    "@next/swc": "12.1.2",
     "@peculiar/webcrypto": "1.3.1",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index 0cf6b9f284cc..28f6e8b7afb4 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": "12.1.2-canary.1",
+  "version": "12.1.2",
   "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 590224daa7c3..4839ede3f5d6 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": "12.1.2-canary.1",
+  "version": "12.1.2",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

From 3d5a9bf5e7a44286254c8a5fd9f674537ba41d4f Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 28 Mar 2022 15:23:39 -0500
Subject: [PATCH 36/39] Fix next info test during stable release (#35668)

---
 test/integration/cli/test/index.test.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/test/integration/cli/test/index.test.js b/test/integration/cli/test/index.test.js
index c3d7aad3092b..de5951fbcfef 100644
--- a/test/integration/cli/test/index.test.js
+++ b/test/integration/cli/test/index.test.js
@@ -491,7 +491,12 @@ describe('CLI Usage', () => {
         stdout: true,
         stderr: true,
       })
-      expect(info.stderr || '').toBe('')
+
+      // when a stable release is done the non-latest canary
+      // warning will show so skip this check for the stable release
+      if (pkg.version.includes('-canary')) {
+        expect(info.stderr || '').toBe('')
+      }
       expect(info.stdout).toMatch(
         new RegExp(`
     Operating System:

From 6a4c70e05156b32c1215454f1fd81090f5a7f74f Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 28 Mar 2022 15:46:01 -0500
Subject: [PATCH 37/39] Update default test timeouts for yarn install times
 (#35669)

This updates our default test times as discussed to account for longer `yarn install` times for the isolated tests as GitHub actions network can be slow.

x-ref: https://github.com/vercel/next.js/pull/35507#issuecomment-1074606737
x-ref: [slack thread](https://vercel.slack.com/archives/CGU8HUTUH/p1647919982840099)
---
 test/lib/e2e-utils.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/lib/e2e-utils.ts b/test/lib/e2e-utils.ts
index fa9474f5ca35..3f25fa2793d9 100644
--- a/test/lib/e2e-utils.ts
+++ b/test/lib/e2e-utils.ts
@@ -5,6 +5,9 @@ import { InstallCommand, NextInstance, PackageJson } from './next-modes/base'
 import { NextDevInstance } from './next-modes/next-dev'
 import { NextStartInstance } from './next-modes/next-start'
 
+// increase timeout to account for yarn install time
+jest.setTimeout((process.platform === 'win32' ? 240 : 180) * 1000)
+
 const testsFolder = path.join(__dirname, '..')
 
 let testFile

From 5d1f33f5c42a3ab2d88db16471cd108531d65f71 Mon Sep 17 00:00:00 2001
From: Luis Alvarez D <luis@vercel.com>
Date: Mon, 28 Mar 2022 16:15:08 -0500
Subject: [PATCH 38/39] Add deprecated JSDoc comments for the previous
 middleware signature (#35448)

Something I noticed while using Middleware is that the older and no longer working methods are still accessible for the `event` with autocompletion because of their types, and the way of knowing they're deprecated is by running the app and seeing the error message, this should improve that when coding in tools like VS Code.

## 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
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
---
 .../next/server/web/spec-extension/fetch-event.ts     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/next/server/web/spec-extension/fetch-event.ts b/packages/next/server/web/spec-extension/fetch-event.ts
index 4e1af9e28a1a..43374e9bd72f 100644
--- a/packages/next/server/web/spec-extension/fetch-event.ts
+++ b/packages/next/server/web/spec-extension/fetch-event.ts
@@ -10,13 +10,22 @@ export class NextFetchEvent extends FetchEvent {
     this.sourcePage = params.page
   }
 
-  // @ts-ignore
+  /**
+   * @deprecated The `request` is now the first parameter and the API is now async.
+   *
+   * Read more: https://nextjs.org/docs/messages/middleware-new-signature
+   */
   get request() {
     throw new DeprecationError({
       page: this.sourcePage,
     })
   }
 
+  /**
+   * @deprecated Using `respondWith` is no longer needed.
+   *
+   * Read more: https://nextjs.org/docs/messages/middleware-new-signature
+   */
   respondWith() {
     throw new DeprecationError({
       page: this.sourcePage,

From 53d1b00c7fd71f26c3b4ae1f987855d35b7fca04 Mon Sep 17 00:00:00 2001
From: Naoyuki Kanezawa <naoyuki.kanezawa@gmail.com>
Date: Tue, 29 Mar 2022 04:16:43 +0700
Subject: [PATCH 39/39] fix the dynamic routing of middleware (#32601)

* fix the dynamic routing of middleware

* add middleware to dynamicRoutes of routes-manifest

* remove unused import

* fix middleware routing with static paths

* update manifest version test

* prevent to match with api route using regex

* use iterator instead of generator

* do not use Iterator

* fix type

* fix type

* remove unused import

* apply the fix for support colons

Co-authored-by: JJ Kasper <jj@jjsweb.site>
---
 packages/next/build/index.ts                  |  35 +-
 packages/next/server/base-server.ts           |  91 ++---
 packages/next/server/dev/next-dev-server.ts   |  61 ++-
 packages/next/server/next-server.ts           | 357 ++++++++++--------
 packages/next/server/router.ts                |  36 +-
 packages/next/server/web-server.ts            |   5 +-
 packages/next/shared/lib/router/router.ts     |  18 +-
 .../lib/router/utils/get-middleware-regex.ts  |  20 +-
 .../next/shared/lib/router/utils/index.ts     |   1 +
 .../shared/lib/router/utils/routing-items.ts  |  42 +++
 .../shared/lib/router/utils/sorted-routes.ts  |  12 +
 .../custom-routes/test/index.test.js          |   2 +-
 .../pages/middleware/[slug]/_middleware.js    |   5 +
 .../dynamic-routing/test/index.test.js        |   8 +-
 .../middleware/dynamic-route/next.config.js   |   6 +
 .../pages/[slug]/[id]/_middleware.js          |   7 +
 .../dynamic-route/pages/[slug]/[id]/index.js  |   3 +
 .../dynamic-route/pages/[slug]/_middleware.js |   7 +
 .../dynamic-route/pages/[slug]/index.js       |   3 +
 .../dynamic-route/pages/[slug]/static.js      |   3 +
 .../dynamic-route/pages/_middleware.js        |  19 +
 .../dynamic-route/pages/api/_middleware.js    |   7 +
 .../dynamic-route/pages/api/index.js          |   3 +
 .../pages/catch-all/[...rest].js              |   3 +
 .../pages/catch-all/_middleware.js            |   7 +
 .../dynamic-route/pages/dir/_middleware.js    |   7 +
 .../dynamic-route/pages/dir/index.js          |   3 +
 .../middleware/dynamic-route/pages/index.js   |   3 +
 .../pages/optional-catch-all/[[...rest]].js   |   3 +
 .../pages/optional-catch-all/_middleware.js   |   7 +
 .../middleware/dynamic-route/pages/static.js  |   3 +
 .../dynamic-route/public/robots.txt           |   7 +
 .../dynamic-route/test/index.test.js          | 307 +++++++++++++++
 test/unit/page-route-sorter.test.ts           |  82 ++++
 34 files changed, 922 insertions(+), 261 deletions(-)
 create mode 100644 packages/next/shared/lib/router/utils/routing-items.ts
 create mode 100644 test/integration/dynamic-routing/pages/middleware/[slug]/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/next.config.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/[slug]/[id]/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/[slug]/[id]/index.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/[slug]/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/[slug]/index.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/[slug]/static.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/api/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/api/index.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/catch-all/[...rest].js
 create mode 100644 test/integration/middleware/dynamic-route/pages/catch-all/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/dir/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/dir/index.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/index.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/optional-catch-all/[[...rest]].js
 create mode 100644 test/integration/middleware/dynamic-route/pages/optional-catch-all/_middleware.js
 create mode 100644 test/integration/middleware/dynamic-route/pages/static.js
 create mode 100644 test/integration/middleware/dynamic-route/public/robots.txt
 create mode 100644 test/integration/middleware/dynamic-route/test/index.test.js

diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index f96f20f6228a..098b3757f486 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -447,12 +447,18 @@ export default async function build(
         namedRegex?: string
         routeKeys?: { [key: string]: string }
       }>
-      dynamicRoutes: Array<{
-        page: string
-        regex: string
-        namedRegex?: string
-        routeKeys?: { [key: string]: string }
-      }>
+      dynamicRoutes: Array<
+        | {
+            page: string
+            regex: string
+            namedRegex?: string
+            routeKeys?: { [key: string]: string }
+          }
+        | {
+            page: string
+            isMiddleware: true
+          }
+      >
       dataRoutes: Array<{
         page: string
         routeKeys?: { [key: string]: string }
@@ -471,14 +477,14 @@ export default async function build(
         localeDetection?: false
       }
     } = nextBuildSpan.traceChild('generate-routes-manifest').traceFn(() => ({
-      version: 3,
+      version: 4,
       pages404: true,
       basePath: config.basePath,
       redirects: redirects.map((r: any) => buildCustomRoute(r, 'redirect')),
       headers: headers.map((r: any) => buildCustomRoute(r, 'header')),
       dynamicRoutes: getSortedRoutes(pageKeys)
-        .filter((page) => isDynamicRoute(page) && !page.match(MIDDLEWARE_ROUTE))
-        .map(pageToRoute),
+        .filter((page) => isDynamicRoute(page))
+        .map(pageToRouteOrMiddleware),
       staticRoutes: getSortedRoutes(pageKeys)
         .filter(
           (page) =>
@@ -2190,3 +2196,14 @@ function pageToRoute(page: string) {
     namedRegex: routeRegex.namedRegex,
   }
 }
+
+function pageToRouteOrMiddleware(page: string) {
+  if (page.match(MIDDLEWARE_ROUTE)) {
+    return {
+      page: page.replace(/\/_middleware$/, '') || '/',
+      isMiddleware: true as const,
+    }
+  }
+
+  return pageToRoute(page)
+}
diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
index 68d1eca05ffa..afc48797a508 100644
--- a/packages/next/server/base-server.ts
+++ b/packages/next/server/base-server.ts
@@ -29,10 +29,9 @@ import {
   TEMPORARY_REDIRECT_STATUS,
 } from '../shared/lib/constants'
 import {
-  getRouteMatcher,
-  getRouteRegex,
-  getSortedRoutes,
+  getRoutingItems,
   isDynamicRoute,
+  RoutingItem,
 } from '../shared/lib/router/utils'
 import {
   setLazyProp,
@@ -71,12 +70,6 @@ export type FindComponentsResult = {
   query: NextParsedUrlQuery
 }
 
-interface RoutingItem {
-  page: string
-  match: ReturnType<typeof getRouteMatcher>
-  ssr?: boolean
-}
-
 export interface Options {
   /**
    * Object containing the configuration next.config.js
@@ -177,8 +170,8 @@ export default abstract class Server {
   protected dynamicRoutes?: DynamicRoutes
   protected customRoutes: CustomRoutes
   protected middlewareManifest?: MiddlewareManifest
-  protected middleware?: RoutingItem[]
   protected serverComponentManifest?: any
+  protected allRoutes?: RoutingItem[]
   public readonly hostname?: string
   public readonly port?: number
 
@@ -190,7 +183,8 @@ export default abstract class Server {
   protected abstract generateImageRoutes(): Route[]
   protected abstract generateStaticRoutes(): Route[]
   protected abstract generateFsStaticRoutes(): Route[]
-  protected abstract generateCatchAllMiddlewareRoute(): Route | undefined
+  protected abstract generateCatchAllStaticMiddlewareRoute(): Route | undefined
+  protected abstract generateCatchAllDynamicMiddlewareRoute(): Route | undefined
   protected abstract generateRewrites({
     restrictedRedirectPaths,
   }: {
@@ -201,14 +195,6 @@ export default abstract class Server {
     fallback: Route[]
   }
   protected abstract getFilesystemPaths(): Set<string>
-  protected abstract getMiddleware(): {
-    match: (pathname: string | null | undefined) =>
-      | false
-      | {
-          [paramName: string]: string | string[]
-        }
-    page: string
-  }[]
   protected abstract findPageComponents(
     pathname: string,
     query?: NextParsedUrlQuery,
@@ -654,9 +640,11 @@ export default abstract class Server {
       fallback: Route[]
     }
     fsRoutes: Route[]
+    internalFsRoutes: Route[]
     redirects: Route[]
     catchAllRoute: Route
-    catchAllMiddleware?: Route
+    catchAllStaticMiddleware?: Route
+    catchAllDynamicMiddleware?: Route
     pageChecker: PageChecker
     useFileSystemPublicRoutes: boolean
     dynamicRoutes: DynamicRoutes | undefined
@@ -666,7 +654,7 @@ export default abstract class Server {
     const imageRoutes = this.generateImageRoutes()
     const staticFilesRoutes = this.generateStaticRoutes()
 
-    const fsRoutes: Route[] = [
+    const internalFsRoutes: Route[] = [
       ...this.generateFsStaticRoutes(),
       {
         match: route('/_next/data/:path*'),
@@ -756,10 +744,10 @@ export default abstract class Server {
           }
         },
       },
-      ...publicRoutes,
-      ...staticFilesRoutes,
     ]
 
+    const fsRoutes: Route[] = [...publicRoutes, ...staticFilesRoutes]
+
     const restrictedRedirectPaths = this.nextConfig.basePath
       ? [`${this.nextConfig.basePath}/_next`]
       : ['/_next']
@@ -778,7 +766,10 @@ export default abstract class Server {
         )
 
     const rewrites = this.generateRewrites({ restrictedRedirectPaths })
-    const catchAllMiddleware = this.generateCatchAllMiddlewareRoute()
+    const catchAllStaticMiddleware =
+      this.generateCatchAllStaticMiddlewareRoute()
+    const catchAllDynamicMiddleware =
+      this.generateCatchAllDynamicMiddlewareRoute()
 
     const catchAllRoute: Route = {
       match: route('/:path*'),
@@ -813,7 +804,7 @@ export default abstract class Server {
           }
         }
 
-        if (pathname === '/api' || pathname.startsWith('/api/')) {
+        if (isApiRoute(pathname)) {
           delete query._nextBubbleNoFallback
 
           const handled = await this.handleApiRequest(req, res, pathname, query)
@@ -842,19 +833,19 @@ export default abstract class Server {
     const { useFileSystemPublicRoutes } = this.nextConfig
 
     if (useFileSystemPublicRoutes) {
+      this.allRoutes = this.getAllRoutes()
       this.dynamicRoutes = this.getDynamicRoutes()
-      if (!this.minimalMode) {
-        this.middleware = this.getMiddleware()
-      }
     }
 
     return {
       headers,
       fsRoutes,
+      internalFsRoutes,
       rewrites,
       redirects,
       catchAllRoute,
-      catchAllMiddleware,
+      catchAllStaticMiddleware,
+      catchAllDynamicMiddleware,
       useFileSystemPublicRoutes,
       dynamicRoutes: this.dynamicRoutes,
       basePath: this.nextConfig.basePath,
@@ -931,24 +922,34 @@ export default abstract class Server {
     return this.runApi(req, res, query, params, page, builtPagePath)
   }
 
+  protected getAllRoutes(): RoutingItem[] {
+    const pages = Object.keys(this.pagesManifest!).map(
+      (page) =>
+        normalizeLocalePath(page, this.nextConfig.i18n?.locales).pathname
+    )
+    const middlewareMap = this.minimalMode
+      ? {}
+      : this.middlewareManifest?.middleware || {}
+    const middleware = Object.keys(middlewareMap).map((page) => ({
+      page,
+      ssr: !MIDDLEWARE_ROUTE.test(middlewareMap[page].name),
+    }))
+    return getRoutingItems(pages, middleware)
+  }
+
   protected getDynamicRoutes(): Array<RoutingItem> {
     const addedPages = new Set<string>()
 
-    return getSortedRoutes(
-      Object.keys(this.pagesManifest!).map(
-        (page) =>
-          normalizeLocalePath(page, this.nextConfig.i18n?.locales).pathname
+    return this.allRoutes!.filter((item) => {
+      if (
+        item.isMiddleware ||
+        addedPages.has(item.page) ||
+        !isDynamicRoute(item.page)
       )
-    )
-      .map((page) => {
-        if (addedPages.has(page) || !isDynamicRoute(page)) return null
-        addedPages.add(page)
-        return {
-          page,
-          match: getRouteMatcher(getRouteRegex(page)),
-        }
-      })
-      .filter((item): item is RoutingItem => Boolean(item))
+        return false
+      addedPages.add(item.page)
+      return true
+    })
   }
 
   protected async run(
@@ -1926,6 +1927,10 @@ export function prepareServerlessUrl(
 
 export { stringifyQuery } from './server-route-utils'
 
+export function isApiRoute(pathname: string) {
+  return pathname === '/api' || pathname.startsWith('/api/')
+}
+
 class NoFallbackError extends Error {}
 
 // Internal wrapper around build errors at development
diff --git a/packages/next/server/dev/next-dev-server.ts b/packages/next/server/dev/next-dev-server.ts
index b30545ae5bdc..9f0fd64aba56 100644
--- a/packages/next/server/dev/next-dev-server.ts
+++ b/packages/next/server/dev/next-dev-server.ts
@@ -34,10 +34,9 @@ import {
   DEV_MIDDLEWARE_MANIFEST,
 } from '../../shared/lib/constants'
 import {
-  getRouteMatcher,
-  getRouteRegex,
-  getSortedRoutes,
+  getRoutingItems,
   isDynamicRoute,
+  RoutingItem,
 } from '../../shared/lib/router/utils'
 import Server, { WrappedBuildError } from '../next-server'
 import { normalizePagePath } from '../normalize-page-path'
@@ -59,7 +58,6 @@ import {
 } from 'next/dist/compiled/@next/react-dev-overlay/middleware'
 import * as Log from '../../build/output/log'
 import isError, { getProperError } from '../../lib/is-error'
-import { getMiddlewareRegex } from '../../shared/lib/router/utils/get-middleware-regex'
 import { isCustomErrorPage, isReservedPage } from '../../build/utils'
 import { NodeNextResponse, NodeNextRequest } from '../base-http/node'
 import { getPageRuntime, invalidatePageRuntimeCache } from '../../build/entries'
@@ -93,6 +91,7 @@ export default class DevServer extends Server {
   private isCustomServer: boolean
   protected sortedRoutes?: string[]
   private addedUpgradeListener = false
+  private middleware?: RoutingItem[]
 
   protected staticPathsWorker?: { [key: string]: any } & {
     loadStaticPaths: typeof import('./static-paths-worker').loadStaticPaths
@@ -261,7 +260,6 @@ export default class DevServer extends Server {
         const routedMiddleware = []
         const routedPages = []
         const knownFiles = wp.getTimeInfoEntries()
-        const ssrMiddleware = new Set<string>()
 
         for (const [fileName, { accuracy, safeTime }] of knownFiles) {
           if (accuracy === undefined || !regexPageExtension.test(fileName)) {
@@ -269,11 +267,13 @@ export default class DevServer extends Server {
           }
 
           if (regexMiddleware.test(fileName)) {
-            routedMiddleware.push(
-              `/${relative(pagesDir!, fileName).replace(/\\+/g, '/')}`
-                .replace(/^\/+/g, '/')
-                .replace(regexMiddleware, '/')
-            )
+            routedMiddleware.push({
+              page:
+                `/${relative(pagesDir!, fileName).replace(/\\+/g, '/')}`
+                  .replace(/^\/+/g, '/')
+                  .replace(regexMiddleware, '') || '/',
+              ssr: false,
+            })
             continue
           }
 
@@ -293,26 +293,22 @@ export default class DevServer extends Server {
             isEdgeRuntime &&
             !(isReservedPage(pageName) || isCustomErrorPage(pageName))
           ) {
-            routedMiddleware.push(pageName)
-            ssrMiddleware.add(pageName)
+            routedMiddleware.push({ page: pageName, ssr: true })
           }
 
           routedPages.push(pageName)
         }
 
-        this.middleware = getSortedRoutes(routedMiddleware).map((page) => ({
-          match: getRouteMatcher(
-            getMiddlewareRegex(page, !ssrMiddleware.has(page))
-          ),
-          page,
-          ssr: ssrMiddleware.has(page),
-        }))
+        this.allRoutes = getRoutingItems(routedPages, routedMiddleware)
+        this.middleware = this.allRoutes.filter((r) => r.isMiddleware)
 
         try {
           // we serve a separate manifest with all pages for the client in
           // dev mode so that we can match a page after a rewrite on the client
           // before it has been built and is populated in the _buildManifest
-          const sortedRoutes = getSortedRoutes(routedPages)
+          const sortedRoutes = this.allRoutes
+            .filter((r) => !r.isMiddleware)
+            .map((r) => r.page)
 
           if (
             !this.sortedRoutes?.every((val, idx) => val === sortedRoutes[idx])
@@ -322,12 +318,9 @@ export default class DevServer extends Server {
           }
           this.sortedRoutes = sortedRoutes
 
-          this.dynamicRoutes = this.sortedRoutes
-            .filter(isDynamicRoute)
-            .map((page) => ({
-              page,
-              match: getRouteMatcher(getRouteRegex(page)),
-            }))
+          this.dynamicRoutes = this.allRoutes.filter(
+            (r) => !r.isMiddleware && isDynamicRoute(r.page)
+          )
 
           this.router.setDynamicRoutes(this.dynamicRoutes)
 
@@ -535,6 +528,7 @@ export default class DevServer extends Server {
     response: BaseNextResponse
     parsedUrl: ParsedNextUrl
     parsed: UrlWithParsedQuery
+    middleware: RoutingItem[]
   }): Promise<FetchEventResult | null> {
     try {
       const result = await super.runMiddleware({
@@ -749,11 +743,12 @@ export default class DevServer extends Server {
   }
 
   generateRoutes() {
-    const { fsRoutes, ...otherRoutes } = super.generateRoutes()
+    const { fsRoutes, internalFsRoutes, ...otherRoutes } =
+      super.generateRoutes()
 
     // In development we expose all compiled files for react-error-overlay's line show feature
     // We use unshift so that we're sure the routes is defined before Next's default routes
-    fsRoutes.unshift({
+    internalFsRoutes.unshift({
       match: route('/_next/development/:path*'),
       type: 'route',
       name: '_next/development catchall',
@@ -766,7 +761,7 @@ export default class DevServer extends Server {
       },
     })
 
-    fsRoutes.unshift({
+    internalFsRoutes.unshift({
       match: route(
         `/_next/${CLIENT_STATIC_FILES_PATH}/${this.buildId}/${DEV_CLIENT_PAGES_MANIFEST}`
       ),
@@ -788,7 +783,7 @@ export default class DevServer extends Server {
       },
     })
 
-    fsRoutes.unshift({
+    internalFsRoutes.unshift({
       match: route(
         `/_next/${CLIENT_STATIC_FILES_PATH}/${this.buildId}/${DEV_MIDDLEWARE_MANIFEST}`
       ),
@@ -837,7 +832,7 @@ export default class DevServer extends Server {
       },
     })
 
-    return { fsRoutes, ...otherRoutes }
+    return { fsRoutes, internalFsRoutes, ...otherRoutes }
   }
 
   // In development public files are not added to the router but handled as a fallback instead
@@ -845,6 +840,10 @@ export default class DevServer extends Server {
     return []
   }
 
+  protected getAllRoutes(): RoutingItem[] {
+    return []
+  }
+
   // In development dynamic routes cannot be known ahead of time
   protected getDynamicRoutes(): never[] {
     return []
diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
index 736cd9de1be7..c4fb80557656 100644
--- a/packages/next/server/next-server.ts
+++ b/packages/next/server/next-server.ts
@@ -3,7 +3,7 @@ import type { Params, Route } from './router'
 import type { CacheFs } from '../shared/lib/utils'
 import type { MiddlewareManifest } from '../build/webpack/plugins/middleware-plugin'
 import type RenderResult from './render-result'
-import type { FetchEventResult } from './web/types'
+import type { FetchEventResult, RequestData } from './web/types'
 import type { ParsedNextUrl } from '../shared/lib/router/utils/parse-next-url'
 import type { PrerenderManifest } from '../build'
 import type { Rewrite } from '../lib/load-custom-routes'
@@ -57,6 +57,7 @@ import BaseServer, {
   FindComponentsResult,
   prepareServerlessUrl,
   stringifyQuery,
+  isApiRoute,
 } from './base-server'
 import { getMiddlewareInfo, getPagePath, requireFontManifest } from './require'
 import { normalizePagePath } from './normalize-page-path'
@@ -68,14 +69,14 @@ import { relativizeURL } from '../shared/lib/router/utils/relativize-url'
 import { parseNextUrl } from '../shared/lib/router/utils/parse-next-url'
 import { prepareDestination } from '../shared/lib/router/utils/prepare-destination'
 import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
-import { getMiddlewareRegex, getRouteMatcher } from '../shared/lib/router/utils'
-import { MIDDLEWARE_ROUTE } from '../lib/constants'
+import { RoutingItem } from '../shared/lib/router/utils'
 import { loadEnvConfig } from '@next/env'
 import { getCustomRoute } from './server-route-utils'
 import { urlQueryToSearchParams } from '../shared/lib/router/utils/querystring'
 import ResponseCache from '../server/response-cache'
 import { removePathTrailingSlash } from '../client/normalize-trailing-slash'
 import { clonableBodyForRequest } from './body-streams'
+import { isDynamicRoute } from '../shared/lib/router/utils/is-dynamic'
 
 export * from './base-server'
 
@@ -1022,192 +1023,229 @@ export default class NextNodeServer extends BaseServer {
     }
   }
 
-  protected generateCatchAllMiddlewareRoute(): Route | undefined {
+  protected generateCatchAllStaticMiddlewareRoute(): Route | undefined {
     if (this.minimalMode) return undefined
 
     return {
       match: route('/:path*'),
       type: 'route',
-      name: 'middleware catchall',
+      name: 'static middleware catchall',
       fn: async (req, res, _params, parsed) => {
-        if (!this.middleware?.length) {
-          return { finished: false }
-        }
+        return await this.handleMiddlewareRoute({
+          isDynamic: false,
+          req,
+          res,
+          parsed,
+        })
+      },
+    }
+  }
 
-        const initUrl = getRequestMeta(req, '__NEXT_INIT_URL')!
-        const parsedUrl = parseNextUrl({
-          url: initUrl,
-          headers: req.headers,
-          nextConfig: {
-            basePath: this.nextConfig.basePath,
-            i18n: this.nextConfig.i18n,
-            trailingSlash: this.nextConfig.trailingSlash,
-          },
+  protected generateCatchAllDynamicMiddlewareRoute(): Route | undefined {
+    if (this.minimalMode) return undefined
+
+    return {
+      match: route('/:path*'),
+      type: 'route',
+      name: 'dynamic middleware catchall',
+      fn: async (req, res, _params, parsed) => {
+        return await this.handleMiddlewareRoute({
+          isDynamic: true,
+          req,
+          res,
+          parsed,
         })
+      },
+    }
+  }
 
-        const normalizedPathname = removePathTrailingSlash(parsedUrl.pathname)
-        if (!this.middleware?.some((m) => m.match(normalizedPathname))) {
-          return { finished: false }
-        }
+  private async handleMiddlewareRoute({
+    isDynamic,
+    parsed,
+    req,
+    res,
+  }: {
+    isDynamic: boolean
+    parsed: NextUrlWithParsedQuery
+    req: BaseNextRequest
+    res: BaseNextResponse
+  }) {
+    if (
+      !this.allRoutes?.some(
+        (r) => r.isMiddleware && isDynamicRoute(r.page) === isDynamic
+      )
+    ) {
+      return { finished: false }
+    }
 
-        let result: FetchEventResult | null = null
+    const initUrl = getRequestMeta(req, '__NEXT_INIT_URL')!
+    const parsedUrl = parseNextUrl({
+      url: initUrl,
+      headers: req.headers,
+      nextConfig: {
+        basePath: this.nextConfig.basePath,
+        i18n: this.nextConfig.i18n,
+        trailingSlash: this.nextConfig.trailingSlash,
+      },
+    })
+    const normalizedPathname = removePathTrailingSlash(parsedUrl.pathname)
 
-        try {
-          result = await this.runMiddleware({
-            request: req,
-            response: res,
-            parsedUrl: parsedUrl,
-            parsed: parsed,
-          })
-        } catch (err) {
-          if (isError(err) && err.code === 'ENOENT') {
-            await this.render404(req, res, parsed)
-            return { finished: true }
-          }
+    const middleware: RoutingItem[] = []
+    for (const item of this.allRoutes || []) {
+      if (item.match(normalizedPathname)) {
+        if (!item.isMiddleware) break
+        if (isDynamicRoute(item.page) !== isDynamic) continue
 
-          const error = getProperError(err)
-          console.error(error)
-          res.statusCode = 500
-          this.renderError(error, req, res, parsed.pathname || '')
-          return { finished: true }
-        }
+        middleware.push(item)
+      }
+    }
 
-        if (result === null) {
-          return { finished: true }
-        }
+    if (!middleware.length) {
+      return { finished: false }
+    }
 
-        if (result.response.headers.has('x-middleware-rewrite')) {
-          const value = result.response.headers.get('x-middleware-rewrite')!
-          const rel = relativizeURL(value, initUrl)
-          result.response.headers.set('x-middleware-rewrite', rel)
-        }
+    let result: FetchEventResult | null = null
 
-        if (result.response.headers.has('Location')) {
-          const value = result.response.headers.get('Location')!
-          const rel = relativizeURL(value, initUrl)
-          result.response.headers.set('Location', rel)
-        }
+    try {
+      result = await this.runMiddleware({
+        request: req,
+        response: res,
+        parsedUrl: parsedUrl,
+        parsed: parsed,
+        middleware,
+      })
+    } catch (err) {
+      if (isError(err) && err.code === 'ENOENT') {
+        await this.render404(req, res, parsed)
+        return { finished: true }
+      }
 
-        if (
-          !result.response.headers.has('x-middleware-rewrite') &&
-          !result.response.headers.has('x-middleware-next') &&
-          !result.response.headers.has('Location')
-        ) {
-          result.response.headers.set('x-middleware-refresh', '1')
-        }
+      const error = getProperError(err)
+      console.error(error)
+      res.statusCode = 500
+      this.renderError(error, req, res, parsed.pathname || '')
+      return { finished: true }
+    }
 
-        result.response.headers.delete('x-middleware-next')
+    if (result === null) {
+      return { finished: true }
+    }
 
-        for (const [key, value] of Object.entries(
-          toNodeHeaders(result.response.headers)
-        )) {
-          if (key !== 'content-encoding' && value !== undefined) {
-            res.setHeader(key, value)
-          }
-        }
+    if (result.response.headers.has('x-middleware-rewrite')) {
+      const value = result.response.headers.get('x-middleware-rewrite')!
+      const rel = relativizeURL(value, initUrl)
+      result.response.headers.set('x-middleware-rewrite', rel)
+    }
 
-        const preflight =
-          req.method === 'HEAD' && req.headers['x-middleware-preflight']
+    if (result.response.headers.has('Location')) {
+      const value = result.response.headers.get('Location')!
+      const rel = relativizeURL(value, initUrl)
+      result.response.headers.set('Location', rel)
+    }
 
-        if (preflight) {
-          res.statusCode = 200
-          res.send()
-          return {
-            finished: true,
-          }
-        }
+    if (
+      !result.response.headers.has('x-middleware-rewrite') &&
+      !result.response.headers.has('x-middleware-next') &&
+      !result.response.headers.has('Location')
+    ) {
+      result.response.headers.set('x-middleware-refresh', '1')
+    }
 
-        res.statusCode = result.response.status
-        res.statusMessage = result.response.statusText
+    result.response.headers.delete('x-middleware-next')
 
-        const location = result.response.headers.get('Location')
-        if (location) {
-          res.statusCode = result.response.status
-          if (res.statusCode === 308) {
-            res.setHeader('Refresh', `0;url=${location}`)
-          }
+    for (const [key, value] of Object.entries(
+      toNodeHeaders(result.response.headers)
+    )) {
+      if (key !== 'content-encoding' && value !== undefined) {
+        res.setHeader(key, value)
+      }
+    }
 
-          res.body(location).send()
-          return {
-            finished: true,
-          }
-        }
+    const preflight =
+      req.method === 'HEAD' && req.headers['x-middleware-preflight']
 
-        if (result.response.headers.has('x-middleware-rewrite')) {
-          const rewritePath = result.response.headers.get(
-            'x-middleware-rewrite'
-          )!
-          const parsedDestination = parseUrl(rewritePath)
-          const newUrl = parsedDestination.pathname
+    if (preflight) {
+      res.statusCode = 200
+      res.send()
+      return {
+        finished: true,
+      }
+    }
 
-          // TODO: remove after next minor version current `v12.0.9`
-          this.warnIfQueryParametersWereDeleted(
-            parsedUrl.query,
-            parsedDestination.query
-          )
+    res.statusCode = result.response.status
+    res.statusMessage = result.response.statusText
 
-          if (
-            parsedDestination.protocol &&
-            (parsedDestination.port
-              ? `${parsedDestination.hostname}:${parsedDestination.port}`
-              : parsedDestination.hostname) !== req.headers.host
-          ) {
-            return this.proxyRequest(
-              req as NodeNextRequest,
-              res as NodeNextResponse,
-              parsedDestination
-            )
-          }
+    const location = result.response.headers.get('Location')
+    if (location) {
+      res.statusCode = result.response.status
+      if (res.statusCode === 308) {
+        res.setHeader('Refresh', `0;url=${location}`)
+      }
 
-          if (this.nextConfig.i18n) {
-            const localePathResult = normalizeLocalePath(
-              newUrl,
-              this.nextConfig.i18n.locales
-            )
-            if (localePathResult.detectedLocale) {
-              parsedDestination.query.__nextLocale =
-                localePathResult.detectedLocale
-            }
-          }
+      res.body(location).send()
+      return {
+        finished: true,
+      }
+    }
 
-          addRequestMeta(req, '_nextRewroteUrl', newUrl)
-          addRequestMeta(req, '_nextDidRewrite', newUrl !== req.url)
+    if (result.response.headers.has('x-middleware-rewrite')) {
+      const rewritePath = result.response.headers.get('x-middleware-rewrite')!
+      const parsedDestination = parseUrl(rewritePath)
+      const newUrl = parsedDestination.pathname
 
-          return {
-            finished: false,
-            pathname: newUrl,
-            query: parsedDestination.query,
-          }
-        }
+      // TODO: remove after next minor version current `v12.0.9`
+      this.warnIfQueryParametersWereDeleted(
+        parsedUrl.query,
+        parsedDestination.query
+      )
 
-        if (result.response.headers.has('x-middleware-refresh')) {
-          res.statusCode = result.response.status
-          for await (const chunk of result.response.body || ([] as any)) {
-            this.streamResponseChunk(res as NodeNextResponse, chunk)
-          }
-          res.send()
-          return {
-            finished: true,
-          }
-        }
+      if (
+        parsedDestination.protocol &&
+        (parsedDestination.port
+          ? `${parsedDestination.hostname}:${parsedDestination.port}`
+          : parsedDestination.hostname) !== req.headers.host
+      ) {
+        return this.proxyRequest(
+          req as NodeNextRequest,
+          res as NodeNextResponse,
+          parsedDestination
+        )
+      }
 
-        return {
-          finished: false,
+      if (this.nextConfig.i18n) {
+        const localePathResult = normalizeLocalePath(
+          newUrl,
+          this.nextConfig.i18n.locales
+        )
+        if (localePathResult.detectedLocale) {
+          parsedDestination.query.__nextLocale = localePathResult.detectedLocale
         }
-      },
+      }
+
+      addRequestMeta(req, '_nextRewroteUrl', newUrl)
+      addRequestMeta(req, '_nextDidRewrite', newUrl !== req.url)
+
+      return {
+        finished: false,
+        pathname: newUrl,
+        query: parsedDestination.query,
+      }
     }
-  }
 
-  protected getMiddleware() {
-    const middleware = this.middlewareManifest?.middleware || {}
-    return (
-      this.middlewareManifest?.sortedMiddleware.map((page) => ({
-        match: getRouteMatcher(
-          getMiddlewareRegex(page, MIDDLEWARE_ROUTE.test(middleware[page].name))
-        ),
-        page,
-      })) || []
-    )
+    if (result.response.headers.has('x-middleware-refresh')) {
+      res.statusCode = result.response.status
+      for await (const chunk of result.response.body || ([] as any)) {
+        this.streamResponseChunk(res as NodeNextResponse, chunk)
+      }
+      res.send()
+      return {
+        finished: true,
+      }
+    }
+
+    return {
+      finished: false,
+    }
   }
 
   private middlewareBetaWarning = execOnce(() => {
@@ -1221,6 +1259,7 @@ export default class NextNodeServer extends BaseServer {
     response: BaseNextResponse
     parsedUrl: ParsedNextUrl
     parsed: UrlWithParsedQuery
+    middleware: RoutingItem[]
     onWarning?: (warning: Error) => void
   }): Promise<FetchEventResult | null> {
     this.middlewareBetaWarning()
@@ -1236,11 +1275,15 @@ export default class NextNodeServer extends BaseServer {
       )
     }
 
-    const page: { name?: string; params?: { [key: string]: string } } = {}
+    const page: RequestData['page'] = {}
     if (await this.hasPage(normalizedPathname)) {
       page.name = params.parsedUrl.pathname
     } else if (this.dynamicRoutes) {
+      const isApi = isApiRoute(normalizedPathname)
       for (const dynamicRoute of this.dynamicRoutes) {
+        // The api route should not match with others
+        if (isApi && !isApiRoute(dynamicRoute.page)) continue
+
         const matchParams = dynamicRoute.match(normalizedPathname)
         if (matchParams) {
           page.name = dynamicRoute.page
@@ -1258,7 +1301,7 @@ export default class NextNodeServer extends BaseServer {
         ? clonableBodyForRequest(params.request.body)
         : undefined
 
-    for (const middleware of this.middleware || []) {
+    for (const middleware of params.middleware) {
       if (middleware.match(normalizedPathname)) {
         if (!(await this.hasMiddleware(middleware.page, middleware.ssr))) {
           console.warn(`The Edge Function for ${middleware.page} was not found`)
diff --git a/packages/next/server/router.ts b/packages/next/server/router.ts
index 075d307a14cd..32b79535082b 100644
--- a/packages/next/server/router.ts
+++ b/packages/next/server/router.ts
@@ -66,6 +66,7 @@ export default class Router {
   basePath: string
   headers: Route[]
   fsRoutes: Route[]
+  internalFsRoutes: Route[]
   redirects: Route[]
   rewrites: {
     beforeFiles: Route[]
@@ -73,7 +74,8 @@ export default class Router {
     fallback: Route[]
   }
   catchAllRoute: Route
-  catchAllMiddleware?: Route
+  catchAllStaticMiddleware?: Route
+  catchAllDynamicMiddleware?: Route
   pageChecker: PageChecker
   dynamicRoutes: DynamicRoutes
   useFileSystemPublicRoutes: boolean
@@ -84,6 +86,7 @@ export default class Router {
     basePath = '',
     headers = [],
     fsRoutes = [],
+    internalFsRoutes = [],
     rewrites = {
       beforeFiles: [],
       afterFiles: [],
@@ -91,7 +94,8 @@ export default class Router {
     },
     redirects = [],
     catchAllRoute,
-    catchAllMiddleware,
+    catchAllStaticMiddleware,
+    catchAllDynamicMiddleware,
     dynamicRoutes = [],
     pageChecker,
     useFileSystemPublicRoutes,
@@ -100,6 +104,7 @@ export default class Router {
     basePath: string
     headers: Route[]
     fsRoutes: Route[]
+    internalFsRoutes: Route[]
     rewrites: {
       beforeFiles: Route[]
       afterFiles: Route[]
@@ -107,7 +112,8 @@ export default class Router {
     }
     redirects: Route[]
     catchAllRoute: Route
-    catchAllMiddleware?: Route
+    catchAllStaticMiddleware?: Route
+    catchAllDynamicMiddleware?: Route
     dynamicRoutes: DynamicRoutes | undefined
     pageChecker: PageChecker
     useFileSystemPublicRoutes: boolean
@@ -116,11 +122,13 @@ export default class Router {
     this.basePath = basePath
     this.headers = headers
     this.fsRoutes = fsRoutes
+    this.internalFsRoutes = internalFsRoutes
     this.rewrites = rewrites
     this.redirects = redirects
     this.pageChecker = pageChecker
     this.catchAllRoute = catchAllRoute
-    this.catchAllMiddleware = catchAllMiddleware
+    this.catchAllStaticMiddleware = catchAllStaticMiddleware
+    this.catchAllDynamicMiddleware = catchAllDynamicMiddleware
     this.dynamicRoutes = dynamicRoutes
     this.useFileSystemPublicRoutes = useFileSystemPublicRoutes
     this.locales = locales
@@ -166,7 +174,7 @@ export default class Router {
       const originalFsPathname = checkParsedUrl.pathname
       const fsPathname = replaceBasePath(originalFsPathname!, this.basePath)
 
-      for (const fsRoute of this.fsRoutes) {
+      for (const fsRoute of [...this.internalFsRoutes, ...this.fsRoutes]) {
         const fsParams = fsRoute.match(fsPathname)
 
         if (fsParams) {
@@ -225,10 +233,14 @@ export default class Router {
       ...this.headers,
       ...this.redirects,
       ...this.rewrites.beforeFiles,
-      ...(this.useFileSystemPublicRoutes && this.catchAllMiddleware
-        ? [this.catchAllMiddleware]
+      ...this.internalFsRoutes,
+      ...(this.useFileSystemPublicRoutes && this.catchAllStaticMiddleware
+        ? [this.catchAllStaticMiddleware]
         : []),
       ...this.fsRoutes,
+      ...(this.useFileSystemPublicRoutes && this.catchAllDynamicMiddleware
+        ? [this.catchAllDynamicMiddleware]
+        : []),
       // We only check the catch-all route if public page routes hasn't been
       // disabled
       ...(this.useFileSystemPublicRoutes
@@ -299,9 +311,15 @@ export default class Router {
       const requireBasePath = testRoute.requireBasePath !== false
       const isCustomRoute = customRouteTypes.has(testRoute.type)
       const isPublicFolderCatchall = testRoute.name === 'public folder catchall'
-      const isMiddlewareCatchall = testRoute.name === 'middleware catchall'
+      const isStaticMiddlewareCatchall =
+        testRoute.name === 'static middleware catchall'
+      const isDynamicMiddlewareCatchall =
+        testRoute.name === 'dynamic middleware catchall'
       const keepBasePath =
-        isCustomRoute || isPublicFolderCatchall || isMiddlewareCatchall
+        isCustomRoute ||
+        isPublicFolderCatchall ||
+        isStaticMiddlewareCatchall ||
+        isDynamicMiddlewareCatchall
       const keepLocale = isCustomRoute
 
       const currentPathnameNoBasePath = replaceBasePath(
diff --git a/packages/next/server/web-server.ts b/packages/next/server/web-server.ts
index dab158fffb9d..0bfa8112b5f2 100644
--- a/packages/next/server/web-server.ts
+++ b/packages/next/server/web-server.ts
@@ -81,7 +81,10 @@ export default class NextWebServer extends BaseServer {
   protected getMiddleware() {
     return []
   }
-  protected generateCatchAllMiddlewareRoute() {
+  protected generateCatchAllStaticMiddlewareRoute() {
+    return undefined
+  }
+  protected generateCatchAllDynamicMiddlewareRoute() {
     return undefined
   }
   protected getFontManifest() {
diff --git a/packages/next/shared/lib/router/router.ts b/packages/next/shared/lib/router/router.ts
index 4abfb6c2e07c..164f9dfe2c65 100644
--- a/packages/next/shared/lib/router/router.ts
+++ b/packages/next/shared/lib/router/router.ts
@@ -36,8 +36,8 @@ import { searchParamsToUrlQuery } from './utils/querystring'
 import resolveRewrites from './utils/resolve-rewrites'
 import { getRouteMatcher } from './utils/route-matcher'
 import { getRouteRegex } from './utils/route-regex'
-import { getMiddlewareRegex } from './utils/get-middleware-regex'
 import { formatWithValidation } from './utils/format-url'
+import { getRoutingItems } from './utils/routing-items'
 
 declare global {
   interface Window {
@@ -1871,10 +1871,18 @@ export default class Router implements BaseRouter {
       options.locale
     )
 
-    const fns = await this.pageLoader.getMiddlewareList()
-    const requiresPreflight = fns.some(([middleware, isSSR]) => {
-      return getRouteMatcher(getMiddlewareRegex(middleware, !isSSR))(cleanedAs)
-    })
+    const middlewareList = await this.pageLoader.getMiddlewareList()
+    const middleware = middlewareList.map(([page, ssr]) => ({ page, ssr }))
+    const routingItems = getRoutingItems(options.pages, middleware)
+    let requiresPreflight = false
+    for (const item of routingItems) {
+      if (item.match(cleanedAs)) {
+        if (item.isMiddleware) {
+          requiresPreflight = true
+        }
+        break
+      }
+    }
 
     if (!requiresPreflight) {
       return { type: 'next' }
diff --git a/packages/next/shared/lib/router/utils/get-middleware-regex.ts b/packages/next/shared/lib/router/utils/get-middleware-regex.ts
index 446a05993683..0b036e1a1243 100644
--- a/packages/next/shared/lib/router/utils/get-middleware-regex.ts
+++ b/packages/next/shared/lib/router/utils/get-middleware-regex.ts
@@ -1,12 +1,20 @@
 import { getParametrizedRoute, RouteRegex } from './route-regex'
 
+// Identify ^/[param]/ in route string
+const FIRST_SEGMENT_DYNAMIC = /^\/\[[^/]+?\](?=\/|$)/
+
+const NOT_API_ROUTE = '(?!/api(?:/|$))'
+
 export function getMiddlewareRegex(
   normalizedRoute: string,
   catchAll: boolean = true
 ): RouteRegex {
   const result = getParametrizedRoute(normalizedRoute)
+  const notApiRegex = FIRST_SEGMENT_DYNAMIC.test(normalizedRoute)
+    ? NOT_API_ROUTE
+    : ''
 
-  let catchAllRegex = catchAll ? '(?!_next).*' : ''
+  let catchAllRegex = catchAll ? '(?!_next($|/)).*' : ''
   let catchAllGroupedRegex = catchAll ? '(?:(/.*)?)' : ''
 
   if ('routeKeys' in result) {
@@ -21,8 +29,10 @@ export function getMiddlewareRegex(
 
     return {
       groups: result.groups,
-      namedRegex: `^${result.namedParameterizedRoute}${catchAllGroupedRegex}$`,
-      re: new RegExp(`^${result.parameterizedRoute}${catchAllGroupedRegex}$`),
+      namedRegex: `^${notApiRegex}${result.namedParameterizedRoute}${catchAllGroupedRegex}$`,
+      re: new RegExp(
+        `^${notApiRegex}${result.parameterizedRoute}${catchAllGroupedRegex}$`
+      ),
       routeKeys: result.routeKeys,
     }
   }
@@ -36,6 +46,8 @@ export function getMiddlewareRegex(
 
   return {
     groups: {},
-    re: new RegExp(`^${result.parameterizedRoute}${catchAllGroupedRegex}$`),
+    re: new RegExp(
+      `^${notApiRegex}${result.parameterizedRoute}${catchAllGroupedRegex}$`
+    ),
   }
 }
diff --git a/packages/next/shared/lib/router/utils/index.ts b/packages/next/shared/lib/router/utils/index.ts
index aa4bce09122f..1b756ad8632e 100644
--- a/packages/next/shared/lib/router/utils/index.ts
+++ b/packages/next/shared/lib/router/utils/index.ts
@@ -1,5 +1,6 @@
 export { getMiddlewareRegex } from './get-middleware-regex'
 export { getRouteMatcher } from './route-matcher'
 export { getRouteRegex } from './route-regex'
+export { getRoutingItems, RoutingItem } from './routing-items'
 export { getSortedRoutes } from './sorted-routes'
 export { isDynamicRoute } from './is-dynamic'
diff --git a/packages/next/shared/lib/router/utils/routing-items.ts b/packages/next/shared/lib/router/utils/routing-items.ts
new file mode 100644
index 000000000000..6f7b0a83a7e0
--- /dev/null
+++ b/packages/next/shared/lib/router/utils/routing-items.ts
@@ -0,0 +1,42 @@
+import { getMiddlewareRegex } from './get-middleware-regex'
+import { getRouteMatcher } from './route-matcher'
+import { getRouteRegex } from './route-regex'
+import { getSortedRoutes } from './sorted-routes'
+
+const MIDDLEWARE_SUFFIX = '/_middleware'
+
+export interface RoutingItem {
+  page: string
+  match: ReturnType<typeof getRouteMatcher>
+  ssr?: boolean
+  isMiddleware?: boolean
+}
+
+export function getRoutingItems(
+  pages: string[],
+  middleware: { page: string; ssr: boolean }[]
+): RoutingItem[] {
+  // append the suffix so that `getSortedRoutes()` can handle middleware properly
+  const middlewarePages = middleware.map((m) => `${m.page}${MIDDLEWARE_SUFFIX}`)
+
+  const middlewareMap = new Map(middleware.map((m) => [m.page, m]))
+  const sortedRoutes = getSortedRoutes([...pages, ...middlewarePages])
+
+  return sortedRoutes.map((page) => {
+    if (page.endsWith(MIDDLEWARE_SUFFIX)) {
+      const p = page.slice(0, -MIDDLEWARE_SUFFIX.length) || '/'
+      const { ssr } = middlewareMap.get(p)!
+      return {
+        match: getRouteMatcher(getMiddlewareRegex(p, !ssr)),
+        page: p,
+        ssr,
+        isMiddleware: true,
+      }
+    } else {
+      return {
+        match: getRouteMatcher(getRouteRegex(page)),
+        page,
+      }
+    }
+  })
+}
diff --git a/packages/next/shared/lib/router/utils/sorted-routes.ts b/packages/next/shared/lib/router/utils/sorted-routes.ts
index d3f0699bd1cf..455af0a17e54 100644
--- a/packages/next/shared/lib/router/utils/sorted-routes.ts
+++ b/packages/next/shared/lib/router/utils/sorted-routes.ts
@@ -4,6 +4,7 @@ class UrlNode {
   slugName: string | null = null
   restSlugName: string | null = null
   optionalRestSlugName: string | null = null
+  isMiddleware: boolean = false
 
   insert(urlPath: string): void {
     this._insert(urlPath.split('/').filter(Boolean), [], false)
@@ -24,6 +25,9 @@ class UrlNode {
     if (this.optionalRestSlugName !== null) {
       childrenPaths.splice(childrenPaths.indexOf('[[...]]'), 1)
     }
+    if (this.isMiddleware) {
+      childrenPaths.splice(childrenPaths.indexOf('_middleware'), 1)
+    }
 
     const routes = childrenPaths
       .map((c) => this.children.get(c)!._smoosh(`${prefix}${c}/`))
@@ -46,6 +50,12 @@ class UrlNode {
       routes.unshift(r)
     }
 
+    if (this.isMiddleware) {
+      routes.unshift(
+        ...this.children.get('_middleware')!._smoosh(`${prefix}_middleware/`)
+      )
+    }
+
     if (this.restSlugName !== null) {
       routes.push(
         ...this.children
@@ -182,6 +192,8 @@ class UrlNode {
         // nextSegment is overwritten to [] so that it can later be sorted specifically
         nextSegment = '[]'
       }
+    } else if (nextSegment === '_middleware' && urlPaths.length === 1) {
+      this.isMiddleware = true
     }
 
     // If this UrlNode doesn't have the nextSegment yet we create a new child UrlNode
diff --git a/test/integration/custom-routes/test/index.test.js b/test/integration/custom-routes/test/index.test.js
index d8face2632f4..691fee293c34 100644
--- a/test/integration/custom-routes/test/index.test.js
+++ b/test/integration/custom-routes/test/index.test.js
@@ -1201,7 +1201,7 @@ const runTests = (isDev = false) => {
       }
 
       expect(manifest).toEqual({
-        version: 3,
+        version: 4,
         pages404: true,
         basePath: '',
         dataRoutes: [
diff --git a/test/integration/dynamic-routing/pages/middleware/[slug]/_middleware.js b/test/integration/dynamic-routing/pages/middleware/[slug]/_middleware.js
new file mode 100644
index 000000000000..a2089b0349d3
--- /dev/null
+++ b/test/integration/dynamic-routing/pages/middleware/[slug]/_middleware.js
@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server'
+
+export function middleware() {
+  return NextResponse.next()
+}
diff --git a/test/integration/dynamic-routing/test/index.test.js b/test/integration/dynamic-routing/test/index.test.js
index cc97e9a6b6b9..5301d08fb0b4 100644
--- a/test/integration/dynamic-routing/test/index.test.js
+++ b/test/integration/dynamic-routing/test/index.test.js
@@ -1100,6 +1100,8 @@ function runTests({ dev, serverless }) {
       )
 
       for (const route of manifest.dynamicRoutes) {
+        if (route.isMiddleware) continue
+
         route.regex = normalizeRegEx(route.regex)
 
         // ensure regexes are valid
@@ -1116,7 +1118,7 @@ function runTests({ dev, serverless }) {
       }
 
       expect(manifest).toEqual({
-        version: 3,
+        version: 4,
         pages404: true,
         basePath: '',
         headers: [],
@@ -1264,6 +1266,10 @@ function runTests({ dev, serverless }) {
               slug: 'slug',
             },
           },
+          {
+            isMiddleware: true,
+            page: '/middleware/[slug]',
+          },
           {
             namedRegex: `^/on\\-mount/(?<post>[^/]+?)(?:/)?$`,
             page: '/on-mount/[post]',
diff --git a/test/integration/middleware/dynamic-route/next.config.js b/test/integration/middleware/dynamic-route/next.config.js
new file mode 100644
index 000000000000..f548199a3b10
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'nl'],
+    defaultLocale: 'en',
+  },
+}
diff --git a/test/integration/middleware/dynamic-route/pages/[slug]/[id]/_middleware.js b/test/integration/middleware/dynamic-route/pages/[slug]/[id]/_middleware.js
new file mode 100644
index 000000000000..cd610ba50e32
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/[slug]/[id]/_middleware.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+
+export function middleware() {
+  const response = NextResponse.next()
+  response.headers.set('x-slug-id-path', 'true')
+  return response
+}
diff --git a/test/integration/middleware/dynamic-route/pages/[slug]/[id]/index.js b/test/integration/middleware/dynamic-route/pages/[slug]/[id]/index.js
new file mode 100644
index 000000000000..11f4614a671e
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/[slug]/[id]/index.js
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <p className="title">Dynamic route</p>
+}
diff --git a/test/integration/middleware/dynamic-route/pages/[slug]/_middleware.js b/test/integration/middleware/dynamic-route/pages/[slug]/_middleware.js
new file mode 100644
index 000000000000..50eb8248d9a7
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/[slug]/_middleware.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+
+export function middleware(req) {
+  const response = NextResponse.next()
+  response.headers.set('x-slug-path', 'true')
+  return response
+}
diff --git a/test/integration/middleware/dynamic-route/pages/[slug]/index.js b/test/integration/middleware/dynamic-route/pages/[slug]/index.js
new file mode 100644
index 000000000000..11f4614a671e
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/[slug]/index.js
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <p className="title">Dynamic route</p>
+}
diff --git a/test/integration/middleware/dynamic-route/pages/[slug]/static.js b/test/integration/middleware/dynamic-route/pages/[slug]/static.js
new file mode 100644
index 000000000000..df20ac0cca54
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/[slug]/static.js
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <p className="title">Nested Static route</p>
+}
diff --git a/test/integration/middleware/dynamic-route/pages/_middleware.js b/test/integration/middleware/dynamic-route/pages/_middleware.js
new file mode 100644
index 000000000000..eb0704248449
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/_middleware.js
@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server'
+
+export async function middleware(request) {
+  const response = NextResponse.next()
+  response.headers.set('req-url-basepath', request.nextUrl.basePath)
+  response.headers.set('req-url-pathname', request.nextUrl.pathname)
+  response.headers.set(
+    'req-url-query',
+    JSON.stringify(Object.fromEntries(request.nextUrl.searchParams.entries()))
+  )
+  response.headers.set('req-url-locale', request.nextUrl.locale)
+  if (request.page.name) {
+    response.headers.set('req-url-page', request.page.name)
+  }
+  if (request.page.params) {
+    response.headers.set('req-url-params', JSON.stringify(request.page.params))
+  }
+  return response
+}
diff --git a/test/integration/middleware/dynamic-route/pages/api/_middleware.js b/test/integration/middleware/dynamic-route/pages/api/_middleware.js
new file mode 100644
index 000000000000..19907fd0686a
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/api/_middleware.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+
+export function middleware() {
+  const response = NextResponse.next()
+  response.headers.set('x-api-path', 'true')
+  return response
+}
diff --git a/test/integration/middleware/dynamic-route/pages/api/index.js b/test/integration/middleware/dynamic-route/pages/api/index.js
new file mode 100644
index 000000000000..b2590beac322
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/api/index.js
@@ -0,0 +1,3 @@
+export default function handler(req, res) {
+  res.status(200).json({ route: '/api' })
+}
diff --git a/test/integration/middleware/dynamic-route/pages/catch-all/[...rest].js b/test/integration/middleware/dynamic-route/pages/catch-all/[...rest].js
new file mode 100644
index 000000000000..8cce0282416b
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/catch-all/[...rest].js
@@ -0,0 +1,3 @@
+export default function CatchAll() {
+  return <p className="title">Catch All route</p>
+}
diff --git a/test/integration/middleware/dynamic-route/pages/catch-all/_middleware.js b/test/integration/middleware/dynamic-route/pages/catch-all/_middleware.js
new file mode 100644
index 000000000000..7704289da422
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/catch-all/_middleware.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+
+export function middleware() {
+  const response = NextResponse.next()
+  response.headers.set('x-catch-all-path', 'true')
+  return response
+}
diff --git a/test/integration/middleware/dynamic-route/pages/dir/_middleware.js b/test/integration/middleware/dynamic-route/pages/dir/_middleware.js
new file mode 100644
index 000000000000..87297804b9eb
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/dir/_middleware.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+
+export function middleware() {
+  const response = NextResponse.next()
+  response.headers.set('x-dir-path', 'true')
+  return response
+}
diff --git a/test/integration/middleware/dynamic-route/pages/dir/index.js b/test/integration/middleware/dynamic-route/pages/dir/index.js
new file mode 100644
index 000000000000..d87a6d6e3541
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/dir/index.js
@@ -0,0 +1,3 @@
+export default function Dir() {
+  return <p className="title">Dir route</p>
+}
diff --git a/test/integration/middleware/dynamic-route/pages/index.js b/test/integration/middleware/dynamic-route/pages/index.js
new file mode 100644
index 000000000000..298195ba7bf5
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/index.js
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <p className="title">Home Page</p>
+}
diff --git a/test/integration/middleware/dynamic-route/pages/optional-catch-all/[[...rest]].js b/test/integration/middleware/dynamic-route/pages/optional-catch-all/[[...rest]].js
new file mode 100644
index 000000000000..efc395b5ff89
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/optional-catch-all/[[...rest]].js
@@ -0,0 +1,3 @@
+export default function OptionalCatchAll() {
+  return <p className="title">Optional Catch All route</p>
+}
diff --git a/test/integration/middleware/dynamic-route/pages/optional-catch-all/_middleware.js b/test/integration/middleware/dynamic-route/pages/optional-catch-all/_middleware.js
new file mode 100644
index 000000000000..cc1dd66fbaee
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/optional-catch-all/_middleware.js
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+
+export function middleware() {
+  const response = NextResponse.next()
+  response.headers.set('x-optional-catch-all-path', 'true')
+  return response
+}
diff --git a/test/integration/middleware/dynamic-route/pages/static.js b/test/integration/middleware/dynamic-route/pages/static.js
new file mode 100644
index 000000000000..d683fec42acc
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/pages/static.js
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <p className="title">Static route</p>
+}
diff --git a/test/integration/middleware/dynamic-route/public/robots.txt b/test/integration/middleware/dynamic-route/public/robots.txt
new file mode 100644
index 000000000000..f5520669bf88
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/public/robots.txt
@@ -0,0 +1,7 @@
+User-agent: Googlebot
+Disallow: /nogooglebot/
+
+User-agent: *
+Allow: /
+
+Sitemap: http://www.example.com/sitemap.xml
diff --git a/test/integration/middleware/dynamic-route/test/index.test.js b/test/integration/middleware/dynamic-route/test/index.test.js
new file mode 100644
index 000000000000..02b20b3f0db2
--- /dev/null
+++ b/test/integration/middleware/dynamic-route/test/index.test.js
@@ -0,0 +1,307 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+  fetchViaHTTP,
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+const context = {}
+context.appDir = join(__dirname, '../')
+
+describe('Middleware dynamic tests', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      context.appPort = await findPort()
+      context.app = await launchApp(context.appDir, context.appPort)
+    })
+    afterAll(() => killApp(context.app))
+    runTests()
+    runTests('/fr')
+  })
+  describe('production mode', () => {
+    beforeAll(async () => {
+      await nextBuild(context.appDir)
+
+      context.appPort = await findPort()
+      context.app = await nextStart(context.appDir, context.appPort)
+    })
+    afterAll(() => killApp(context.app))
+    runTests()
+    runTests('/fr')
+  })
+})
+
+function runTests(localePath = '') {
+  const locale = localePath.slice(1)
+
+  function fetch(path) {
+    return fetchViaHTTP(context.appPort, `${localePath}${path}`)
+  }
+
+  it(`${localePath} should validate request url parameters from the root route`, async () => {
+    const res = await fetch('/')
+    expect(res.headers.get('req-url-pathname')).toBe('/')
+    expect(res.headers.get('req-url-params')).toBeNull()
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-slug-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a static route`, async () => {
+    const res = await fetch('/static')
+    expect(res.headers.get('req-url-pathname')).toBe('/static')
+    expect(res.headers.get('req-url-params')).toBeNull()
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-slug-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a dir route`, async () => {
+    const res = await fetch('/dir')
+    expect(res.headers.get('req-url-pathname')).toBe('/dir')
+    expect(res.headers.get('req-url-params')).toBeNull()
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-dir-path')).toBe('true')
+    expect(res.headers.get('x-slug-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a dynamic route`, async () => {
+    const res = await fetch('/asdf')
+    expect(res.headers.get('req-url-pathname')).toBe('/asdf')
+    expect(res.headers.get('req-url-params')).toBe('{"slug":"asdf"}')
+    expect(res.headers.get('req-url-page')).toBe('/[slug]')
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a dynamic route with query`, async () => {
+    const res = await fetch('/asdf?foo=bar')
+    expect(res.headers.get('req-url-pathname')).toBe('/asdf')
+    expect(res.headers.get('req-url-params')).toBe('{"slug":"asdf"}')
+    expect(res.headers.get('req-url-page')).toBe('/[slug]')
+    expect(res.headers.get('req-url-query')).toBe('{"foo":"bar"}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a route on dynamic dir`, async () => {
+    const res = await fetch('/asdf/static')
+    expect(res.headers.get('req-url-pathname')).toBe('/asdf/static')
+    expect(res.headers.get('req-url-params')).toBe('{"slug":"asdf"}')
+    expect(res.headers.get('req-url-page')).toBe('/[slug]/static')
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a route on dynamic dir with static name`, async () => {
+    const res = await fetch('/static/static')
+    expect(res.headers.get('req-url-pathname')).toBe('/static/static')
+    expect(res.headers.get('req-url-params')).toBe('{"slug":"static"}')
+    expect(res.headers.get('req-url-page')).toBe('/[slug]/static')
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a route on dynamic dir with static dir name`, async () => {
+    const res = await fetch('/dir/static')
+    expect(res.headers.get('req-url-pathname')).toBe('/dir/static')
+    expect(res.headers.get('req-url-params')).toBe('{"slug":"dir"}')
+    expect(res.headers.get('req-url-page')).toBe('/[slug]/static')
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBe('true')
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBeNull()
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a nested dynamic route`, async () => {
+    const res = await fetch('/foo/bar')
+    expect(res.headers.get('req-url-pathname')).toBe('/foo/bar')
+    expect(res.headers.get('req-url-params')).toBe('{"slug":"foo","id":"bar"}')
+    expect(res.headers.get('req-url-page')).toBe('/[slug]/[id]')
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBe('true')
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a nested dynamic route with static dir name`, async () => {
+    const res = await fetch('/dir/asdf')
+    expect(res.headers.get('req-url-pathname')).toBe('/dir/asdf')
+    expect(res.headers.get('req-url-params')).toBe('{"slug":"dir","id":"asdf"}')
+    expect(res.headers.get('req-url-page')).toBe('/[slug]/[id]')
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBe('true')
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBe('true')
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a nested non-existing route`, async () => {
+    const res = await fetch('/foo/bar/not-exist')
+    expect(res.headers.get('req-url-pathname')).toBe('/foo/bar/not-exist')
+    expect(res.headers.get('req-url-params')).toBeNull()
+    expect(res.headers.get('req-url-page')).toBeNull()
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBe('true')
+    expect(res.headers.get('x-slug-id-path')).toBe('true')
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from a catch all route`, async () => {
+    const res = await fetch('/catch-all/foo/bar')
+    expect(res.headers.get('req-url-pathname')).toBe('/catch-all/foo/bar')
+    expect(res.headers.get('req-url-params')).toBe('{"rest":["foo","bar"]}')
+    expect(res.headers.get('req-url-page')).toBe('/catch-all/[...rest]')
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBeNull()
+    expect(res.headers.get('x-slug-id-path')).toBeNull()
+    expect(res.headers.get('x-catch-all-path')).toBe('true')
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  it(`${localePath} should validate request url parameters from an optional catch all route`, async () => {
+    const res = await fetch('/optional-catch-all/foo/bar')
+    expect(res.headers.get('req-url-pathname')).toBe(
+      '/optional-catch-all/foo/bar'
+    )
+    expect(res.headers.get('req-url-params')).toBe('{"rest":["foo","bar"]}')
+    expect(res.headers.get('req-url-page')).toBe(
+      '/optional-catch-all/[[...rest]]'
+    )
+    expect(res.headers.get('req-url-query')).toBe('{}')
+    expect(res.headers.get('x-api-path')).toBeNull()
+    expect(res.headers.get('x-dir-path')).toBeNull()
+    expect(res.headers.get('x-slug-path')).toBeNull()
+    expect(res.headers.get('x-slug-id-path')).toBeNull()
+    expect(res.headers.get('x-optional-catch-all-path')).toBe('true')
+    if (locale !== '') {
+      expect(res.headers.get('req-url-locale')).toBe(locale)
+    }
+  })
+
+  if (!localePath) {
+    it('should validate request url parameters from a _next route', async () => {
+      const res = await fetch('/_next/static/some-file.js')
+      expect(res.headers.get('req-url-pathname')).toBeNull()
+      expect(res.headers.get('req-url-params')).toBeNull()
+      expect(res.headers.get('req-url-page')).toBeNull()
+      expect(res.headers.get('req-url-query')).toBeNull()
+      expect(res.headers.get('x-api-path')).toBeNull()
+      expect(res.headers.get('x-dir-path')).toBeNull()
+      expect(res.headers.get('x-slug-path')).toBeNull()
+      expect(res.headers.get('x-slug-id-path')).toBeNull()
+    })
+
+    it('should validate request url parameters from a api route', async () => {
+      const res = await fetch('/api')
+      expect(res.headers.get('req-url-pathname')).toBe('/api')
+      expect(res.headers.get('req-url-params')).toBeNull()
+      expect(res.headers.get('req-url-query')).toBe('{}')
+      expect(res.headers.get('x-api-path')).toBe('true')
+      expect(res.headers.get('x-dir-path')).toBeNull()
+      expect(res.headers.get('x-slug-path')).toBeNull()
+    })
+
+    it('should validate request url parameters from a api route with query', async () => {
+      const res = await fetch('/api?foo=bar')
+      expect(res.headers.get('req-url-pathname')).toBe('/api')
+      expect(res.headers.get('req-url-params')).toBeNull()
+      expect(res.headers.get('req-url-query')).toBe('{"foo":"bar"}')
+      expect(res.headers.get('x-api-path')).toBe('true')
+      expect(res.headers.get('x-dir-path')).toBeNull()
+      expect(res.headers.get('x-slug-path')).toBeNull()
+    })
+
+    it('should validate request url parameters from a non-existing api route', async () => {
+      const res = await fetch('/api/not-exist')
+      expect(res.headers.get('req-url-pathname')).toBe('/api/not-exist')
+      expect(res.headers.get('req-url-params')).toBeNull()
+      expect(res.headers.get('req-url-query')).toBe('{}')
+      expect(res.headers.get('x-api-path')).toBe('true')
+      expect(res.headers.get('x-dir-path')).toBeNull()
+      expect(res.headers.get('x-slug-path')).toBeNull()
+      expect(res.headers.get('x-slug-id-path')).toBeNull()
+    })
+
+    it('should validate request url parameters from a non-existing api route with query', async () => {
+      const res = await fetch('/api/not-exist?foo=bar')
+      expect(res.headers.get('req-url-pathname')).toBe('/api/not-exist')
+      expect(res.headers.get('req-url-params')).toBeNull()
+      expect(res.headers.get('req-url-query')).toBe('{"foo":"bar"}')
+      expect(res.headers.get('x-api-path')).toBe('true')
+      expect(res.headers.get('x-dir-path')).toBeNull()
+      expect(res.headers.get('x-slug-path')).toBeNull()
+      expect(res.headers.get('x-slug-id-path')).toBeNull()
+    })
+
+    it('should validate request url parameters from a public route', async () => {
+      const res = await fetch('/robots.txt')
+      expect(res.headers.get('req-url-pathname')).toBe('/robots.txt')
+
+      // This does not work as expected now
+      // see: https://github.com/vercel/next.js/issues/31721
+      // expect(res.headers.get('req-url-params')).toBeNull()
+
+      expect(res.headers.get('req-url-query')).toBe('{}')
+      expect(res.headers.get('x-api-path')).toBeNull()
+      expect(res.headers.get('x-dir-path')).toBeNull()
+      expect(res.headers.get('x-slug-path')).toBeNull()
+      expect(res.headers.get('x-slug-id-path')).toBeNull()
+    })
+  }
+}
diff --git a/test/unit/page-route-sorter.test.ts b/test/unit/page-route-sorter.test.ts
index a97375a09a8e..eb15c23f1a96 100644
--- a/test/unit/page-route-sorter.test.ts
+++ b/test/unit/page-route-sorter.test.ts
@@ -66,6 +66,88 @@ describe('getSortedRoutes', () => {
     `)
   })
 
+  it('correctly sorts with middleware', () => {
+    expect(
+      getSortedRoutes([
+        '/posts',
+        '/[root-slug]',
+        '/[root-slug]/_middleware',
+        '/',
+        '/_middleware',
+        '/posts/[id]',
+        '/blog/[id]/comments/[cid]',
+        '/blog/abc/[id]',
+        '/blog/_middleware',
+        '/[...rest]',
+        '/blog/abc/post',
+        '/blog/abc',
+        '/blog/abc/_middleware',
+        '/blog/[id]/_middleware',
+        '/p1/[[...incl]]',
+        '/p1/_middleware',
+        '/p/[...rest]',
+        '/p/_middleware',
+        '/p2/[...rest]',
+        '/p2/[id]',
+        '/p2/[id]/abc',
+        '/p2/_middleware',
+        '/p2/[id]/_middleware',
+        '/p3/[[...rest]]',
+        '/p3/[id]',
+        '/p3/[id]/abc',
+        '/p3/_middleware',
+        '/p3/[id]/_middleware',
+        '/p4/_middleware/abc',
+        '/p4',
+        '/p4/not_middleware',
+        '/blog/[id]',
+        '/foo/[d]/bar/baz/[f]',
+        '/apples/_middleware',
+        '/apples/[ab]/[cd]/ef',
+        '/apples/[ab]/_middleware',
+      ])
+    ).toMatchInlineSnapshot(`
+      Array [
+        "/_middleware",
+        "/",
+        "/apples/_middleware",
+        "/apples/[ab]/_middleware",
+        "/apples/[ab]/[cd]/ef",
+        "/blog/_middleware",
+        "/blog/abc/_middleware",
+        "/blog/abc",
+        "/blog/abc/post",
+        "/blog/abc/[id]",
+        "/blog/[id]/_middleware",
+        "/blog/[id]",
+        "/blog/[id]/comments/[cid]",
+        "/foo/[d]/bar/baz/[f]",
+        "/p/_middleware",
+        "/p/[...rest]",
+        "/p1/_middleware",
+        "/p1/[[...incl]]",
+        "/p2/_middleware",
+        "/p2/[id]/_middleware",
+        "/p2/[id]",
+        "/p2/[id]/abc",
+        "/p2/[...rest]",
+        "/p3/_middleware",
+        "/p3/[id]/_middleware",
+        "/p3/[id]",
+        "/p3/[id]/abc",
+        "/p3/[[...rest]]",
+        "/p4",
+        "/p4/_middleware/abc",
+        "/p4/not_middleware",
+        "/posts",
+        "/posts/[id]",
+        "/[root-slug]/_middleware",
+        "/[root-slug]",
+        "/[...rest]",
+      ]
+    `)
+  })
+
   it('catches mismatched param names', () => {
     expect(() =>
       getSortedRoutes([