WIP: upgrade mdx pipeline

app/[[...path]]/page.tsx

@@ -1,7 +1,6 @@
-import {useMemo} from 'react';
-import {getMDXComponent} from 'mdx-bundler/client';
 import {Metadata} from 'next';
 import {notFound} from 'next/navigation';
+import {MDXRemote} from 'next-mdx-remote/rsc';
 
 import {apiCategories} from 'sentry-docs/build/resolveOpenAPI';
 import {ApiCategoryPage} from 'sentry-docs/components/apiCategoryPage';
@@ -24,6 +23,8 @@
   getDocsFrontMatter,
   getFileBySlugWithCache,
   getVersionsFromDoc,
+  rehypePlugins,
+  remarkPlugins,
 } from 'sentry-docs/mdx';
 import {mdxComponents} from 'sentry-docs/mdxComponents';
 import {setServerContext} from 'sentry-docs/serverContext';
@@ -47,17 +48,16 @@
 const mdxComponentsWithWrapper = mdxComponents(
   {Include, PlatformContent},
   ({children, frontMatter, nextPage, previousPage}) => (
-    <DocPage frontMatter={frontMatter} nextPage={nextPage} previousPage={previousPage}>
+    <DocPage
+      frontMatter={frontMatter ?? {}}
+      nextPage={nextPage}
+      previousPage={previousPage}
+    >
       {children}
     </DocPage>
   )
 );
 
-function MDXLayoutRenderer({mdxSource, ...rest}) {
-  const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource]);
-  return <MDXLayout components={mdxComponentsWithWrapper} {...rest} />;
-}
-
 export default async function Page(props: {params: Promise<{path?: string[]}>}) {
   const params = await props.params;
   // get frontmatter of all docs in tree
@@ -117,15 +117,27 @@
       }
       throw e;
     }
-    const {mdxSource, frontMatter} = doc;
+    // const {mdxSource, frontMatter} = doc;
     // pass frontmatter tree into sidebar, rendered page + fm into middle, headers into toc
     return (
-      <MDXLayoutRenderer
-        mdxSource={mdxSource}
-        frontMatter={frontMatter}
+      <DocPage
+        frontMatter={{title: 'TODO'}}
         nextPage={nextPage}
         previousPage={previousPage}
-      />
+      >
+        <MDXRemote
+          source={doc}
+          components={mdxComponentsWithWrapper}
+          options={{
+            mdxOptions: {
+              // @ts-ignore
+              remarkPlugins,
+              // @ts-ignore
+              rehypePlugins,
+            },
+          }}
+        />
+      </DocPage>
     );
   }
 
@@ -146,7 +158,7 @@
   // get the MDX for the current doc and render it
   let doc: Awaited<ReturnType<typeof getFileBySlugWithCache>>;
   try {
-    doc = await getFileBySlugWithCache(`docs/${pageNode.path}`);
+    doc = getFileBySlugWithCache(`docs/${pageNode.path}`);
   } catch (e) {
     if (e.code === 'ENOENT') {
       // eslint-disable-next-line no-console
@@ -155,19 +167,26 @@
     }
     throw e;
   }
-  const {mdxSource, frontMatter} = doc;
-
   // collect versioned files
   const allFm = await getDocsFrontMatter();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const versions = getVersionsFromDoc(allFm, pageNode.path);
 
-  // pass frontmatter tree into sidebar, rendered page + fm into middle, headers into toc.
   return (
-    <MDXLayoutRenderer
-      mdxSource={mdxSource}
-      frontMatter={{...frontMatter, versions}}
-      nextPage={nextPage}
-      previousPage={previousPage}
+    <MDXRemote
+      source={doc}
+      components={mdxComponentsWithWrapper}
+      options={{
+        mdxOptions: {
+          // @ts-ignore
+          remarkPlugins,
+          // @ts-ignore
+          rehypePlugins,
+        },
+      }}
+      // frontMatter={{...{}, versions}}
+      // nextPage={nextPage}
+      // previousPage={previousPage}
     />
   );
 }

package.json

@@ -70,7 +70,7 @@
     "mermaid": "^11.4.0",
     "micromark": "^4.0.0",
     "next": "15.1.7",
-    "next-mdx-remote": "^4.4.1",
+    "next-mdx-remote": "^5.0.0",
     "next-plausible": "^3.12.4",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.6",

src/components/include.tsx

@@ -1,19 +1,11 @@
-import {useMemo} from 'react';
-import {getMDXComponent} from 'mdx-bundler/client';
+import {MDXRemote} from 'next-mdx-remote/rsc';
 
-import {getFileBySlugWithCache} from 'sentry-docs/mdx';
+import {getFileBySlugWithCache, rehypePlugins, remarkPlugins} from 'sentry-docs/mdx';
 import {mdxComponents} from 'sentry-docs/mdxComponents';
 
 import {PlatformContent} from './platformContent';
 
