mdx 글쓰기 시스템 구현

.prettierrc

@@ -36,5 +36,14 @@
     "^\\.(?:/|$)"
   ],
   "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
+  "importOrderSortSpecifiers": true,
+
+  "overrides": [
+    {
+      "files": ["*.md", "*.mdx"],
+      "options": {
+        "proseWrap": "preserve"
+      }
+    }
+  ]
 }

next.config.ts

@@ -10,6 +10,8 @@ const nextConfig: NextConfig = {
     process.env.NODE_ENV === "production"
       ? "https://Dobbymin.github.io"
       : "",
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
+  serverExternalPackages: ["gray-matter"],
 };
 
 export default nextConfig;

package.json

@@ -21,17 +21,25 @@
     ]
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^16.0.0",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-slot": "^1.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gh-pages": "^6.3.0",
+    "gray-matter": "^4.0.3",
     "lucide-react": "^0.507.0",
     "next": "15.3.1",
+    "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.6",
+    "prismjs": "^1.30.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rehype-prism-plus": "^2.0.1",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.2.0"
   },
@@ -40,6 +48,7 @@
     "@tailwindcss/postcss": "^4.1.5",
     "@tailwindcss/typography": "^0.5.16",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",