Merge branch 'canary' into revert-65425-revert-64521-edge/extract-bui…

…ld-id

docs/02-app/01-building-your-application/02-data-fetching/02-server-actions-and-mutations.mdx

@@ -358,10 +358,10 @@ export default async function createsUser(formData) {
 }
 ```
 
-Once the fields have been validated on the server, you can return a serializable object in your action and use the React [`useFormState`](https://react.dev/reference/react-dom/hooks/useFormState) hook to show a message to the user.
+Once the fields have been validated on the server, you can return a serializable object in your action and use the React [`useActionState`](https://react.dev/reference/react/useActionState) hook to show a message to the user.
 
-- By passing the action to `useFormState`, the action's function signature changes to receive a new `prevState` or `initialState` parameter as its first argument.
-- `useFormState` is a React hook and therefore must be used in a Client Component.
+- By passing the action to `useActionState`, the action's function signature changes to receive a new `prevState` or `initialState` parameter as its first argument.
+- `useActionState` is a React hook and therefore must be used in a Client Component.
 
 ```tsx filename="app/actions.ts" switcher
 'use server'
@@ -385,20 +385,20 @@ export async function createUser(prevState, formData) {
 }
 ```
 
-Then, you can pass your action to the `useFormState` hook and use the returned `state` to display an error message.
+Then, you can pass your action to the `useActionState` hook and use the returned `state` to display an error message.
 
 ```tsx filename="app/ui/signup.tsx" switcher
 'use client'
 
