chore: initial mdx integration

next.config.mjs

@@ -1,4 +1,15 @@
-/** @type {import('next').NextConfig} */
+import nextMDX from '@next/mdx'
-const nextConfig = {};
 
-export default nextConfig;
+const withMDX = nextMDX()
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Configure `pageExtensions` to include MDX files
+  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  experimental: {
+    // Use the mdx rust compiler
+    mdxRs: true,
+  },
+}
+
+export default withMDX(nextConfig)

package.json

@@ -22,10 +22,14 @@
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^9.6.0",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.2.5",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@react-spring/web": "^9.7.4",
+    "@types/mdx": "^2.0.13",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.408.0",

src/app/mdx-components.tsx

@@ -0,0 +1,7 @@
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}