-type Props = {
-  name: string;
-};
-
-function MDXLayoutRenderer({mdxSource: source, ...rest}) {
-  const MDXLayout = useMemo(() => getMDXComponent(source), [source]);
-  return <MDXLayout components={mdxComponents({Include, PlatformContent})} {...rest} />;
-}
+type Props = {name: string};
 
 export async function Include({name}: Props) {
   let doc: Awaited<ReturnType<typeof getFileBySlugWithCache>>;
@@ -28,6 +20,18 @@ export async function Include({name}: Props) {
     }
     throw e;
   }
-  const {mdxSource} = doc;
-  return <MDXLayoutRenderer mdxSource={mdxSource} />;
+  return (
+    <MDXRemote
+      source={doc}
+      components={mdxComponents({Include, PlatformContent})}
+      options={{
+        mdxOptions: {
+          // @ts-ignore
+          remarkPlugins,
+          // @ts-ignore
+          rehypePlugins,
+        },
+      }}
+    />
+  );
 }

src/components/platformContent.tsx

@@ -1,10 +1,10 @@
 import fs from 'fs';
 
-import {cache, useMemo} from 'react';
-import {getMDXComponent} from 'mdx-bundler/client';
+import {cache} from 'react';
+import {MDXRemote} from 'next-mdx-remote/rsc';
 
 import {getCurrentGuide, getDocsRootNode, getPlatform} from 'sentry-docs/docTree';
-import {getFileBySlugWithCache} from 'sentry-docs/mdx';
+import {getFileBySlugWithCache, rehypePlugins, remarkPlugins} from 'sentry-docs/mdx';
 import {mdxComponents} from 'sentry-docs/mdxComponents';
 import {serverContext} from 'sentry-docs/serverContext';
 import {
@@ -49,11 +49,6 @@ const updatePathIfVersionedFileDoesNotExistWithCache = cache(
   updatePathIfVersionedFileDoesNotExist
 );
 
-function MDXLayoutRenderer({mdxSource: source, ...rest}) {
-  const MDXLayout = useMemo(() => getMDXComponent(source), [source]);
-  return <MDXLayout components={mdxComponentsWithWrapper} {...rest} />;
-}
-
 export async function PlatformContent({includePath, platform, noGuides}: Props) {
   const {path} = serverContext();
 
@@ -77,7 +72,7 @@ export async function PlatformContent({includePath, platform, noGuides}: Props)
     );
 
     try {
-      doc = await getFileBySlugWithCache(guidePath);
+      doc = getFileBySlugWithCache(guidePath);
     } catch (e) {
       // It's fine - keep looking.
     }
@@ -93,7 +88,7 @@ export async function PlatformContent({includePath, platform, noGuides}: Props)
 
     if (guideObject?.fallbackGuide) {
       try {
-        doc = await getFileBySlugWithCache(fallbackGuidePath);
+        doc = getFileBySlugWithCache(fallbackGuidePath);
       } catch (e) {
         // It's fine - keep looking.
       }
@@ -106,7 +101,7 @@ export async function PlatformContent({includePath, platform, noGuides}: Props)
         `platform-includes/${includePath}/${platform}`
       );
 
-      doc = await getFileBySlugWithCache(platformPath);
+      doc = getFileBySlugWithCache(platformPath);
     } catch (e) {
       // It's fine - keep looking.
     }
@@ -122,7 +117,7 @@ export async function PlatformContent({includePath, platform, noGuides}: Props)
 
     if (platformObject?.fallbackPlatform) {
       try {
-        doc = await getFileBySlugWithCache(fallbackPlatformPath);
+        doc = getFileBySlugWithCache(fallbackPlatformPath);
       } catch (e) {
         // It's fine - keep looking.
       }
@@ -131,15 +126,27 @@ export async function PlatformContent({includePath, platform, noGuides}: Props)
 
   if (!doc) {
     try {
-      doc = await getFileBySlugWithCache(`platform-includes/${includePath}/_default`);
+      doc = getFileBySlugWithCache(`platform-includes/${includePath}/_default`);
     } catch (e) {
       // Couldn't find anything.
       return null;
     }
   }
 
-  const {mdxSource} = doc;
-  return <MDXLayoutRenderer mdxSource={mdxSource} />;
+  return (
+    <MDXRemote
+      source={doc}
+      components={mdxComponentsWithWrapper}
+      options={{
+        mdxOptions: {
+          // @ts-ignore
+          remarkPlugins,
+          // @ts-ignore
+          rehypePlugins,
+        },
+      }}
+    />
+  );
 }
 
 const mdxComponentsWithWrapper = mdxComponents({Include, PlatformContent});

src/hotReloadWatcher.mjs

@@ -1,4 +1,5 @@
 import path from 'path';
+
 import {watch} from 'node:fs/promises';
 import {WebSocketServer} from 'ws';
 
@@ -9,7 +10,7 @@ export const throttle = (fn, delay) => {
   return (...args) => {
     const now = Date.now();
     if (now - last < delay) {
-      return;
+      return () => {};
     }
     last = now;
     return fn(...args);