Merge branch 'canary' into shu/66b9

bench/nested-deps/fuzzponent.js

@@ -137,37 +137,37 @@ if (require.main === module) {
     .option('minLen', {
       demandOption: false,
       default: MIN_COMPONENT_NAME_LEN,
-      describe: 'the smallest acceptible component name length',
+      describe: 'the smallest acceptable component name length',
       type: 'number',
     })
     .option('maxLen', {
       demandOption: false,
       default: MAX_COMPONENT_NAME_LEN,
-      describe: 'the largest acceptible component name length',
+      describe: 'the largest acceptable component name length',
       type: 'number',
     })
     .option('minLen', {
       demandOption: false,
       default: MIN_COMPONENT_NAME_LEN,
-      describe: 'the smallest acceptible component name length',
+      describe: 'the smallest acceptable component name length',
       type: 'number',
     })
     .option('maxLen', {
       demandOption: false,
       default: MAX_COMPONENT_NAME_LEN,
-      describe: 'the largest acceptible component name length',
+      describe: 'the largest acceptable component name length',
       type: 'number',
     })
     .option('minChild', {
       demandOption: false,
       default: MIN_CHILDREN,
-      describe: 'the smallest number of acceptible component children',
+      describe: 'the smallest number of acceptable component children',
       type: 'number',
     })
     .option('maxChild', {
       demandOption: false,
       default: MAX_CHILDREN,
-      describe: 'the largest number of acceptible component children',
+      describe: 'the largest number of acceptable component children',
       type: 'number',
     })
     .option('extension', {

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

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 [
       {

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

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
 

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') {

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.

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.1.1"
+  "version": "12.1.3-canary.1"
 }

package.json

@@ -146,9 +146,9 @@
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
     "react": "17.0.2",
-    "react-18": "npm:[email protected]-rc.2",
+    "react-18": "npm:[email protected]",
     "react-dom": "17.0.2",
-    "react-dom-18": "npm:[email protected]-rc.2",
+    "react-dom-18": "npm:[email protected]",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",

packages/create-next-app/package.json

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

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 = {

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.1.1",
+  "version": "12.1.3-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.1",
+    "@next/eslint-plugin-next": "12.1.3-canary.1",
     "@rushstack/eslint-patch": "1.0.8",
     "@typescript-eslint/parser": "5.10.1",
     "eslint-import-resolver-node": "0.3.4",

packages/eslint-plugin-next/lib/utils/node-attributes.js

@@ -9,7 +9,7 @@
             hasValue: false
         }
 Inclusion of hasValue is in case an eslint rule cares about boolean values
-explicitely assigned to attribute vs the attribute being used as a flag
+explicitly assigned to attribute vs the attribute being used as a flag
 */
 class NodeAttributes {
   constructor(ASTnode) {

packages/eslint-plugin-next/package.json

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

packages/next-bundle-analyzer/package.json

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

packages/next-codemod/package.json

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

packages/next-env/package.json

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

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

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

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.1.1",
+  "version": "12.1.3-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",

packages/next-polyfill-nomodule/package.json

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

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "12.1.1",
+  "version": "12.1.3-canary.1",
   "private": true,
   "scripts": {
     "build-native": "napi build --platform --cargo-name next_swc_napi native",

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) {

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)
+}

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]