Add MDX components and layouts for legal pages

app/legal/privacy/layout.tsx

@@ -0,0 +1,9 @@
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-16">
+      <div className="prose-sm prose-neutral prose-a:text-accent-foreground/50">
+        {children}
+      </div>
+    </div>
+  )
+}

app/legal/privacy/page.tsx

@@ -1,9 +1,5 @@
-import MdContents from '@/components/md-contents'
-import { readFile } from '../action'
+import Privacy from '@/markdown/privacy.mdx'
 
-export default async function PrivacyPage() {
-  const res = await readFile('./public/legal', 'privacy.md')
-  const { fileContents } = await res.json()
-
-  return <MdContents content={fileContents} />
+export default function Page() {
+  return <Privacy />
 }

app/legal/terms/layout.tsx

@@ -0,0 +1,9 @@
+export default function MdxLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-16">
+      <div className="prose-sm prose-neutral prose-a:text-accent-foreground/50">
+        {children}
+      </div>
+    </div>
+  )
+}

app/legal/terms/page.tsx

@@ -1,9 +1,5 @@
-import MdContents from '@/components/md-contents'
-import { readFile } from '../action'
+import Terms from '@/markdown/terms.mdx'
 
-export default async function TermsOfUsePage() {
-  const res = await readFile('./public/legal', 'terms.md')
-  const { fileContents } = await res.json()
-
-  return <MdContents content={fileContents} />
+export default function Page() {
+  return <Terms />
 }

mdx-components.tsx

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

next.config.mjs

@@ -1,4 +1,9 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+import createMDX from '@next/mdx'
 
-export default nextConfig;
+const nextConfig = {
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx']
+}
+
+const withMDX = createMDX()
+
+export default withMDX(nextConfig)

package.json

@@ -12,6 +12,9 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^0.0.2",
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.2.2",
     "@prisma/client": "^5.12.1",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -25,6 +28,7 @@
     "@supabase/ssr": "^0.1.0",
     "@supabase/supabase-js": "^2.42.0",
     "@tailwindcss/typography": "^0.5.12",
+    "@types/mdx": "^2.0.13",
     "@vercel/analytics": "^1.2.2",
     "ai": "^3.0.14",
     "class-variance-authority": "^0.7.0",