Upgrade to React 19, Next 15.1 and enable React Compiler

next.config.js

@@ -9,10 +9,8 @@ const nextConfig = {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   reactStrictMode: true,
   experimental: {
-    // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
-    appDir: false,
     scrollRestoration: true,
-    legacyBrowsers: false,
+    reactCompiler: true,
   },
   env: {},
   webpack: (config, {dev, isServer, ...options}) => {

package.json

@@ -28,17 +28,18 @@
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
+    "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "^13.4.1",
+    "next": "15.0.0-canary.46",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
-    "react": "^0.0.0-experimental-16d053d59-20230506",
+    "react": "^19.0.0-rc-8971381549-20240625",
     "react-collapsed": "4.0.4",
-    "react-dom": "^0.0.0-experimental-16d053d59-20230506",
+    "react-dom": "^19.0.0-rc-8971381549-20240625",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"
   },

patches/next+13.4.1.patch → patches/next+15.0.0-canary.46.patch

@@ -1,13 +1,13 @@
 diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js
-index a1f8648..1b3d608 100644
+index ed5eda3..6d4a57b 100644
 --- a/node_modules/next/dist/server/render.js
 +++ b/node_modules/next/dist/server/render.js
-@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) {
+@@ -815,9 +815,14 @@ async function renderToHTMLImpl(req, res, pathname, query, renderOpts, extra) {
          // Always using react concurrent rendering mode with required react version 18.x
          const renderShell = async (EnhancedApp, EnhancedComponent)=>{
              const content = renderContent(EnhancedApp, EnhancedComponent);
--            return await (0, _nodewebstreamshelper.renderToInitialStream)({
--                ReactDOMServer: _serverbrowser.default,
+-            return await (0, _nodewebstreamshelper.renderToInitialFizzStream)({
+-                ReactDOMServer: _serveredge.default,
 -                element: content
 +            return new Promise((resolve, reject) => {
 +                (0, _nodewebstreamshelper.renderToInitialStream)({
@@ -19,4 +19,4 @@ index a1f8648..1b3d608 100644
 +                }).then(resolve, reject);
              });
          };
-         const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{
+         const hasDocumentGetInitialProps = process.env.NEXT_RUNTIME !== 'edge' && !!Document.getInitialProps;

src/components/Layout/HomeContent.js

@@ -915,6 +915,7 @@ function Example1() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`function Video({ video }) {
   return (
     <div>
@@ -987,6 +988,7 @@ function Example2() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`function VideoList({ videos, emptyHeading }) {
   const count = videos.length;
   let heading = emptyHeading;
@@ -1078,6 +1080,7 @@ function Example3() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`import { useState } from 'react';
 
 function SearchableVideoList({ videos }) {
@@ -1149,6 +1152,7 @@ function Example4() {
           isFromPackageImport={false}
           noShadow={true}
           noMargin={true}>
+          {/* eslint-disable-next-line react/no-unknown-property */}
           <div meta={meta}>{`import { db } from './database.js';
 import { Suspense } from 'react';
 

src/components/MDX/CodeDiagram.tsx

@@ -17,6 +17,7 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) {
   });
   const content = Children.toArray(children).map((child: any) => {
     if (child.type?.mdxName === 'pre') {
+      // eslint-disable-next-line react/jsx-key
       return <CodeBlock {...child.props} noMargin={true} noMarkers={true} />;
     } else if (child.type === 'img') {
       return null;

src/pages/[[...markdownPath]].js

@@ -71,31 +71,27 @@ function useActiveSection() {
 }
 
 // Deserialize a client React tree from JSON.
-function reviveNodeOnClient(key, val) {
+function reviveNodeOnClient(parentPropertyName, val) {
   if (Array.isArray(val) && val[0] == '$r') {
     // Assume it's a React element.
-    let type = val[1];
+    let Type = val[1];
     let key = val[2];
+    if (key == null) {
+      key = parentPropertyName; // Index within a parent.
+    }
     let props = val[3];
-    if (type === 'wrapper') {
-      type = Fragment;
+    if (Type === 'wrapper') {
+      Type = Fragment;
       props = {children: props.children};
     }
-    if (MDXComponents[type]) {
-      type = MDXComponents[type];
+    if (Type in MDXComponents) {
+      Type = MDXComponents[Type];
     }
-    if (!type) {
-      console.error('Unknown type: ' + type);
-      type = Fragment;
+    if (!Type) {
+      console.error('Unknown type: ' + Type);
+      Type = Fragment;
     }
-    return {
-      $$typeof: Symbol.for('react.element'),
-      type: type,
-      key: key,
-      ref: null,
-      props: props,
-      _owner: null,
-    };
+    return <Type key={key} {...props} />;
   } else {
     return val;
   }

src/pages/errors/[errorCode].tsx

@@ -53,31 +53,27 @@ export default function ErrorDecoderPage({
 }
 
 // Deserialize a client React tree from JSON.
-function reviveNodeOnClient(key: unknown, val: any) {
+function reviveNodeOnClient(parentPropertyName: unknown, val: any) {
   if (Array.isArray(val) && val[0] == '$r') {
     // Assume it's a React element.
-    let type = val[1];
+    let Type = val[1];
     let key = val[2];
+    if (key == null) {
+      key = parentPropertyName; // Index within a parent.
+    }
     let props = val[3];
-    if (type === 'wrapper') {
-      type = Fragment;
+    if (Type === 'wrapper') {
+      Type = Fragment;
       props = {children: props.children};
     }
-    if (type in MDXComponents) {
-      type = MDXComponents[type as keyof typeof MDXComponents];
+    if (Type in MDXComponents) {
+      Type = MDXComponents[Type as keyof typeof MDXComponents];
     }
-    if (!type) {
-      console.error('Unknown type: ' + type);
-      type = Fragment;
+    if (!Type) {
+      console.error('Unknown type: ' + Type);
+      Type = Fragment;
     }
-    return {
-      $$typeof: Symbol.for('react.element'),
-      type: type,
-      key: key,
-      ref: null,
-      props: props,
-      _owner: null,
-    };
+    return <Type key={key} {...props} />;
   } else {
     return val;
   }

src/utils/compileMDX.ts

@@ -3,7 +3,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 9;
+const DISK_CACHE_BREAKER = 10;
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 export default async function compileMDX(
@@ -144,7 +144,10 @@ export default async function compileMDX(
 
   // Serialize a server React tree node to JSON.
   function stringifyNodeOnServer(key: unknown, val: any) {
-    if (val != null && val.$$typeof === Symbol.for('react.element')) {
+    if (
+      val != null &&
+      val.$$typeof === Symbol.for('react.transitional.element')
+    ) {
       // Remove fake MDX props.
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const {mdxType, originalType, parentName, ...cleanProps} = val.props;