🕹️ feat: create remote markdown page

next.config.mjs

@@ -1,4 +1,10 @@
+import withMDX from '@next/mdx'
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
+const nextConfig = {
+  // Configure `pageExtensions` to include MDX files
+  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  // Optionally, add any other Next.js config below
+}
+
+export default withMDX()(nextConfig)

package.json

@@ -9,7 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.2.4",
+    "@types/mdx": "^2.0.13",
     "next": "14.2.4",
+    "next-mdx-remote": "^5.0.0",
     "react": "^18",
     "react-dom": "^18"
   },

src/app/remote/page.tsx

@@ -0,0 +1,8 @@
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+export default async function RemoteMdxPage() {
+  // MDX text - can be from a local file, database, CMS, fetch, anywhere...
+  const res = await fetch('https://raw.githubusercontent.com/restrainhalation/cw-the-book-of-devil-excerpt/main/README.md')
+  const markdown = await res.text()
+  return <MDXRemote source={markdown} />
+}