From 16b151f4a5f255022a0c6e4ee83ed1485fd0990c Mon Sep 17 00:00:00 2001
From: Yoann Fleury <yoann.fleury@yahoo.com>
Date: Fri, 26 Jan 2024 16:10:48 +0100
Subject: [PATCH] docs: improve README for MDX setup

---
 packages/typed-mdx/README.md | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/typed-mdx/README.md b/packages/typed-mdx/README.md
index cc4f346..74233da 100644
--- a/packages/typed-mdx/README.md
+++ b/packages/typed-mdx/README.md
@@ -10,9 +10,9 @@ other alternative to Astro Content Collection for Next.js.
 ## Installation
 
 ```bash
-npm install typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
-yarn add typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
-pnpm add typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
+npm install typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx remark-frontmatter
+yarn add typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx remark-frontmatter
+pnpm add typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx remark-frontmatter
 ```
 
 ## Usage
@@ -63,3 +63,32 @@ export default async function Page() {
   );
 }
 ```
+
+To show the MDX content, please note that it works with the `@next/mdx` package.
+Setup the `next.config.mjs`:
+
+```mjs
+// Only support ESM so next.config.mjs
+import remarkFrontmatter from "remark-frontmatter";
+import createMDX from "@next/mdx";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["typed-mdx"],
+  // Configure `pageExtensions` to include MDX files
+  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
+  // Do not use the mdxRs yet as it does not support the remarkFrontmatter removal
+  // experimental: {
+  //   mdxRs: true,
+  // },
+};
+
+const withMDX = createMDX({
+  options: {
+    // To remove frontmatter from rendering
+    remarkPlugins: [remarkFrontmatter],
+  },
+});
+
+export default withMDX(nextConfig);
+```