tried this and I think I need to move to app router on next13, then upgrade to 15, then enable the complier

Author: mattcarrollcode

next.config.js

@@ -10,9 +10,14 @@ const nextConfig = {
   reactStrictMode: true,
   experimental: {
     // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
-    appDir: false,
+    // appDir: false,
     scrollRestoration: true,
-    legacyBrowsers: false,
+    // legacyBrowsers: false,
+    reactCompiler: true,
+    staleTimes: {
+      dynamic: 30,
+      static: 180,
+    },
   },
   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-rc.0",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
-    "react": "^0.0.0-experimental-16d053d59-20230506",
+    "react": "^19.0.0-rc-f994737d14-20240522",
     "react-collapsed": "4.0.4",
-    "react-dom": "^0.0.0-experimental-16d053d59-20230506",
+    "react-dom": "^19.0.0-rc-f994737d14-20240522",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"
   },
@@ -62,7 +63,7 @@
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
     "eslint": "7.x",
-    "eslint-config-next": "12.0.3",
+    "eslint-config-next": "^15.0.0-rc.0",
     "eslint-config-react-app": "^5.2.1",
     "eslint-plugin-flowtype": "4.x",
     "eslint-plugin-import": "2.x",

patches/next+13.4.1.patch patches/next+15.0.0-rc.0.patchpatches/next+13.4.1.patch renamed to patches/next+15.0.0-rc.0.patch

@@ -1,12 +1,12 @@
 diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js
-index a1f8648..1b3d608 100644
+index 73cf44c..f3d9022 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)({
+-            return await (0, _nodewebstreamshelper.renderToInitialFizzStream)({
 -                ReactDOMServer: _serverbrowser.default,
 -                element: content
 +            return new Promise((resolve, reject) => {
@@ -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/pages/[[...markdownPath]].js

@@ -15,6 +15,7 @@ import compileMDX from 'utils/compileMDX';
 import {generateRssFeed} from '../utils/rss';
 
 export default function Layout({content, toc, meta, languages}) {
+  console.log(content);
   const parsedContent = useMemo(
     () => JSON.parse(content, reviveNodeOnClient),
     [content]
@@ -72,11 +73,9 @@ function useActiveSection() {
 
 // Deserialize a client React tree from JSON.
 function reviveNodeOnClient(key, val) {
-  if (Array.isArray(val) && val[0] == '$r') {
+  if (typeof val === 'object' && val !== null && 'type' in val) {
     // Assume it's a React element.
-    let type = val[1];
-    let key = val[2];
-    let props = val[3];
+    let {type, key, ref, props} = val;
     if (type === 'wrapper') {
       type = Fragment;
       props = {children: props.children};
@@ -92,7 +91,7 @@ function reviveNodeOnClient(key, val) {
       $$typeof: Symbol.for('react.element'),
       type: type,
       key: key,
-      ref: null,
+      ref: ref,
       props: props,
       _owner: null,
     };

src/pages/_document.tsx

@@ -142,7 +142,7 @@ const MyDocument = () => {
                   // An example of such content can be the keyboard shortcut displayed in the search bar
                   document.documentElement.classList.add(
                       window.navigator.platform.includes('Mac')
-                      ? "platform-mac" 
+                      ? "platform-mac"
                       : "platform-win"
                   );
                 })();