Use server.browser for now

No plans to support React 19 in Pages router.

Author: eps1lon

examples/reproduction-template/package.json

@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "next": "canary",
-    "react": "19.0.0-rc-7771d3a7-20240827",
-    "react-dom": "19.0.0-rc-7771d3a7-20240827"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "20.12.12",

package.json

@@ -206,10 +206,10 @@
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
-    "react": "19.0.0-rc-7771d3a7-20240827",
+    "react": "18.3.1",
     "react-17": "npm:[email protected]",
     "react-builtin": "npm:[email protected]",
-    "react-dom": "19.0.0-rc-7771d3a7-20240827",
+    "react-dom": "18.3.1",
     "react-dom-17": "npm:[email protected]",
     "react-dom-builtin": "npm:[email protected]",
     "react-dom-experimental-builtin": "npm:[email protected]",
@@ -269,10 +269,10 @@
       "@babel/traverse": "7.22.5",
       "@types/react": "npm:[email protected]",
       "@types/react-dom": "npm:[email protected]",
-      "react": "19.0.0-rc-7771d3a7-20240827",
-      "react-dom": "19.0.0-rc-7771d3a7-20240827",
-      "react-is": "19.0.0-rc-7771d3a7-20240827",
-      "scheduler": "0.25.0-rc-7771d3a7-20240827"
+      "react": "18.3.1",
+      "react-dom": "18.3.1",
+      "react-is": "18.3.1",
+      "scheduler": "0.23.2"
     },
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]"

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

@@ -13,7 +13,7 @@ import { GetTemplateFileArgs, InstallTemplateArgs } from "./types";
 
 // Do not rename or format. sync-react script relies on this line.
 // prettier-ignore
-const nextjsReactPeerVersion = "19.0.0-rc-7771d3a7-20240827";
+const nextjsReactPeerVersion = "^18.2.0";
 
 /**
  * Get the file path for a given file in a template, e.g. "next.config.js".

packages/next/package.json

@@ -108,8 +108,8 @@
     "@opentelemetry/api": "^1.1.0",
     "@playwright/test": "^1.41.2",
     "babel-plugin-react-compiler": "*",
-    "react": "^18.2.0 || 19.0.0-rc-7771d3a7-20240827",
-    "react-dom": "^18.2.0 || 19.0.0-rc-7771d3a7-20240827",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.3.0"
   },
   "peerDependenciesMeta": {

packages/next/src/build/shims/ReactDOMServerEdgeIfAvailable.d.ts

@@ -108,8 +108,8 @@ const NEXT_PROJECT_ROOT_DIST_CLIENT = path.join(
   'client'
 )
 
-if (parseInt(React.version) < 18) {
-  throw new Error('Next.js requires react >= 18.2.0 to be installed.')
+if (parseInt(React.version) !== 18) {
+  throw new Error('Next.js requires react@^18.2.0 to be installed.')
 }
 
 export const babelIncludeRegexes: RegExp[] = [

packages/next/src/build/shims/ReactDOMServerEdgeIfAvailable.js

@@ -40,7 +40,7 @@ import type { Revalidate, SwrDelta } from './lib/revalidate'
 import type { COMPILER_NAMES } from '../shared/lib/constants'
 
 import React, { type JSX } from 'react'
-import ReactDOMServerEdge from '../build/shims/ReactDOMServerEdgeIfAvailable'
+import ReactDOMServerBrowser from 'react-dom/server.browser'
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {
   GSP_NO_RETURNED_VALUE,
@@ -127,7 +127,8 @@ function noRouter() {
 }
 
 async function renderToString(element: React.ReactElement) {
-  const renderStream = await ReactDOMServerEdge.renderToReadableStream(element)
+  const renderStream =
+    await ReactDOMServerBrowser.renderToReadableStream(element)
   await renderStream.allReady
   return streamToString(renderStream)
 }
@@ -1322,7 +1323,7 @@ export async function renderToHTMLImpl(
     ) => {
       const content = renderContent(EnhancedApp, EnhancedComponent)
       return await renderToInitialFizzStream({
-        ReactDOMServer: ReactDOMServerEdge,
+        ReactDOMServer: ReactDOMServerBrowser,
         element: content,
       })
     }

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

@@ -70,6 +70,10 @@ declare module 'react-dom/server.edge' {
   >
 }
 
+declare module 'react-dom/server.browser' {
+  export * from 'react-dom/server.edge'
+}
+
 declare module 'react-dom/static.edge' {
   import type { JSX } from 'react'
   /**