[Not for merge] Try next mdx

app/[slug]/page.js

@@ -1,23 +1,12 @@
 import { Fragment } from "react";
 import { readdir, readFile } from "fs/promises";
-import matter from "gray-matter";
-import { MDXRemote } from "next-mdx-remote-client/rsc";
 import Link from "../Link";
+import matter from "gray-matter";
 import { sans } from "../fonts";
-import remarkSmartpants from "remark-smartypants";
-import rehypePrettyCode from "rehype-pretty-code";
-import rehypeSlug from "rehype-slug";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import { remarkMdxEvalCodeBlock } from "./mdx.js";
-import overnight from "overnight/themes/Overnight-Slumber.json";
 import "./markdown.css";
 
-overnight.colors["editor.background"] = "var(--code-bg)";
-
 export default async function PostPage({ params }) {
   const { slug } = await params;
-  const filename = "./public/" + slug + "/index.md";
-  const file = await readFile(filename, "utf8");
   let postComponents = {};
   try {
     postComponents = await import("../../public/" + slug + "/components.js");
@@ -27,7 +16,9 @@ export default async function PostPage({ params }) {
     }
   }
   let Wrapper = postComponents.Wrapper ?? Fragment;
-  const { content, data } = matter(file);
+  const { default: Post, frontmatter: data } = await import(
+    `../../public/${slug}/index.md`
+  );
   const discussUrl = `https://bsky.app/search?q=${encodeURIComponent(
     `https://overreacted.io/${slug}/`,
   )}`;
@@ -62,8 +53,7 @@ export default async function PostPage({ params }) {
             Pay what you like
           </a>
           <Wrapper>
-            <MDXRemote
-              source={content}
+            <Post
               components={{
                 a: Link,
                 img: ({ src, ...rest }) => {
@@ -75,34 +65,6 @@ export default async function PostPage({ params }) {
                 },
                 ...postComponents,
               }}
-              options={{
-                mdxOptions: {
-                  useDynamicImport: true,
-                  remarkPlugins: [
-                    remarkSmartpants,
-                    [remarkMdxEvalCodeBlock, filename],
-                  ],
-                  rehypePlugins: [
-                    [
-                      rehypePrettyCode,
-                      {
-                        theme: overnight,
-                      },
-                    ],
-                    [rehypeSlug],
-                    [
-                      rehypeAutolinkHeadings,
-                      {
-                        behavior: "wrap",
-                        properties: {
-                          className: "linked-heading",
-                          target: "_self",
-                        },
-                      },
-                    ],
-                  ],
-                },
-              }}
             />
           </Wrapper>
           <a href="https://ko-fi.com/gaearon" target="_blank" className="tip">

mdx-components.js

@@ -0,0 +1,3 @@
+export function useMDXComponents(components) {
+  return components;
+}

app/[slug]/mdx.js → mdx.js

@@ -1,4 +1,4 @@
-import * as jsx from "acorn-jsx";
+import jsx from "acorn-jsx";
 import { Parser } from "acorn";
 import { visit } from "unist-util-visit";
 

next.config.js

@@ -1,4 +1,50 @@
-module.exports = {
+import createMDX from "@next/mdx";
+import remarkSmartpants from "remark-smartypants";
+import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
+import { remarkMdxEvalCodeBlock } from "./mdx.js";
+import overnight from "overnight/themes/Overnight-Slumber.json" with { type: "json" };
+
+overnight.colors["editor.background"] = "var(--code-bg)";
+
+const nextConfig = {
+  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
   output: "export",
   trailingSlash: true,
 };
+
+const withMDX = createMDX({
+  extension: /\.(md|mdx)$/,
+  options: {
+    remarkPlugins: [
+      remarkFrontmatter,
+      remarkMdxFrontmatter,
+      remarkSmartpants,
+      remarkMdxEvalCodeBlock,
+    ],
+    rehypePlugins: [
+      [
+        rehypePrettyCode,
+        {
+          theme: overnight,
+        },
+      ],
+      [rehypeSlug],
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "wrap",
+          properties: {
+            className: "linked-heading",
+            target: "_self",
+          },
+        },
+      ],
+    ],
+  },
+});
+
+export default withMDX(nextConfig);