Merge branch 'canary' into shu/a4bc

.github/workflows/trigger_release.yml

@@ -2,13 +2,20 @@ on:
   workflow_dispatch:
     inputs:
       releaseType:
-        description: stable or canary (case sensitive)?
+        description: stable or canary?
         required: true
-        type: string
+        type: choice
+        options:
+          - canary
+          - stable
 
       semverType:
-        description: patch, minor, or major (case sensitive)?
-        type: string
+        description: semver type?
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
 
     secrets:
       RELEASE_BOT_TOKEN:

bench/rendering/pages/stateless-big.js

@@ -5,7 +5,7 @@ export default () => {
 }
 
 const items = () => {
-  var out = new Array(10000)
+  const out = new Array(10000)
   for (let i = 0; i < out.length; i++) {
     out[i] = <li key={i}>This is row {i + 1}</li>
   }

errors/react-hydration-error.md

@@ -82,10 +82,18 @@ Common causes with css-in-js libraries:
 - When using other css-in-js libraries
   - Similar to Styled Components / Emotion css-in-js libraries generally need configuration specified in their examples in the [examples directory](https://github.com/vercel/next.js/tree/canary/examples)
 
-Local Overrides
+Local Overrides:
 
 It's possible you may have [Local Overrides enabled in Chrome devtools](https://developer.chrome.com/blog/new-in-devtools-65/#overrides). With this enabled, the HTML served will be different from what the SSR emitted. It also won't show up in view-source, so you may be left wondering what is going on.
 
+Common causes on iOS:
+
+- iOS attempts to detect phone numbers, email addressees and other data in text content and convert them into links, which can [lead to hydration mismatches](https://github.com/vercel/next.js/issues/38290). This can be disabled with the following `meta` tag:
+
+```
+<meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
+```
+
 ### Useful Links
 
 - [React Hydration Documentation](https://react.dev/reference/react-dom/client/hydrateRoot)

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "13.4.2-canary.0"
+  "version": "13.4.2-canary.3"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "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": "13.4.2-canary.0",
+    "@next/eslint-plugin-next": "13.4.2-canary.3",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.42.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "description": "ESLint plugin for NextJS.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

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

packages/next-plugin-storybook/package.json

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

packages/next-swc/crates/core/src/react_server_components.rs

@@ -572,6 +572,8 @@ pub fn server_components<C: Comments>(
             JsWord::from("findDOMNode"),
             JsWord::from("flushSync"),
             JsWord::from("unstable_batchedUpdates"),
+            JsWord::from("experimental_useFormStatus"),
+            JsWord::from("experimental_useOptimistic"),
         ],
         invalid_server_react_apis: vec![
             JsWord::from("Component"),

packages/next-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/input.js

@@ -1,5 +1,10 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
 
+import {
+  experimental_useOptimistic as useOptimistic,
+  experimental_useFormStatus,
+} from 'react-dom'
+
 export default function () {
   return null
 }

packages/next-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.js

@@ -1,4 +1,5 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
+import { experimental_useOptimistic as useOptimistic, experimental_useFormStatus } from 'react-dom';
 export default function() {
     return null;
 }

packages/next-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.stderr

@@ -16,3 +16,19 @@
  1 | import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
    :                                  ^^^^^^^^^^^^^^^^^^^^^^^
    `----
+
+  x NEXT_RSC_ERR_REACT_API: experimental_useOptimistic
+   ,-[input.js:3:1]
+ 3 | import {
+ 4 |   experimental_useOptimistic as useOptimistic,
+   :   ^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 5 |   experimental_useFormStatus,
+   `----
+
+  x NEXT_RSC_ERR_REACT_API: experimental_useFormStatus
+   ,-[input.js:4:1]
+ 4 |   experimental_useOptimistic as useOptimistic,
+ 5 |   experimental_useFormStatus,
+   :   ^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 6 | } from 'react-dom'
+   `----

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "private": true,
   "scripts": {
     "clean": "rm -rf ./native/*",

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "13.4.2-canary.0",
+  "version": "13.4.2-canary.3",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -83,7 +83,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "13.4.2-canary.0",
+    "@next/env": "13.4.2-canary.3",
     "@swc/helpers": "0.5.1",
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001406",
@@ -143,11 +143,11 @@
     "@jest/types": "29.5.0",
     "@napi-rs/cli": "2.14.7",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "13.4.2-canary.0",
-    "@next/polyfill-nomodule": "13.4.2-canary.0",
-    "@next/react-dev-overlay": "13.4.2-canary.0",
-    "@next/react-refresh-utils": "13.4.2-canary.0",
-    "@next/swc": "13.4.2-canary.0",
+    "@next/polyfill-module": "13.4.2-canary.3",
+    "@next/polyfill-nomodule": "13.4.2-canary.3",
+    "@next/react-dev-overlay": "13.4.2-canary.3",
+    "@next/react-refresh-utils": "13.4.2-canary.3",
+    "@next/swc": "13.4.2-canary.3",
     "@opentelemetry/api": "1.4.1",
     "@segment/ajv-human-errors": "2.1.2",
     "@taskr/clear": "1.1.0",

packages/next/src/build/index.ts

@@ -289,7 +289,11 @@ export default async function build(
       hasAppDir = Boolean(appDir)
 
       if (isAppDirEnabled && hasAppDir) {
-        if (!process.env.__NEXT_TEST_MODE && ciEnvironment.hasNextSupport) {
+        if (
+          (!process.env.__NEXT_TEST_MODE ||
+            process.env.__NEXT_TEST_MODE === 'e2e') &&
+          ciEnvironment.hasNextSupport
+        ) {
           const requireHook = require.resolve('../server/require-hook')
           const contents = await promises.readFile(requireHook, 'utf8')
           await promises.writeFile(
@@ -3056,15 +3060,36 @@ export default async function build(
       if (config.output === 'export') {
         const exportApp: typeof import('../export').default =
           require('../export').default
+
+        const pagesWorker = createStaticWorker('pages')
+        const appWorker = createStaticWorker('app')
+
         const options: ExportOptions = {
           isInvokedFromCli: false,
           nextConfig: config,
           hasAppDir,
           silent: true,
           threads: config.experimental.cpus,
           outdir: path.join(dir, configOutDir),
+          exportAppPageWorker: sharedPool
+            ? appWorker.exportPage.bind(appWorker)
+            : undefined,
+          exportPageWorker: sharedPool
+            ? pagesWorker.exportPage.bind(pagesWorker)
+            : undefined,
+          endWorker: sharedPool
+            ? async () => {
+                await pagesWorker.end()
+                await appWorker.end()
+              }
+            : undefined,
         }
+
         await exportApp(dir, options, nextBuildSpan)
+
+        // ensure the worker is not left hanging
+        pagesWorker.close()
+        appWorker.close()
       }
 
       await nextBuildSpan

packages/next/src/build/webpack-config.ts

@@ -90,7 +90,7 @@ const babelIncludeRegexes: RegExp[] = [
 const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 
 const asyncStoragesRegex =
-  /next[\\/]dist[\\/]client[\\/]components[\\/](static-generation-async-storage|action-async-storage)/
+  /next[\\/]dist[\\/]client[\\/]components[\\/](static-generation-async-storage|action-async-storage|request-async-storage)/
 
 const mainFieldsPerCompiler: Record<CompilerNameValues, string[]> = {
   [COMPILER_NAMES.server]: ['main', 'module'],

packages/next/src/build/webpack/loaders/next-font-loader/index.ts

@@ -49,6 +49,15 @@ export default async function nextFontLoader(this: any) {
       postcss: getPostcss,
     } = this.getOptions()
 
+    if (assetPrefix && !/^\/|https?:\/\//.test(assetPrefix)) {
+      const err = new Error(
+        'assetPrefix must start with a leading slash or be an absolute URL(http:// or https://)'
+      )
+      err.name = 'NextFontError'
+      callback(err)
+      return
+    }
+
     /**
      * Emit font files to .next/static/media as [hash].[ext].
      *

packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts

@@ -51,13 +51,11 @@ const contentType = ${JSON.stringify(getContentType(resourcePath))}
 const buffer = Buffer.from(${JSON.stringify(
     (
       await fs.promises.readFile(
-        resourcePath.replace(METADATA_RESOURCE_QUERY, ''),
-        {
-          encoding: 'utf-8',
-        }
+        resourcePath.replace(METADATA_RESOURCE_QUERY, '')
       )
-    ).toString()
-  )})
+    ).toString('base64')
+  )}, 'base64'
+  )
 
 export function GET() {
   return new NextResponse(buffer, {

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -261,7 +261,7 @@ export class ClientReferenceEntryPlugin {
         if (!this.useServerActions) {
           compilation.errors.push(
             new Error(
-              'Server Actions require `experimental.serverActions` option to be enabled in your Next.js config.'
+              'Server Actions require `experimental.serverActions` option to be enabled in your Next.js config: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions'
             )
           )
         } else {

packages/next/src/client/components/error.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const styles: { [k: string]: React.CSSProperties } = {
+const styles: Record<string, React.CSSProperties> = {
   error: {
     // https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css#L38-L52
     fontFamily:

packages/next/src/lib/metadata/clone-metadata.ts

@@ -0,0 +1,23 @@
+import type { ResolvedMetadata } from './types/metadata-interface'
+
+const TYPE_URL = '__METADATA_URL'
+
+function replacer(_key: string, val: any) {
+  // clone URL as string but recover it as URL
+  if (val instanceof URL) {
+    return { _type: TYPE_URL, value: val.href }
+  }
+  return val
+}
+
+function reviver(_key: string, val: any) {
+  if (typeof val === 'object' && val !== null && val._type === TYPE_URL) {
+    return new URL(val.value)
+  }
+  return val
+}
+
+export function cloneMetadata(metadata: ResolvedMetadata): ResolvedMetadata {
+  const jsonString = JSON.stringify(metadata, replacer)
+  return JSON.parse(jsonString, reviver)
+}

packages/next/src/lib/metadata/resolve-metadata.ts

@@ -408,9 +408,7 @@ export async function accumulateMetadata(
       const currentResolvedMetadata: ResolvedMetadata =
         process.env.NODE_ENV === 'development'
           ? Object.freeze(
-              require('next/dist/compiled/@edge-runtime/primitives/structured-clone').structuredClone(
-                resolvedMetadata
-              )
+              require('./clone-metadata').cloneMetadata(resolvedMetadata)
             )
           : resolvedMetadata
 

packages/next/src/pages/_error.tsx

@@ -24,7 +24,7 @@ function _getInitialProps({
   return { statusCode }
 }
 
-const styles: { [k: string]: React.CSSProperties } = {
+const styles: Record<string, React.CSSProperties> = {
   error: {
     // https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css#L38-L52
     fontFamily: