feat: add mdx file support and configuration (#12)

* feat: add mdx file support and configuration

Author: zjy365

app/[lang]/legal/index.module.css

@@ -0,0 +1,4 @@
+.blog_layout [data-toc] {
+  position: sticky;
+  padding-top: 100px !important;
+}

app/[lang]/legal/layout.tsx

@@ -0,0 +1,20 @@
+import Footer from '@/components/footer';
+import Header from '@/components/header';
+import { ReactNode } from 'react';
+import styles from './index.module.css';
+
+export default function BlogLayout({
+  params,
+  children,
+}: {
+  params: { lang: string };
+  children: ReactNode;
+}) {
+  return (
+    <div className={`h-full ${styles.blog_layout}`}>
+      <Header lang={params.lang} />
+      <div className="custom-container min-h-screen pt-14">{children}</div>
+      <Footer />
+    </div>
+  );
+}

app/[lang]/legal/page.mdx

@@ -0,0 +1 @@
+# Test

mdx-components.tsx

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

next.config.mjs

@@ -6,9 +6,10 @@ const withMDX = createMDX()
 const config = {
   output: 'standalone',
   reactStrictMode: true,
+  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
   images: {
     unoptimized: true,
   },
 }
 
-export default withMDX(config)
+export default withMDX(config)

package-lock.json

@@ -9,6 +9,9 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.2.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",