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