-import { useFormState } from 'react-dom'
+import { useActionState } from 'react'
 import { createUser } from '@/app/actions'
 
 const initialState = {
   message: '',
 }
 
 export function Signup() {
-  const [state, formAction] = useFormState(createUser, initialState)
+  const [state, formAction] = useActionState(createUser, initialState)
 
   return (
     <form action={formAction}>
@@ -417,15 +417,15 @@ export function Signup() {
 ```jsx filename="app/ui/signup.js" switcher
 'use client'
 
-import { useFormState } from 'react-dom'
+import { useActionState } from 'react'
 import { createUser } from '@/app/actions'
 
 const initialState = {
   message: '',
 }
 
 export function Signup() {
-  const [state, formAction] = useFormState(createUser, initialState)
+  const [state, formAction] = useActionState(createUser, initialState)
 
   return (
     <form action={formAction}>
@@ -739,7 +739,7 @@ export async function createTodo(prevState, formData) {
 
 > **Good to know:**
 >
-> - Aside from throwing the error, you can also return an object to be handled by `useFormState`. See [Server-side validation and error handling](#server-side-validation-and-error-handling).
+> - Aside from throwing the error, you can also return an object to be handled by `useActionState`. See [Server-side validation and error handling](#server-side-validation-and-error-handling).
 
 ### Revalidating data
 
@@ -1002,5 +1002,5 @@ For more information on Server Actions, check out the following React docs:
 - [`"use server"`](https://react.dev/reference/react/use-server)
 - [`<form>`](https://react.dev/reference/react-dom/components/form)
 - [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useFormState`](https://react.dev/reference/react-dom/hooks/useFormState)
+- [`useActionState`](https://react.dev/reference/react/useActionState)
 - [`useOptimistic`](https://react.dev/reference/react/useOptimistic)

docs/02-app/01-building-your-application/04-caching/index.mdx

@@ -369,7 +369,7 @@ The cache is stored in the browser's temporary memory. Two factors determine how
 
 While a page refresh will clear **all** cached segments, the automatic invalidation period only affects the individual segment from the time it was prefetched.
 
-> **Note**: There is [experimental support](/docs/app/api-reference/next-config-js/staleTimes) for configuring these values as of This configuration option is available as of [v14.2.0](https://github.com/vercel/next.js/releases/tag/v14.2.0).
+> **Note**: There is [experimental support](/docs/app/api-reference/next-config-js/staleTimes) for configuring these values, available as of [v14.2.0](https://github.com/vercel/next.js/releases/tag/v14.2.0).
 
 ### Invalidation
 

docs/02-app/01-building-your-application/09-authentication/index.mdx

@@ -29,7 +29,7 @@ The examples on this page walk through basic username and password auth for educ
 
 ### Sign-up and login functionality
 
-You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/rendering/server-components), [`useFormStatus()`](https://react.dev/reference/react-dom/hooks/useFormStatus), and [`useFormState()`](https://react.dev/reference/react-dom/hooks/useFormState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
+You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/rendering/server-components), [`useFormStatus()`](https://react.dev/reference/react-dom/hooks/useFormStatus), and [`useActionState()`](https://react.dev/reference/react/useActionState) to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
 
 Since Server Actions always execute on the server, they provide a secure environment for handling authentication logic.
 
@@ -200,16 +200,16 @@ export async function signup(state, formData) {
 }
 ```
 
-Back in your `<SignupForm />`, you can use React's `useFormState()` hook to display validation errors to the user:
+Back in your `<SignupForm />`, you can use React's `useActionState()` hook to display validation errors to the user:
 
 ```tsx filename="app/ui/signup-form.tsx" switcher highlight={7,15,21,27-36}
 'use client'
 
-import { useFormState } from 'react-dom'
+import { useActionState } from 'react'
 import { signup } from '@/app/actions/auth'
 
 export function SignupForm() {
-  const [state, action] = useFormState(signup, undefined)
+  const [state, action] = useActionState(signup, undefined)
 
   return (
     <form action={action}>
@@ -248,11 +248,11 @@ export function SignupForm() {
 ```jsx filename="app/ui/signup-form.js" switcher highlight={7,15,21,27-36}
 'use client'
 
-import { useFormState } from 'react-dom'
+import { useActionState } from 'react'
 import { signup } from '@/app/actions/auth'
 
 export function SignupForm() {
-  const [state, action] = useFormState(signup, undefined)
+  const [state, action] = useActionState(signup, undefined)
 
   return (
     <form action={action}>
@@ -293,7 +293,8 @@ You can also use the `useFormStatus()` hook to handle the pending state on form
 ```tsx filename="app/ui/signup-form.tsx" highlight={6} switcher
 'use client'
 
-import { useFormStatus, useFormState } from 'react-dom'
+import { useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
 
 export function SignupButton() {
   const { pending } = useFormStatus()
@@ -309,7 +310,8 @@ export function SignupButton() {
 ```jsx filename="app/ui/signup-form.js"  highlight={6} switcher
 'use client'
 
-import { useFormStatus, useFormState } from 'react-dom'
+import { useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
 
 export function SignupButton() {
   const { pending } = useFormStatus()

docs/02-app/02-api-reference/05-next-config-js/serverComponentsExternalPackages.mdx → docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx

@@ -1,5 +1,5 @@
 ---
-title: serverComponentsExternalPackages
+title: serverExternalPackages
 description: Opt-out specific dependencies from the Server Components bundling and use native Node.js `require`.
 ---
 
@@ -10,9 +10,7 @@ If a dependency is using Node.js specific features, you can choose to opt-out sp
 ```js filename="next.config.js"
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    serverComponentsExternalPackages: ['@acme/ui'],
-  },
+  serverExternalPackages: ['@acme/ui'],
 }
 
 module.exports = nextConfig

docs/03-pages/02-api-reference/03-next-config-js/bundlePagesRouterDependencies.mdx

@@ -0,0 +1,17 @@
+---
+title: bundlePagesRouterDependencies
+description: Enable automatic dependency bundling for Pages Router
+---
+
+Enable automatic server-side dependency bundling for Pages Router applications. Matches the automatic dependency bundling in App Router.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  bundlePagesRouterDependencies: true,
+}
+
+module.exports = nextConfig
+```
+
+Explicitly opt-out certain packages from being bundled using the [`serverExternalPackages`](/docs/pages/api-reference/next-config-js/serverExternalPackages) option.

docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx

@@ -0,0 +1,77 @@
+---
+title: serverExternalPackages
+description: Opt-out specific dependencies from the dependency bundling enabled by `bundlePagesRouterDependencies`.
+---
+
+Opt-out specific dependencies from being included in the automatic bundling of the [`bundlePagesRouterDependencies`](/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies) option.
+
+These pages will then use native Node.js `require` to resolve the dependency.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  serverExternalPackages: ['@acme/ui'],
+}
+
+module.exports = nextConfig
+```
+
+Next.js includes a [short list of popular packages](https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/server-external-packages.json) that currently are working on compatibility and automatically opt-ed out:
+
+- `@appsignal/nodejs`
+- `@aws-sdk/client-s3`
+- `@aws-sdk/s3-presigned-post`
+- `@blockfrost/blockfrost-js`
+- `@highlight-run/node`
+- `@jpg-store/lucid-cardano`
+- `@libsql/client`
+- `@mikro-orm/core`
+- `@mikro-orm/knex`
+- `@node-rs/argon2`
+- `@node-rs/bcrypt`
+- `@prisma/client`
+- `@react-pdf/renderer`
+- `@sentry/profiling-node`
+- `@swc/core`
+- `argon2`
+- `autoprefixer`
+- `aws-crt`
+- `bcrypt`
+- `better-sqlite3`
+- `canvas`
+- `cpu-features`
+- `cypress`
+- `eslint`
+- `express`
+- `firebase-admin`
+- `isolated-vm`
+- `jest`
+- `jsdom`
+- `libsql`
+- `mdx-bundler`
+- `mongodb`
+- `mongoose`
+- `next-mdx-remote`
+- `next-seo`
+- `node-pty`
+- `node-web-audio-api`
+- `oslo`
+- `pg`
+- `playwright`
+- `postcss`
+- `prettier`
+- `prisma`
+- `puppeteer-core`
+- `puppeteer`
+- `rimraf`
+- `sharp`
+- `shiki`
+- `sqlite3`
+- `tailwindcss`
+- `ts-node`
+- `typescript`
+- `vscode-oniguruma`
+- `undici`
+- `webpack`
+- `websocket`
+- `zeromq`

examples/next-forms/app/add-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useFormState, useFormStatus } from "react-dom";
+import { useActionState } from "react";
+import { useFormStatus } from "react-dom";
 import { createTodo } from "@/app/actions";
 
 const initialState = {
@@ -18,7 +19,7 @@ function SubmitButton() {
 }
 
 export function AddForm() {
-  const [state, formAction] = useFormState(createTodo, initialState);
+  const [state, formAction] = useActionState(createTodo, initialState);
 
   return (
     <form action={formAction}>

examples/next-forms/app/delete-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useFormState, useFormStatus } from "react-dom";
+import { useActionState } from "react";
+import { useFormStatus } from "react-dom";
 import { deleteTodo } from "@/app/actions";
 
 const initialState = {
@@ -18,7 +19,7 @@ function DeleteButton() {
 }
 
 export function DeleteForm({ id, todo }: { id: number; todo: string }) {
-  const [state, formAction] = useFormState(deleteTodo, initialState);
+  const [state, formAction] = useActionState(deleteTodo, initialState);
 
   return (
     <form action={formAction}>

examples/with-fauna/components/EntryForm.tsx

@@ -3,7 +3,9 @@
 import cn from "classnames";
 import { createEntryAction } from "@/actions/entry";
 // @ts-ignore
-import { useFormState, useFormStatus } from "react-dom";
+import { useActionState } from "react";
+// @ts-ignore
+import { useFormStatus } from "react-dom";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import SuccessMessage from "@/components/SuccessMessage";
 import ErrorMessage from "@/components/ErrorMessage";
@@ -20,7 +22,7 @@ const initialState = {
 };
 
 export default function EntryForm() {
-  const [state, formAction] = useFormState(createEntryAction, initialState);
+  const [state, formAction] = useActionState(createEntryAction, initialState);
   const { pending } = useFormStatus();
 
   return (

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "14.3.0-canary.44"
+  "version": "14.3.0-canary.45"
 }

package.json

@@ -196,18 +196,18 @@
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
-    "react": "18.2.0",
+    "react": "19.0.0-beta-4508873393-20240430",
     "react-17": "npm:react@17.0.2",
-    "react-builtin": "npm:react@18.3.0-canary-c3048aab4-20240326",
-    "react-dom": "18.2.0",
+    "react-builtin": "npm:react@19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430",
     "react-dom-17": "npm:react-dom@17.0.2",
-    "react-dom-builtin": "npm:react-dom@18.3.0-canary-c3048aab4-20240326",
-    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-c3048aab4-20240326",
-    "react-experimental-builtin": "npm:react@0.0.0-experimental-c3048aab4-20240326",
-    "react-server-dom-turbopack": "18.3.0-canary-c3048aab4-20240326",
-    "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-c3048aab4-20240326",
-    "react-server-dom-webpack": "18.3.0-canary-c3048aab4-20240326",
-    "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-c3048aab4-20240326",
+    "react-dom-builtin": "npm:react-dom@19.0.0-beta-4508873393-20240430",
+    "react-dom-experimental-builtin": "npm:react-dom@0.0.0-experimental-4508873393-20240430",
+    "react-experimental-builtin": "npm:react@0.0.0-experimental-4508873393-20240430",
+    "react-server-dom-turbopack": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-turbopack-experimental": "npm:react-server-dom-turbopack@0.0.0-experimental-4508873393-20240430",
+    "react-server-dom-webpack": "19.0.0-beta-4508873393-20240430",
+    "react-server-dom-webpack-experimental": "npm:react-server-dom-webpack@0.0.0-experimental-4508873393-20240430",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",
@@ -217,8 +217,8 @@
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
     "satori": "0.10.9",
-    "scheduler-builtin": "npm:scheduler@0.24.0-canary-c3048aab4-20240326",
-    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-c3048aab4-20240326",
+    "scheduler-builtin": "npm:scheduler@0.25.0-beta-4508873393-20240430",
+    "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-4508873393-20240430",
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "semver": "7.3.7",
@@ -252,7 +252,11 @@
     "@babel/types": "7.22.5",
     "@babel/traverse": "7.22.5",
     "@types/react": "18.2.74",
-    "@types/react-dom": "18.2.23"
+    "@types/react-dom": "18.2.23",
+    "react": "19.0.0-beta-4508873393-20240430",
+    "react-dom": "19.0.0-beta-4508873393-20240430",
+    "react-is": "19.0.0-beta-4508873393-20240430",
+    "scheduler": "0.25.0-beta-94eed63c49-20240425"
   },
   "engines": {
     "node": ">=18.17.0",

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "14.3.0-canary.44",
+  "version": "14.3.0-canary.45",
   "keywords": [
     "react",
     "next",

packages/create-next-app/templates/index.ts

@@ -186,8 +186,8 @@ export const installTemplate = async ({
      * Default dependencies.
      */
     dependencies: {
-      react: "^18",
-      "react-dom": "^18",
+      react: "19.0.0-beta-4508873393-20240430",
+      "react-dom": "19.0.0-beta-4508873393-20240430",
       next: version,
     },
     devDependencies: {},