config: add @next/mdx webpack loader with full remark/rehype plugin chain

next.config.ts

@@ -1,19 +1,67 @@
 import type { NextConfig } from 'next'
+import createMDX from '@next/mdx'
+import remarkSmartypants from 'remark-smartypants'
+import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
+import rehypeSlug from 'rehype-slug'
+import rehypeExternalLinks from 'rehype-external-links'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypePrettyCode from 'rehype-pretty-code'
+import { transformerCopyButton } from '@rehype-pretty/transformers'
+import rehypeKatex from 'rehype-katex'
+import type { Element } from 'hast'
+import type { LineElement } from 'rehype-pretty-code'
 
 const nextConfig: NextConfig = {
-  // Static export — generates out/ directory with plain HTML
   output: 'export',
-  // Trailing slash for clean static URLs
   trailingSlash: true,
-  // Images: unoptimized required for static export
+  images: { unoptimized: true },
-  images: {
-    unoptimized: true,
-  },
-  // Dev mode workaround: next-mdx-remote crashes in dev with Turbopack/webpack
-  // This transpiles the package to fix the crash. Production is unaffected.
-  transpilePackages: process.env.NODE_ENV !== 'production'
-    ? ['next-mdx-remote']
-    : undefined,
 }
 
-export default nextConfig
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: [remarkSmartypants, remarkMath, remarkGfm],
+    rehypePlugins: [
+      rehypeSlug,
+      [rehypeExternalLinks, { target: '_blank', rel: ['nofollow', 'noopener', 'noreferrer'] }],
+      rehypeAutolinkHeadings,
+      [rehypePrettyCode, {
+        theme: { light: 'github-light', dark: 'github-dark-dimmed' },
+        keepBackground: false,
+        lineNumbers: true,
+        filterMetaString: (metaString: string | undefined) => (metaString || '') + ' showLineNumbers',
+        grid: true,
+        onVisitLine(node: LineElement) {
+          if (node.children.length === 0) {
+            node.children = [{ type: 'text', value: ' ' }]
+          }
+        },
+        onVisitTitle(element: Element) {
+          const existingClassNames = Array.isArray(element.properties.className)
+            ? element.properties.className
+            : []
+          element.properties.className = [...existingClassNames, 'vscode-title']
+          element.children = [
+            {
+              type: 'element',
+              tagName: 'span',
+              properties: { className: ['vscode-dots'] },
+              children: [
+                { type: 'element', tagName: 'span', properties: { className: ['dot-red'] }, children: [] },
+                { type: 'element', tagName: 'span', properties: { className: ['dot-yellow'] }, children: [] },
+                { type: 'element', tagName: 'span', properties: { className: ['dot-green'] }, children: [] },
+              ],
+            },
+            element.children[0],
+          ]
+        },
+        transformers: [
+          transformerCopyButton({ visibility: 'hover', feedbackDuration: 2500 }),
+        ],
+      }],
+      rehypeKatex,
+    ],
+  },
+})
+
+export default withMDX(nextConfig)