docs: improve README for MDX setup

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);
+```