Merge branch 'canary' into feat-turbopack-relay

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)

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/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:

packages/next/src/server/node-polyfill-crypto.test.ts

@@ -0,0 +1,11 @@
+/* eslint-env jest */
+import './node-polyfill-crypto'
+
+describe('node-polyfill-crypto', () => {
+  test('overwrite crypto', async () => {
+    expect(global.crypto).not.toBeUndefined()
+    const a = {} as Crypto
+    global.crypto = a
+    expect(global.crypto).toBe(a)
+  })
+})

packages/next/src/server/node-polyfill-crypto.ts

@@ -1,12 +1,19 @@
 // Polyfill crypto() in the Node.js environment
 
-if (!(global as any).crypto) {
-  function getCryptoImpl() {
-    return require('node:crypto').webcrypto
-  }
+if (!global.crypto) {
+  let webcrypto: Crypto | undefined
+
   Object.defineProperty(global, 'crypto', {
+    enumerable: false,
+    configurable: true,
     get() {
-      return getCryptoImpl()
+      if (!webcrypto) {
+        webcrypto = require('node:crypto').webcrypto
+      }
+      return webcrypto
+    },
+    set(value: Crypto) {
+      webcrypto = value
     },
   })
 }

packages/next/src/shared/lib/router/router.ts

@@ -221,7 +221,12 @@ function getMiddlewareData<T extends FetchDataOutput>(
         ) {
           const parsedSource = getNextPathnameInfo(
             parseRelativeUrl(source).pathname,
-            { parseData: true }
+            {
+              nextConfig: process.env.__NEXT_HAS_REWRITES
+                ? undefined
+                : nextConfig,
+              parseData: true,
+            }
           )
 
           as = addBasePath(parsedSource.pathname)

test/e2e/app-dir/actions/app-action.test.ts

@@ -59,6 +59,32 @@ createNextDescribe(
       }, 'same')
     })
 
+    it('should support headers in client imported actions', async () => {
+      const logs: string[] = []
+      next.on('stdout', (log) => {
+        logs.push(log)
+      })
+      next.on('stderr', (log) => {
+        logs.push(log)
+      })
+
+      const currentTimestamp = Date.now()
+
+      const browser = await next.browser('/client')
+      await browser.elementByCss('#get-header').click()
+      await check(() => {
+        return logs.some((log) =>
+          log.includes('accept header: text/x-component')
+        )
+          ? 'yes'
+          : ''
+      }, 'yes')
+
+      expect(
+        await browser.eval('+document.cookie.match(/test-cookie=(\\d+)/)[1]')
+      ).toBeGreaterThanOrEqual(currentTimestamp)
+    })
+
     it('should support setting cookies in route handlers with the correct overrides', async () => {
       const res = await next.fetch('/handler')
       const setCookieHeader = res.headers.get('set-cookie') as string[]

test/e2e/app-dir/actions/app/client/actions.js

@@ -1,6 +1,12 @@
 'use server'
 
 import { redirect } from 'next/navigation'
+import { headers, cookies } from 'next/headers'
+
+export async function getHeaders() {
+  console.log('accept header:', headers().get('accept'))
+  cookies().set('test-cookie', Date.now())
+}
 
 export async function inc(value) {
   return value + 1

test/e2e/app-dir/actions/app/client/page.js

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 
-import double, { inc, dec, redirectAction } from './actions'
+import double, { inc, dec, redirectAction, getHeaders } from './actions'
 
 export default function Counter() {
   const [count, setCount] = useState(0)
@@ -52,6 +52,11 @@ export default function Counter() {
           redirect external
         </button>
       </form>
+      <form action={getHeaders}>
+        <button type="submit" id="get-header">
+          submit
+        </button>
+      </form>
     </div>
   )
 }

test/e2e/app-dir/app/pages/index.js

@@ -5,8 +5,11 @@ import styles from '../styles/shared.module.css'
 export default function Page() {
   return (
     <>
-      <p className={styles.content}>hello from pages/index</p>
+      <p id="hello" className={styles.content}>
+        hello from pages/index
+      </p>
       <Link href="/dashboard">Dashboard</Link>
+      <p id="react-version">{React.version}</p>
     </>
   )
 }