Use MDX in Next.js

blog/2025/mdx/2025-01-13-nextjs-mdx

MDX Series

Setup MDX in Next.js
How does MDX work with Next.js?
Content styling with @tailwind/typography
Math equations
Mermaid
Import another MDX file
Demo: Using Component in MDX
Using JSX in MDX
Access metadata in MDX

Setup MDX in Next.js

Install Dependencies

pnpm add @next/mdx

Configure next.config.ts

const withMDX = createMDX({
  extension: /\.mdx?$/,
})

export default withMDX(nextConfig)

Create mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

Create an MDX File

# Hello World

This is a test.

How does MDX work with Next.js?

Next.js provides a detail documentation about how to use MDX in MDX with Next.js.

There are 3 ways to use MDX in Next.js:

Static app(or page) routing page.mdx, works exactly like page.tsx
Dynamic page template app/blog/[...slug]/page.tsx
Render remote MDX using MDXRemote

The workflow Next.js handles mdx is just like how it handles tsx:

Next.js -> webpack -> loader -> mdx -> react components

The during the build process, Next.js will use remark plugins and rehype plugins to transform the mdx to react components.

remark: parse markdown/mdx to mdast
rehype: convert mdast to hast
remark and rehype plugins: transform the mdast and hast

MDX files are then compiled to React components and rendered on the page.

Option 1: Static app(or page) routing like `page.tsx`

This is the simplest way to use MDX in Next.js.

Create a new page in the app directory app/docs/static-mdx-page/page.mdx
Add the MDX content to the page. You can write it as plain markdown or even use React components. This is just like how you write a tsx file, but with markdown and component code.
The page will be rendered on the server side and the MDX content will be compiled to React components, and the page will be served as an HTML file. You can access the page at http://localhost:3000/docs/static-mdx-page, just like any other tsx page in Next.js.

Here the basic setting is to config mdx support in next.config.ts

// next.config.ts
const nextConfig: NextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
   ...
}

If you want to support GitHub Flavored Markdown, you can add the following plugins in remarkPlugins and rehypePlugins in next.config.ts

// next.config.ts
import configMdx from '@next/mdx'
// import moonlightTheme from './assets/moonlight-ii.json' with { type: 'json' };

/** @type {import('next').NextConfig} */
const withMDX = configMdx({
  options: {
    remarkPlugins: [
      ['remark-gfm'],
      ['remark-frontmatter'],
      ['remark-mdx-frontmatter'],
      ['remark-math'],
    ],
    rehypePlugins: [
      ['rehype-katex', { strict: true, throwOnError: true }],
      ['rehype-slug'],
      ['rehype-pretty-code', { keepBackground: true }],
    ],
  },
})

More or less, based on your requirement, you can add more plugins in remarkPlugins and rehypePlugins.

In your mdx file, you may need to use some components, you can define them in mdx-components.tsx and import them in your mdx file.

// mdx-components.tsx
import { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

See Next.js document on mdx for more details.

Option 2: Dynamic page template

Imagine having a single page that can transform into any blog post you want. It's like having a shape-shifting canvas that adapts to whatever content you throw at it. This is the power of dynamic pages in Next.js, and it's how we'll bring our MDX content to life.

Let's say we have a collection of MDX files living in data/blog/posts/*.mdx. Instead of creating a separate page for each post (which would be as tedious as writing a new book for each story), we create a single dynamic page that serves as our universal template.

Here's how this magic works:

First, we create a special page in the app directory: app/blog/[...slug]/page.tsx. The [...slug] part is like a wildcard – it tells Next.js "this page can be anything." It's similar to having a blank book where each page can tell a different story.
Next, we use generateStaticParams to tell Next.js which stories we want to tell. It's like creating a table of contents before writing the book. This function looks at all our MDX files and says "here are all the pages we need to create."
The real magic happens when we import our MDX file as a React component. It's like having a translator that can turn our markdown text into beautiful, interactive web pages.
We can enhance this further with MDXProvider, which is like giving our translator a dictionary of special words and components to use. This lets us customize how our content looks and behaves.
Visit http://localhost:3000/blog/my-first-post, and you'll see your MDX content transformed into a beautiful webpage. It's like watching a caterpillar emerge as a butterfly – the same content, but presented in a completely different form.

Here we utilizes the generateStaticParams to generate the static params for all the mdx files.

We can use fs to read all the mdx files in the data/blog/posts directory and turn them into a list of posts.

import fs from 'fs/promises'
import path from 'path'

const postsDirectory = path.join(process.cwd(), 'data/blog/posts')
const allPosts = await fs.readdir(postsDirectory)

export async function generateStaticParams() {
  return allPosts.map((post) => ({ slug: post.slug }))
}

Option 3: Remote MDX like MDXRemote

In the second option above, we use fs to read all the mdx files in the data/blog/posts directory and turn them into a list of posts. This happens at build time. The benefit is that the page is rendered at build time and is very fast. The downside is that every time we make a change to the mdx files, we need to re-build the project.

If you want to read the mdx files at runtime, you can use the third option. See Next.js remote mdx

import { MDXRemote } from 'next-mdx-remote/rsc'

const mdx = await fetch('https://example.com/my-mdx-file.mdx')
const content = await mdx.text()
<MDXRemote source={content} />

Content styling with `@tailwind/typography`

When you first start using Tailwind CSS with your MDX content, you might notice something unexpected: all your beautifully formatted markdown text suddenly looks plain and unstyled. It's like having a beautifully written letter but no nice stationery to present it on. This happens because of how MDX and Tailwind CSS interact.

Let's break down what's happening:

When MDX compiles your markdown, it converts simple markdown syntax into semantic HTML tags. For example:
- # Heading becomes <h1>Heading</h1>
- - List item becomes <li>List item</li>
- `code` becomes <code>code</code>
Tailwind CSS, in its quest for minimalism, strips away all default browser styles. This means those semantic HTML tags lose their traditional styling – headings no longer have different sizes, lists lose their bullets, and code blocks become plain text.

This creates a unique challenge: we have semantically correct HTML (which is great for accessibility and SEO), but we've lost the visual styling that makes content readable and engaging.

Enter @tailwind/typography – your typographic savior. Think of it as a master calligrapher who knows exactly how to present your content. It's a plugin that adds beautiful typographic styles to your HTML content, making your markdown text look polished and professional without any additional effort.

Here's how to bring this typographic magic to your MDX content:

First, install the plugin:

pnpm add -D @tailwindcss/typography

Then, add it to your Tailwind configuration:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    // ...other plugins
  ],
}

Finally, wrap your MDX content with the prose class:

<article className="prose">
  <MDXContent />
</article>

The prose class is like a magic spell that transforms your plain text into beautifully formatted content. It handles everything from proper spacing between paragraphs to elegant typography for headings, lists, and code blocks. It's as if you had a professional typesetter working on your content 24/7.

What makes @tailwind/typography special is its attention to detail. It doesn't just apply styles – it creates a harmonious reading experience. It adjusts line heights for better readability, adds proper spacing between elements, and ensures your content looks great at any screen size.

You can even customize the typography styles to match your brand. Want a different font size for headings? Different colors for links? It's all possible through Tailwind's configuration system. It's like having a wardrobe of typographic styles that you can mix and match to create the perfect look for your content.

Math equations

Mdx use remark-math to convert markdown math to katex. And use rehype-katex to convert katex to html. Or optionally you can use rehype-mathjax to convert math to mathjax. See Mdx Math Support

For Next.js with MDX support, configure the plugins in next.config.ts
For Katex, css needs to be imported in layout.tsx or mdx-components.tsx, see** ./src/app/docs/layout.tsx and ./src/mdx-components.tsx.

See Mdx Math Support

Simple inline math: $\sqrt{a^2 + b^2}$
Block math:

C_L = \frac{L}{q S}

Mermaid

GitHub supports Mermaid code blocks as follows:

```mermaid

```

However, Mermaid in MDX requires Playwright to build, which internally depends on Chromium, making it a heavy dependency. Currently, Contentlayer doesn't offer an ideal solution for supporting Mermaid in MDX.

For more information, check out:

mdx-mermaid, which uses Puppeteer to render Mermaid to SVG.
mermaid.js

NOTE

Updated: I've created a React component to render Mermaid in MDX. See Mermaid Support for MDX in Next.js.

Import another MDX file

WARNING

This is to be fixed. ContentLayer2 does not support ChildMDX file yet.

We can directly import the MDX file as a React component. Next.js use remark-mdx-frontmatter as the plugin to extract the frontmatter metadata from the MDX file.

Remember to add dependency to your package.json and add the plugin to remarkPlugins in next.config.ts.

import { default as ChildMDX, frontmatter as childFrontmatter } from './child.mdx'

childFrontmatter

This is the frontmatter metadata of the child page.

  <pre className="relative p-6 rounded-xl overflow-hidden bg-slate-100">
    {JSON.stringify(childFrontmatter, null, 2)}
  </pre>

  <p />

  <div className="relative p-6 rounded-xl overflow-hidden bg-slate-100">
    <ul className="list-inside list-disc space-y-2 pl-4">
      {Object.keys(childFrontmatter).map((key) => (
        <li className="text-gray-800 font-medium text-sm" key={key}>
          <span className="font-bold">{key}:</span> {childFrontmatter[key]}
        </li>
      ))}
    </ul>
  </div>

Child page content

<div className="relative overflow-hidden rounded-xl bg-slate-100 p-6">{/* <ChildMDX /> */}</div>

NOTE

The remark-mdx-frontmatter plugin, which is used to extract the frontmatter metadata from the MDX file, exports the metadata as frontmatter but it may conflict with the frontmatter in the current page. So we rename it to childFrontmatter to avoid conflict.

Demo: Using Component in MDX

Use MDXComponents within your MDX file:

First, create a React component:

// hello-mdx.tsx
export default function HelloMDX() {
  return (...);
}

Then, use it inside an MDX file:

### Demo: Show HelloMDX

<HelloMDX />

Hello MDX

This is a card component rendered from MDX with interactive components.

Using JSX in MDX

<div className="mx-auto mb-5 max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl">
  <div className="md:flex">
    <div className="md:shrink-0">
      <img
        className="h-48 w-full object-cover md:h-full md:w-48"
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9SRRmhH4X5N2e4QalcoxVbzYsD44C-sQv-w&s"
        alt="Modern building architecture"
      />
    </div>
    <div className="p-8">
      <div className="text-sm font-semibold uppercase tracking-wide text-indigo-500">
        Company Retreats
      </div>
      <a
        href="#"
        className="mt-1 block text-lg font-medium leading-tight text-black hover:underline"
      >
        Incredible accommodation for your team
      </a>
      <div className="mt-2 text-gray-500">
        Looking to take your team away on a retreat to enjoy awesome food and sunshine? We have a
        list of places for just that.
      </div>
    </div>
  </div>
</div>

Company Retreats

Incredible accommodation for your team

Looking to take your team away on a retreat to enjoy awesome food and sunshine? We have a list of places for just that.

Access metadata in MDX

In MDX files, you can access the current page's information through the props object. Here's what's available:

<div className="relative overflow-hidden rounded-xl bg-slate-100 p-6">
  <pre className="text-sm">{JSON.stringify(props, null, 2)}</pre>
</div>

The props object typically includes:

slug: The current page's URL path
frontmatter: The metadata from the frontmatter section
toc: Table of contents data
Other custom properties passed from your page component

You can use these values in your MDX content or pass them to components like we do with the MdxSeriesNav:

<MdxSeriesNav currentPost={props.path} />

Sample info for page metadata:

{
  "components": {},
  "title": "Use MDX in Next.js",
  "date": "2025-01-13T00:00:00.000Z",
  "tags": ["markdown", "github", "gfm", "mdx"],
  "summary": "This is a guide to build a documentation site with Next.js and MDX.",
  "images": ["/og?title=Use MDX in Next.js"],
  "authors": ["Lucas"],
  "body": {
    "raw": "\n## Page Information\n\nIn MDX files, you can access the current page's information through the `props` object. Here's what's available:\n\n```jsx\n<div className=\"relative p-6 rounded-xl overflow-hidden bg-slate-100\">\n <pre className=\"text-sm\">\n {JSON.stringify(props, null, 2)}\n </pre>\n</div>\n```\n\nThe `props` object typically includes:\n- `slug`: The current page's URL path\n- `frontmatter`: The metadata from the frontmatter section\n- `toc`: Table of contents data\n- Other custom properties passed from your page component\n\nYou can use these values in your MDX content or pass them to components like we do with the `MdxSeriesNav`:\n\n```jsx\n<MdxSeriesNav currentPost={props.slug} />\n```\n\n<div>{JSON.stringify(props)}</div>\n\n\n<MdxSeriesNav currentPost={props.slug} />\n\n<TOCInline toc={props.toc} toHeading={3} exclude=\"Introduction\" />\n\n## Setup MDX in Next.js\n\n1. Install Dependencies\n\n```bash\npnpm add @next/mdx\n```\n\n2. Configure `next.config.ts`\n\n```ts\nconst withMDX = createMDX({\n extension: /\\.mdx?$/,\n})\n\nexport default withMDX(nextConfig)\n```\n\n3. Create `mdx-components.tsx`\n\n```tsx\nimport type { MDXComponents } from 'mdx/types'\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n return {\n ...components,\n }\n}\n```\n\n4. Create an MDX File\n\n```mdx\n# Hello World\n\nThis is a test.\n```\n\n\n\n## How does MDX work with Next.js?\n\nNext.js provides a detail documentation about how to use MDX in [MDX with Next.js](https://nextjs.org/docs/app/building-your-application/configuring/mdx).\n\nThere are 3 ways to use MDX in Next.js:\n\n1. Static app(or page) routing `page.mdx`, works exactly like `page.tsx`\n2. Dynamic page template `app/blog/[...slug]/page.tsx`\n3. Render remote MDX using `MDXRemote`\n\nThe workflow Next.js handles mdx is just like how it handles tsx: \n```\nNext.js -> webpack -> loader -> mdx -> react components\n```\n\nThe during the build process, Next.js will use remark plugins and rehype plugins to transform the mdx to react components.\n\n- remark: parse markdown/mdx to mdast\n- rehype: convert mdast to hast\n- remark and rehype plugins: transform the mdast and hast\n\nMDX files are then compiled to React components and rendered on the page.\n\n\n### Option 1: Static app(or page) routing like `page.tsx`\n\nThis is the simplest way to use MDX in Next.js.\n\n1. Create a new page in the app directory `app/docs/static-mdx-page/page.mdx`\n2. Add the MDX content to the page. You can write it as plain markdown or even use React components. This is just like how you write a tsx file, but with markdown and component code.\n3. The page will be rendered on the server side and the MDX content will be compiled to React components, and the page will be served as an HTML file.\n You can access the page at `http://localhost:3000/docs/static-mdx-page`, just like any other tsx page in Next.js.\n\nHere the basic setting is to config `mdx` support in `next.config.ts`\n\n```ts\n// next.config.ts\nconst nextConfig: NextConfig = {\n pageExtensions: [\"ts\", \"tsx\", \"js\", \"jsx\", \"md\", \"mdx\"],\n ...\n}\n```\n\nIf you want to support GitHub Flavored Markdown, you can add the following plugins in `remarkPlugins` and `rehypePlugins` in `next.config.ts`\n\n```ts\n// next.config.ts\nimport configMdx from '@next/mdx'\n// import moonlightTheme from './assets/moonlight-ii.json' with { type: 'json' };\n\n/** @type {import('next').NextConfig} */\nconst withMDX = configMdx({\n options: {\n remarkPlugins: [\n ['remark-gfm'],\n ['remark-frontmatter'],\n ['remark-mdx-frontmatter'],\n ['remark-math'],\n ],\n rehypePlugins: [\n ['rehype-katex', { strict: true, throwOnError: true }],\n ['rehype-slug'],\n ['rehype-pretty-code', { keepBackground: true }],\n ],\n },\n})\n```\n\nMore or less, based on your requirement, you can add more plugins in `remarkPlugins` and `rehypePlugins`.\n\nIn your mdx file, you may need to use some components, you can define them in `mdx-components.tsx` and import them in your mdx file.\n\n```tsx\n// mdx-components.tsx\nimport { MDXComponents } from 'mdx/types'\n\nexport function useMDXComponents(components: MDXComponents): MDXComponents {\n return {\n ...components,\n }\n}\n```\n\nSee [Next.js document on mdx](https://nextjs.org/docs/app/building-your-application/configuring/mdx#mdx-components) for more details.\n\n### Option 2: Dynamic page template\n\nImagine having a single page that can transform into any blog post you want. It's like having a shape-shifting canvas that adapts to whatever content you throw at it. This is the power of dynamic pages in Next.js, and it's how we'll bring our MDX content to life.\n\nLet's say we have a collection of MDX files living in `data/blog/posts/*.mdx`. Instead of creating a separate page for each post (which would be as tedious as writing a new book for each story), we create a single dynamic page that serves as our universal template.\n\nHere's how this magic works:\n\n1. First, we create a special page in the app directory: `app/blog/[...slug]/page.tsx`. The `[...slug]` part is like a wildcard – it tells Next.js \"this page can be anything.\" It's similar to having a blank book where each page can tell a different story.\n\n2. Next, we use `generateStaticParams` to tell Next.js which stories we want to tell. It's like creating a table of contents before writing the book. This function looks at all our MDX files and says \"here are all the pages we need to create.\"\n\n3. The real magic happens when we import our MDX file as a React component. It's like having a translator that can turn our markdown text into beautiful, interactive web pages.\n\n4. We can enhance this further with `MDXProvider`, which is like giving our translator a dictionary of special words and components to use. This lets us customize how our content looks and behaves.\n\n5. Visit `http://localhost:3000/blog/my-first-post`, and you'll see your MDX content transformed into a beautiful webpage. It's like watching a caterpillar emerge as a butterfly – the same content, but presented in a completely different form.\n\nHere we utilizes the `generateStaticParams` to generate the static params for all the mdx files.\n\nWe can use `fs` to read all the mdx files in the `data/blog/posts` directory and turn them into a list of posts.\n\n```tsx\nimport fs from 'fs/promises'\nimport path from 'path'\n\nconst postsDirectory = path.join(process.cwd(), 'data/blog/posts')\nconst allPosts = await fs.readdir(postsDirectory)\n\nexport async function generateStaticParams() {\n return allPosts.map((post) => ({ slug: post.slug }))\n} \n``` \n\n\n### Option 3: Remote MDX like MDXRemote\n\nIn the second option above, we use `fs` to read all the mdx files in the `data/blog/posts` directory and turn them into a list of posts. This happens at build time. The benefit is that the page is rendered at build time and is very fast. The downside is that every time we make a change to the mdx files, we need to re-build the project.\n\nIf you want to read the mdx files at runtime, you can use the third option. See [Next.js remote mdx](https://nextjs.org/docs/app/building-your-application/configuring/mdx#remote-mdx)\n\n```tsx\nimport { MDXRemote } from 'next-mdx-remote/rsc'\n\nconst mdx = await fetch('https://example.com/my-mdx-file.mdx')\nconst content = await mdx.text() \n<MDXRemote source={content} />\n```\n\n\n## Content styling with `@tailwind/typography`\n\nWhen you first start using Tailwind CSS with your MDX content, you might notice something unexpected: all your beautifully formatted markdown text suddenly looks plain and unstyled. It's like having a beautifully written letter but no nice stationery to present it on. This happens because of how MDX and Tailwind CSS interact.\n\nLet's break down what's happening:\n\n1. When MDX compiles your markdown, it converts simple markdown syntax into semantic HTML tags. For example:\n - `# Heading` becomes `<h1>Heading</h1>`\n - `- List item` becomes `<li>List item</li>`\n - `` `code` `` becomes `<code>code</code>`\n\n2. Tailwind CSS, in its quest for minimalism, strips away all default browser styles. This means those semantic HTML tags lose their traditional styling – headings no longer have different sizes, lists lose their bullets, and code blocks become plain text.\n\nThis creates a unique challenge: we have semantically correct HTML (which is great for accessibility and SEO), but we've lost the visual styling that makes content readable and engaging.\n\nEnter `@tailwind/typography` – your typographic savior. Think of it as a master calligrapher who knows exactly how to present your content. It's a plugin that adds beautiful typographic styles to your HTML content, making your markdown text look polished and professional without any additional effort.\n\nHere's how to bring this typographic magic to your MDX content:\n\n1. First, install the plugin:\n```bash\npnpm add -D @tailwindcss/typography\n```\n\n2. Then, add it to your Tailwind configuration:\n```js\n// tailwind.config.js\nmodule.exports = {\n // ...\n plugins: [\n require('@tailwindcss/typography'),\n // ...other plugins\n ],\n}\n```\n\n3. Finally, wrap your MDX content with the `prose` class:\n```jsx\n<article className=\"prose\">\n <MDXContent />\n</article>\n```\n\nThe `prose` class is like a magic spell that transforms your plain text into beautifully formatted content. It handles everything from proper spacing between paragraphs to elegant typography for headings, lists, and code blocks. It's as if you had a professional typesetter working on your content 24/7.\n\nWhat makes `@tailwind/typography` special is its attention to detail. It doesn't just apply styles – it creates a harmonious reading experience. It adjusts line heights for better readability, adds proper spacing between elements, and ensures your content looks great at any screen size.\n\nYou can even customize the typography styles to match your brand. Want a different font size for headings? Different colors for links? It's all possible through Tailwind's configuration system. It's like having a wardrobe of typographic styles that you can mix and match to create the perfect look for your content.\n\n## Math equations\n\nMdx use `remark-math` to convert markdown math to katex. And use `rehype-katex` to convert katex to html. Or optionally you can use `rehype-mathjax` to convert math to mathjax. See [Mdx Math Support](https://mdxjs.com/guides/math/)\n\n- For Next.js with MDX support, configure the plugins in `next.config.ts`\n- For Katex, `css` needs to be imported in `layout.tsx` or `mdx-components.tsx`, see\\*\\* `./src/app/docs/layout.tsx` and `./src/mdx-components.tsx`.\n\nSee [Mdx Math Support](https://mdxjs.com/guides/math/)\n\n- Simple inline math: $$\\sqrt{a^2 + b^2}$$\n- Block math:\n\n```math\nC_L = \\frac{L}{q S}\n```\n\n\n## Mermaid\n\nGitHub supports Mermaid code blocks as follows:\n\n````markdown showLineNumbers=false\n```mermaid\n\n```\n````\n\nHowever, Mermaid in MDX requires Playwright to build, which internally depends on Chromium, making it a heavy dependency. Currently, Contentlayer doesn't offer an ideal solution for supporting Mermaid in MDX.\n\nFor more information, check out:\n\n- [mdx-mermaid](https://sjwall.github.io/mdx-mermaid/docs/intro/), which uses Puppeteer to render Mermaid to SVG.\n- [mermaid.js](https://mermaid.js.org/intro/getting-started.html)\n\n---\n\n> [!NOTE]\n> Updated: I've created a React component to render Mermaid in MDX. See [Mermaid Support for MDX in Next.js](/blog/2025/mdx/2025-03-04-mermaid-mdx).\n\n## Import another MDX file\n\n> [!WARNING]\n> This is to be fixed. ContentLayer2 does not support ChildMDX file yet.\n\nWe can directly import the MDX file as a React component. Next.js use [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) as the plugin to extract the frontmatter metadata from the MDX file.\n\nRemember to add dependency to your `package.json` and add the plugin to `remarkPlugins` in `next.config.ts`.\n\n```tsx\nimport { default as ChildMDX, frontmatter as childFrontmatter } from './child.mdx'\n```\n\n#### **childFrontmatter**\n\nThis is the frontmatter metadata of the child page.\n\n```tsx\n <pre className=\"relative p-6 rounded-xl overflow-hidden bg-slate-100\">\n {JSON.stringify(childFrontmatter, null, 2)}\n </pre>\n\n <p />\n\n <div className=\"relative p-6 rounded-xl overflow-hidden bg-slate-100\">\n <ul className=\"list-inside list-disc space-y-2 pl-4\">\n {Object.keys(childFrontmatter).map((key) => (\n <li className=\"text-gray-800 font-medium text-sm\" key={key}>\n <span className=\"font-bold\">{key}:</span> {childFrontmatter[key]}\n </li>\n ))}\n </ul>\n </div>\n```\n\n#### **Child page content**\n\n```tsx\n<div className=\"relative overflow-hidden rounded-xl bg-slate-100 p-6\">{/* <ChildMDX /> */}</div>\n```\n\n> [!NOTE]\n> The `remark-mdx-frontmatter` plugin, which is used to extract the frontmatter metadata from the MDX file, exports the metadata as `frontmatter`\n> but it may conflict with the `frontmatter` in the current page. So we rename it to `childFrontmatter` to avoid conflict.\n\n\n\n## Demo: Using Component in MDX\n\nUse MDXComponents within your MDX file:\n\n- First, create a React component:\n\n```tsx\n// hello-mdx.tsx\nexport default function HelloMDX() {\n return (...);\n}\n```\n\n- Then, use it inside an MDX file:\n\n```mdx\n### Demo: Show HelloMDX\n\n<HelloMDX />\n```\n\n<HelloMDX />\n\n## Using JSX in MDX\n\n```jsx\n<div className=\"mx-auto mb-5 max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl\">\n <div className=\"md:flex\">\n <div className=\"md:shrink-0\">\n <img\n className=\"h-48 w-full object-cover md:h-full md:w-48\"\n src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9SRRmhH4X5N2e4QalcoxVbzYsD44C-sQv-w&s\"\n alt=\"Modern building architecture\"\n />\n </div>\n <div className=\"p-8\">\n <div className=\"text-sm font-semibold uppercase tracking-wide text-indigo-500\">\n Company Retreats\n </div>\n <a\n href=\"#\"\n className=\"mt-1 block text-lg font-medium leading-tight text-black hover:underline\"\n >\n Incredible accommodation for your team\n </a>\n <div className=\"mt-2 text-gray-500\">\n Looking to take your team away on a retreat to enjoy awesome food and sunshine? We have a\n list of places for just that.\n </div>\n </div>\n </div>\n</div>\n```\n\n<br />\n\n<div className=\"mx-auto mb-5 max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl\">\n <div className=\"md:flex\">\n <div className=\"md:shrink-0\">\n <img\n className=\"h-48 w-full object-cover md:h-full md:w-48\"\n src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9SRRmhH4X5N2e4QalcoxVbzYsD44C-sQv-w&s\"\n alt=\"Modern building architecture\"\n />\n </div>\n <div className=\"p-8\">\n <div className=\"text-sm font-semibold uppercase tracking-wide text-indigo-500\">\n Company Retreats\n </div>\n <a\n href=\"#\"\n className=\"mt-1 block text-lg font-medium leading-tight text-black hover:underline\"\n >\n Incredible accommodation for your team\n </a>\n <div className=\"mt-2 text-gray-500\">\n Looking to take your team away on a retreat to enjoy awesome food and sunshine? We have a\n list of places for just that.\n </div>\n </div>\n </div>\n</div>",
    "code": "var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),w=(a,n)=>{for(var s in n)c(a,s,{get:n[s],enumerable:!0})},r=(a,n,s,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let l of N(n))!g.call(a,l)&&l!==s&&c(a,l,{get:()=>n[l],enumerable:!(t=u(n,l))||t.enumerable});return a};var b=(a,n,s)=>(s=a!=null?m(k(a)):{},r(n||!a||!a.__esModule?c(s,\"default\",{value:a,enumerable:!0}):s,a)),y=a=>r(c({},\"__esModule\",{value:!0}),a);var d=x((j,o)=>{o.exports=_jsx_runtime});var v={};w(v,{default:()=>h,frontmatter:()=>f});var e=b(d()),f={title:\"Use MDX in Next.js\",summary:\"This is a guide to build a documentation site with Next.js and MDX.\",date:\"2025-01-13\",images:[\"/og?title=Use MDX in Next.js\"],authors:[\"Lucas\"],tags:[\"markdown\",\"github\",\"gfm\",\"mdx\"]};function p(a){let n={a:\"a\",annotation:\"annotation\",code:\"code\",div:\"div\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",math:\"math\",mfrac:\"mfrac\",mi:\"mi\",mn:\"mn\",mo:\"mo\",mrow:\"mrow\",msqrt:\"msqrt\",msub:\"msub\",msup:\"msup\",ol:\"ol\",p:\"p\",path:\"path\",pre:\"pre\",semantics:\"semantics\",span:\"span\",strong:\"strong\",svg:\"svg\",ul:\"ul\",...a.components},{HelloMDX:s,MdxSeriesNav:t,TOCInline:l}=n;return s||i(\"HelloMDX\",!0),t||i(\"MdxSeriesNav\",!0),l||i(\"TOCInline\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"page-information\",children:[(0,e.jsx)(n.a,{href:\"#page-information\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Page Information\"]}),(0,e.jsxs)(n.p,{children:[\"In MDX files, you can access the current page's information through the \",(0,e.jsx)(n.code,{children:\"props\"}),\" object. Here's what's available:\"]}),(0,e.jsx)(n.pre,{className:\"language-jsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-jsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"relative p-6 rounded-xl overflow-hidden bg-slate-100\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"pre\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"text-sm\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),(0,e.jsx)(n.span,{className:\"token class-name known-class-name\",children:\"JSON\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"stringify\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"props\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword nil null\",children:\"null\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token number\",children:\"2\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"pre\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]})]})}),(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"props\"}),\" object typically includes:\"]}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"slug\"}),\": The current page's URL path\"]}),(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"frontmatter\"}),\": The metadata from the frontmatter section\"]}),(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"toc\"}),\": Table of contents data\"]}),(0,e.jsx)(n.li,{children:\"Other custom properties passed from your page component\"})]}),(0,e.jsxs)(n.p,{children:[\"You can use these values in your MDX content or pass them to components like we do with the \",(0,e.jsx)(n.code,{children:\"MdxSeriesNav\"}),\":\"]}),(0,e.jsx)(n.pre,{className:\"language-jsx\",children:(0,e.jsx)(n.code,{className:\"code-highlight language-jsx\",children:(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),(0,e.jsx)(n.span,{className:\"token class-name\",children:\"MdxSeriesNav\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"currentPost\"}),(0,e.jsxs)(n.span,{className:\"token language-javascript script\",children:[(0,e.jsx)(n.span,{className:\"token punctuation script-punctuation\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\"props\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token property-access\",children:\"slug\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]})})}),(0,e.jsx)(\"div\",{children:JSON.stringify(a)}),\" \",(0,e.jsx)(t,{currentPost:a.slug}),(0,e.jsx)(l,{toc:a.toc,toHeading:3,exclude:\"Introduction\"}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"setup-mdx-in-nextjs\",children:[(0,e.jsx)(n.a,{href:\"#setup-mdx-in-nextjs\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Setup MDX in Next.js\"]}),(0,e.jsx)(n.ol,{children:(0,e.jsx)(n.li,{children:\"Install Dependencies\"})}),(0,e.jsx)(n.pre,{className:\"language-bash\",children:(0,e.jsx)(n.code,{className:\"code-highlight language-bash\",children:(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token function\",children:\"pnpm\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"add\"}),` @next/mdx\n`]})})}),(0,e.jsx)(n.ol,{start:\"2\",children:(0,e.jsxs)(n.li,{children:[\"Configure \",(0,e.jsx)(n.code,{children:\"next.config.ts\"})]})}),(0,e.jsx)(n.pre,{className:\"language-ts\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-ts\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"const\"}),\" withMDX \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"createMDX\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[\" extension\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsxs)(n.span,{className:\"token regex\",children:[(0,e.jsx)(n.span,{className:\"token regex-delimiter\",children:\"/\"}),(0,e.jsxs)(n.span,{className:\"token language-regex regex-source\",children:[(0,e.jsx)(n.span,{className:\"token escape special-escape\",children:\"\\\\.\"}),\"mdx\",(0,e.jsx)(n.span,{className:\"token number quantifier\",children:\"?\"}),(0,e.jsx)(n.span,{className:\"token function anchor\",children:\"$\"})]}),(0,e.jsx)(n.span,{className:\"token regex-delimiter\",children:\"/\"})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"4\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"export\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"default\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"withMDX\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"nextConfig\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),`\n`]})]})}),(0,e.jsx)(n.ol,{start:\"3\",children:(0,e.jsxs)(n.li,{children:[\"Create \",(0,e.jsx)(n.code,{children:\"mdx-components.tsx\"})]})}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-tsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"import\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"type\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"from\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'mdx/types'\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"2\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"export\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"function\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"useMDXComponents\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"components\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"return\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[\" \",(0,e.jsx)(n.span,{className:\"token operator spread\",children:\"...\"}),\"components\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"6\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"7\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),(0,e.jsx)(n.ol,{start:\"4\",children:(0,e.jsx)(n.li,{children:\"Create an MDX File\"})}),(0,e.jsx)(n.pre,{children:(0,e.jsxs)(n.code,{className:\"code-highlight language-mdx\",children:[(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"1\",children:`# Hello World\n`}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"2\",children:`\n`}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"3\",children:`This is a test.\n`})]})}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"how-does-mdx-work-with-nextjs\",children:[(0,e.jsx)(n.a,{href:\"#how-does-mdx-work-with-nextjs\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"How does MDX work with Next.js?\"]}),(0,e.jsxs)(n.p,{children:[\"Next.js provides a detail documentation about how to use MDX in \",(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs/app/building-your-application/configuring/mdx\",children:\"MDX with Next.js\"}),\".\"]}),(0,e.jsx)(n.p,{children:\"There are 3 ways to use MDX in Next.js:\"}),(0,e.jsxs)(n.ol,{children:[(0,e.jsxs)(n.li,{children:[\"Static app(or page) routing \",(0,e.jsx)(n.code,{children:\"page.mdx\"}),\", works exactly like \",(0,e.jsx)(n.code,{children:\"page.tsx\"})]}),(0,e.jsxs)(n.li,{children:[\"Dynamic page template \",(0,e.jsx)(n.code,{children:\"app/blog/[...slug]/page.tsx\"})]}),(0,e.jsxs)(n.li,{children:[\"Render remote MDX using \",(0,e.jsx)(n.code,{children:\"MDXRemote\"})]})]}),(0,e.jsx)(n.p,{children:\"The workflow Next.js handles mdx is just like how it handles tsx:\"}),(0,e.jsx)(n.pre,{className:\"language-js\",children:(0,e.jsx)(n.code,{className:\"code-highlight language-js\",children:(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"Next\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token property-access\",children:\"js\"}),\" \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"-\"}),(0,e.jsx)(n.span,{className:\"token operator\",children:\">\"}),\" webpack \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"-\"}),(0,e.jsx)(n.span,{className:\"token operator\",children:\">\"}),\" loader \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"-\"}),(0,e.jsx)(n.span,{className:\"token operator\",children:\">\"}),\" mdx \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"-\"}),(0,e.jsx)(n.span,{className:\"token operator\",children:\">\"}),` react components\n`]})})}),(0,e.jsx)(n.p,{children:\"The during the build process, Next.js will use remark plugins and rehype plugins to transform the mdx to react components.\"}),(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:\"remark: parse markdown/mdx to mdast\"}),(0,e.jsx)(n.li,{children:\"rehype: convert mdast to hast\"}),(0,e.jsx)(n.li,{children:\"remark and rehype plugins: transform the mdast and hast\"})]}),(0,e.jsx)(n.p,{children:\"MDX files are then compiled to React components and rendered on the page.\"}),(0,e.jsxs)(n.h3,{className:\"content-header\",id:\"option-1-static-appor-page-routing-like-pagetsx\",children:[(0,e.jsx)(n.a,{href:\"#option-1-static-appor-page-routing-like-pagetsx\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Option 1: Static app(or page) routing like \",(0,e.jsx)(n.code,{children:\"page.tsx\"})]}),(0,e.jsx)(n.p,{children:\"This is the simplest way to use MDX in Next.js.\"}),(0,e.jsxs)(n.ol,{children:[(0,e.jsxs)(n.li,{children:[\"Create a new page in the app directory \",(0,e.jsx)(n.code,{children:\"app/docs/static-mdx-page/page.mdx\"})]}),(0,e.jsx)(n.li,{children:\"Add the MDX content to the page. You can write it as plain markdown or even use React components. This is just like how you write a tsx file, but with markdown and component code.\"}),(0,e.jsxs)(n.li,{children:[\"The page will be rendered on the server side and the MDX content will be compiled to React components, and the page will be served as an HTML file. You can access the page at \",(0,e.jsx)(n.code,{children:\"http://localhost:3000/docs/static-mdx-page\"}),\", just like any other tsx page in Next.js.\"]})]}),(0,e.jsxs)(n.p,{children:[\"Here the basic setting is to config \",(0,e.jsx)(n.code,{children:\"mdx\"}),\" support in \",(0,e.jsx)(n.code,{children:\"next.config.ts\"})]}),(0,e.jsx)(n.pre,{className:\"language-ts\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-ts\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token comment\",children:\"// next.config.ts\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"const\"}),\" nextConfig\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" NextConfig \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[\" pageExtensions\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:'\"ts\"'}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:'\"tsx\"'}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:'\"js\"'}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:'\"jsx\"'}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:'\"md\"'}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:'\"mdx\"'}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[\" \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"...\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),(0,e.jsxs)(n.p,{children:[\"If you want to support GitHub Flavored Markdown, you can add the following plugins in \",(0,e.jsx)(n.code,{children:\"remarkPlugins\"}),\" and \",(0,e.jsx)(n.code,{children:\"rehypePlugins\"}),\" in \",(0,e.jsx)(n.code,{children:\"next.config.ts\"})]}),(0,e.jsx)(n.pre,{className:\"language-ts\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-ts\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token comment\",children:\"// next.config.ts\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"import\"}),\" configMdx \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"from\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'@next/mdx'\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token comment\",children:\"// import moonlightTheme from './assets/moonlight-ii.json' with { type: 'json' };\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"4\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[(0,e.jsx)(n.span,{className:\"token comment\",children:\"/** @type {import('next').NextConfig} */\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"6\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"const\"}),\" withMDX \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"configMdx\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"7\",children:[\" options\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"8\",children:[\" remarkPlugins\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"9\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'remark-gfm'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"10\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'remark-frontmatter'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"11\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'remark-mdx-frontmatter'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"12\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'remark-math'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"13\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"14\",children:[\" rehypePlugins\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"15\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'rehype-katex'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\" strict\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token boolean\",children:\"true\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" throwOnError\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token boolean\",children:\"true\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"16\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'rehype-slug'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"17\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'rehype-pretty-code'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\" keepBackground\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token boolean\",children:\"true\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"18\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"19\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"20\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),`\n`]})]})}),(0,e.jsxs)(n.p,{children:[\"More or less, based on your requirement, you can add more plugins in \",(0,e.jsx)(n.code,{children:\"remarkPlugins\"}),\" and \",(0,e.jsx)(n.code,{children:\"rehypePlugins\"}),\".\"]}),(0,e.jsxs)(n.p,{children:[\"In your mdx file, you may need to use some components, you can define them in \",(0,e.jsx)(n.code,{children:\"mdx-components.tsx\"}),\" and import them in your mdx file.\"]}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-tsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token comment\",children:\"// mdx-components.tsx\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"import\"}),\" \",(0,e.jsxs)(n.span,{className:\"token imports\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"from\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'mdx/types'\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"3\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"export\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"function\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"useMDXComponents\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"components\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"MDXComponents\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"return\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"6\",children:[\" \",(0,e.jsx)(n.span,{className:\"token operator spread\",children:\"...\"}),\"components\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"7\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"8\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),(0,e.jsxs)(n.p,{children:[\"See \",(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs/app/building-your-application/configuring/mdx#mdx-components\",children:\"Next.js document on mdx\"}),\" for more details.\"]}),(0,e.jsxs)(n.h3,{className:\"content-header\",id:\"option-2-dynamic-page-template\",children:[(0,e.jsx)(n.a,{href:\"#option-2-dynamic-page-template\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Option 2: Dynamic page template\"]}),(0,e.jsx)(n.p,{children:\"Imagine having a single page that can transform into any blog post you want. It's like having a shape-shifting canvas that adapts to whatever content you throw at it. This is the power of dynamic pages in Next.js, and it's how we'll bring our MDX content to life.\"}),(0,e.jsxs)(n.p,{children:[\"Let's say we have a collection of MDX files living in \",(0,e.jsx)(n.code,{children:\"data/blog/posts/*.mdx\"}),\". Instead of creating a separate page for each post (which would be as tedious as writing a new book for each story), we create a single dynamic page that serves as our universal template.\"]}),(0,e.jsx)(n.p,{children:\"Here's how this magic works:\"}),(0,e.jsxs)(n.ol,{children:[(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.p,{children:[\"First, we create a special page in the app directory: \",(0,e.jsx)(n.code,{children:\"app/blog/[...slug]/page.tsx\"}),\". The \",(0,e.jsx)(n.code,{children:\"[...slug]\"}),` part is like a wildcard \\u2013 it tells Next.js \"this page can be anything.\" It's similar to having a blank book where each page can tell a different story.`]})}),(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.p,{children:[\"Next, we use \",(0,e.jsx)(n.code,{children:\"generateStaticParams\"}),` to tell Next.js which stories we want to tell. It's like creating a table of contents before writing the book. This function looks at all our MDX files and says \"here are all the pages we need to create.\"`]})}),(0,e.jsx)(n.li,{children:(0,e.jsx)(n.p,{children:\"The real magic happens when we import our MDX file as a React component. It's like having a translator that can turn our markdown text into beautiful, interactive web pages.\"})}),(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.p,{children:[\"We can enhance this further with \",(0,e.jsx)(n.code,{children:\"MDXProvider\"}),\", which is like giving our translator a dictionary of special words and components to use. This lets us customize how our content looks and behaves.\"]})}),(0,e.jsx)(n.li,{children:(0,e.jsxs)(n.p,{children:[\"Visit \",(0,e.jsx)(n.code,{children:\"http://localhost:3000/blog/my-first-post\"}),\", and you'll see your MDX content transformed into a beautiful webpage. It's like watching a caterpillar emerge as a butterfly \\u2013 the same content, but presented in a completely different form.\"]})})]}),(0,e.jsxs)(n.p,{children:[\"Here we utilizes the \",(0,e.jsx)(n.code,{children:\"generateStaticParams\"}),\" to generate the static params for all the mdx files.\"]}),(0,e.jsxs)(n.p,{children:[\"We can use \",(0,e.jsx)(n.code,{children:\"fs\"}),\" to read all the mdx files in the \",(0,e.jsx)(n.code,{children:\"data/blog/posts\"}),\" directory and turn them into a list of posts.\"]}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-tsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"import\"}),\" \",(0,e.jsx)(n.span,{className:\"token imports\",children:\"fs\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"from\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'fs/promises'\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"import\"}),\" \",(0,e.jsx)(n.span,{className:\"token imports\",children:\"path\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"from\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'path'\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"3\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"const\"}),\" postsDirectory \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" path\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"join\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"process\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"cwd\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'data/blog/posts'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"const\"}),\" allPosts \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"await\"}),\" fs\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"readdir\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"postsDirectory\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"6\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"7\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"export\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"async\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"function\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"generateStaticParams\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"8\",children:[\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"return\"}),\" allPosts\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"map\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"post\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,e.jsx)(n.span,{className:\"token operator arrow\",children:\"=>\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\" slug\",(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" post\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token property-access\",children:\"slug\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"9\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),` \n`]})]})}),(0,e.jsxs)(n.h3,{className:\"content-header\",id:\"option-3-remote-mdx-like-mdxremote\",children:[(0,e.jsx)(n.a,{href:\"#option-3-remote-mdx-like-mdxremote\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Option 3: Remote MDX like MDXRemote\"]}),(0,e.jsxs)(n.p,{children:[\"In the second option above, we use \",(0,e.jsx)(n.code,{children:\"fs\"}),\" to read all the mdx files in the \",(0,e.jsx)(n.code,{children:\"data/blog/posts\"}),\" directory and turn them into a list of posts. This happens at build time. The benefit is that the page is rendered at build time and is very fast. The downside is that every time we make a change to the mdx files, we need to re-build the project.\"]}),(0,e.jsxs)(n.p,{children:[\"If you want to read the mdx files at runtime, you can use the third option. See \",(0,e.jsx)(n.a,{href:\"https://nextjs.org/docs/app/building-your-application/configuring/mdx#remote-mdx\",children:\"Next.js remote mdx\"})]}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-tsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"import\"}),\" \",(0,e.jsxs)(n.span,{className:\"token imports\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"MDXRemote\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"from\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'next-mdx-remote/rsc'\"}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"2\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"const\"}),\" mdx \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"await\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"fetch\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'https://example.com/my-mdx-file.mdx'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"const\"}),\" content \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"await\"}),\" mdx\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"text\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),` \n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),(0,e.jsx)(n.span,{className:\"token class-name\",children:\"MDXRemote\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"source\"}),(0,e.jsxs)(n.span,{className:\"token language-javascript script\",children:[(0,e.jsx)(n.span,{className:\"token punctuation script-punctuation\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\"content\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]})]})}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"content-styling-with-tailwindtypography\",children:[(0,e.jsx)(n.a,{href:\"#content-styling-with-tailwindtypography\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Content styling with \",(0,e.jsx)(n.code,{children:\"@tailwind/typography\"})]}),(0,e.jsx)(n.p,{children:\"When you first start using Tailwind CSS with your MDX content, you might notice something unexpected: all your beautifully formatted markdown text suddenly looks plain and unstyled. It's like having a beautifully written letter but no nice stationery to present it on. This happens because of how MDX and Tailwind CSS interact.\"}),(0,e.jsx)(n.p,{children:\"Let's break down what's happening:\"}),(0,e.jsxs)(n.ol,{children:[(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.p,{children:\"When MDX compiles your markdown, it converts simple markdown syntax into semantic HTML tags. For example:\"}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"# Heading\"}),\" becomes \",(0,e.jsx)(n.code,{children:\"<h1>Heading</h1>\"})]}),(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"- List item\"}),\" becomes \",(0,e.jsx)(n.code,{children:\"<li>List item</li>\"})]}),(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:\"`code`\"}),\" becomes \",(0,e.jsx)(n.code,{children:\"<code>code</code>\"})]})]})]}),(0,e.jsx)(n.li,{children:(0,e.jsx)(n.p,{children:\"Tailwind CSS, in its quest for minimalism, strips away all default browser styles. This means those semantic HTML tags lose their traditional styling \\u2013 headings no longer have different sizes, lists lose their bullets, and code blocks become plain text.\"})})]}),(0,e.jsx)(n.p,{children:\"This creates a unique challenge: we have semantically correct HTML (which is great for accessibility and SEO), but we've lost the visual styling that makes content readable and engaging.\"}),(0,e.jsxs)(n.p,{children:[\"Enter \",(0,e.jsx)(n.code,{children:\"@tailwind/typography\"}),\" \\u2013 your typographic savior. Think of it as a master calligrapher who knows exactly how to present your content. It's a plugin that adds beautiful typographic styles to your HTML content, making your markdown text look polished and professional without any additional effort.\"]}),(0,e.jsx)(n.p,{children:\"Here's how to bring this typographic magic to your MDX content:\"}),(0,e.jsx)(n.ol,{children:(0,e.jsx)(n.li,{children:\"First, install the plugin:\"})}),(0,e.jsx)(n.pre,{className:\"language-bash\",children:(0,e.jsx)(n.code,{className:\"code-highlight language-bash\",children:(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token function\",children:\"pnpm\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"add\"}),\" \",(0,e.jsx)(n.span,{className:\"token parameter variable\",children:\"-D\"}),` @tailwindcss/typography\n`]})})}),(0,e.jsx)(n.ol,{start:\"2\",children:(0,e.jsx)(n.li,{children:\"Then, add it to your Tailwind configuration:\"})}),(0,e.jsx)(n.pre,{className:\"language-js\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-js\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token comment\",children:\"// tailwind.config.js\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[\"module\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token property-access\",children:\"exports\"}),\" \",(0,e.jsx)(n.span,{className:\"token operator\",children:\"=\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[\" \",(0,e.jsx)(n.span,{className:\"token comment\",children:\"// ...\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[\" \",(0,e.jsx)(n.span,{className:\"token literal-property property\",children:\"plugins\"}),(0,e.jsx)(n.span,{className:\"token operator\",children:\":\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"require\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token string\",children:\"'@tailwindcss/typography'\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"6\",children:[\" \",(0,e.jsx)(n.span,{className:\"token comment\",children:\"// ...other plugins\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"7\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"8\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),(0,e.jsx)(n.ol,{start:\"3\",children:(0,e.jsxs)(n.li,{children:[\"Finally, wrap your MDX content with the \",(0,e.jsx)(n.code,{children:\"prose\"}),\" class:\"]})}),(0,e.jsx)(n.pre,{className:\"language-jsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-jsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"article\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"prose\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),(0,e.jsx)(n.span,{className:\"token class-name\",children:\"MDXContent\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"/>\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"article\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]})]})}),(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"prose\"}),\" class is like a magic spell that transforms your plain text into beautifully formatted content. It handles everything from proper spacing between paragraphs to elegant typography for headings, lists, and code blocks. It's as if you had a professional typesetter working on your content 24/7.\"]}),(0,e.jsxs)(n.p,{children:[\"What makes \",(0,e.jsx)(n.code,{children:\"@tailwind/typography\"}),\" special is its attention to detail. It doesn't just apply styles \\u2013 it creates a harmonious reading experience. It adjusts line heights for better readability, adds proper spacing between elements, and ensures your content looks great at any screen size.\"]}),(0,e.jsx)(n.p,{children:\"You can even customize the typography styles to match your brand. Want a different font size for headings? Different colors for links? It's all possible through Tailwind's configuration system. It's like having a wardrobe of typographic styles that you can mix and match to create the perfect look for your content.\"}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"math-equations\",children:[(0,e.jsx)(n.a,{href:\"#math-equations\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Math equations\"]}),(0,e.jsxs)(n.p,{children:[\"Mdx use \",(0,e.jsx)(n.code,{children:\"remark-math\"}),\" to convert markdown math to katex. And use \",(0,e.jsx)(n.code,{children:\"rehype-katex\"}),\" to convert katex to html. Or optionally you can use \",(0,e.jsx)(n.code,{children:\"rehype-mathjax\"}),\" to convert math to mathjax. See \",(0,e.jsx)(n.a,{href:\"https://mdxjs.com/guides/math/\",children:\"Mdx Math Support\"})]}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:[\"For Next.js with MDX support, configure the plugins in \",(0,e.jsx)(n.code,{children:\"next.config.ts\"})]}),(0,e.jsxs)(n.li,{children:[\"For Katex, \",(0,e.jsx)(n.code,{children:\"css\"}),\" needs to be imported in \",(0,e.jsx)(n.code,{children:\"layout.tsx\"}),\" or \",(0,e.jsx)(n.code,{children:\"mdx-components.tsx\"}),\", see** \",(0,e.jsx)(n.code,{children:\"./src/app/docs/layout.tsx\"}),\" and \",(0,e.jsx)(n.code,{children:\"./src/mdx-components.tsx\"}),\".\"]})]}),(0,e.jsxs)(n.p,{children:[\"See \",(0,e.jsx)(n.a,{href:\"https://mdxjs.com/guides/math/\",children:\"Mdx Math Support\"})]}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:[\"Simple inline math: \",(0,e.jsxs)(n.span,{className:\"katex\",translate:\"no\",children:[(0,e.jsx)(n.span,{className:\"katex-mathml\",children:(0,e.jsx)(n.math,{xmlns:\"http://www.w3.org/1998/Math/MathML\",children:(0,e.jsxs)(n.semantics,{children:[(0,e.jsx)(n.mrow,{children:(0,e.jsx)(n.msqrt,{children:(0,e.jsxs)(n.mrow,{children:[(0,e.jsxs)(n.msup,{children:[(0,e.jsx)(n.mi,{children:\"a\"}),(0,e.jsx)(n.mn,{children:\"2\"})]}),(0,e.jsx)(n.mo,{children:\"+\"}),(0,e.jsxs)(n.msup,{children:[(0,e.jsx)(n.mi,{children:\"b\"}),(0,e.jsx)(n.mn,{children:\"2\"})]})]})})}),(0,e.jsx)(n.annotation,{encoding:\"application/x-tex\",children:\"\\\\sqrt{a^2 + b^2}\"})]})})}),(0,e.jsx)(n.span,{className:\"katex-html\",\"aria-hidden\":\"true\",children:(0,e.jsxs)(n.span,{className:\"base\",children:[(0,e.jsx)(n.span,{className:\"strut\",style:{height:\"1.04em\",verticalAlign:\"-.1266em\"}}),(0,e.jsx)(n.span,{className:\"mord sqrt\",children:(0,e.jsxs)(n.span,{className:\"vlist-t vlist-t2\",children:[(0,e.jsxs)(n.span,{className:\"vlist-r\",children:[(0,e.jsxs)(n.span,{className:\"vlist\",style:{height:\".9134em\"},children:[(0,e.jsxs)(n.span,{className:\"svg-align\",style:{top:\"-3em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"3em\"}}),(0,e.jsxs)(n.span,{className:\"mord\",style:{paddingLeft:\".833em\"},children:[(0,e.jsxs)(n.span,{className:\"mord\",children:[(0,e.jsx)(n.span,{className:\"mord mathnormal\",children:\"a\"}),(0,e.jsx)(n.span,{className:\"msupsub\",children:(0,e.jsx)(n.span,{className:\"vlist-t\",children:(0,e.jsx)(n.span,{className:\"vlist-r\",children:(0,e.jsx)(n.span,{className:\"vlist\",style:{height:\".7401em\"},children:(0,e.jsxs)(n.span,{style:{top:\"-2.989em\",marginRight:\".05em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"2.7em\"}}),(0,e.jsx)(n.span,{className:\"mtight reset-size6 size3 sizing\",children:(0,e.jsx)(n.span,{className:\"mord mtight\",children:\"2\"})})]})})})})})]}),(0,e.jsx)(n.span,{className:\"mspace\",style:{marginRight:\".2222em\"}}),(0,e.jsx)(n.span,{className:\"mbin\",children:\"+\"}),(0,e.jsx)(n.span,{className:\"mspace\",style:{marginRight:\".2222em\"}}),(0,e.jsxs)(n.span,{className:\"mord\",children:[(0,e.jsx)(n.span,{className:\"mord mathnormal\",children:\"b\"}),(0,e.jsx)(n.span,{className:\"msupsub\",children:(0,e.jsx)(n.span,{className:\"vlist-t\",children:(0,e.jsx)(n.span,{className:\"vlist-r\",children:(0,e.jsx)(n.span,{className:\"vlist\",style:{height:\".7401em\"},children:(0,e.jsxs)(n.span,{style:{top:\"-2.989em\",marginRight:\".05em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"2.7em\"}}),(0,e.jsx)(n.span,{className:\"mtight reset-size6 size3 sizing\",children:(0,e.jsx)(n.span,{className:\"mord mtight\",children:\"2\"})})]})})})})})]})]})]}),(0,e.jsxs)(n.span,{style:{top:\"-2.8734em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"3em\"}}),(0,e.jsx)(n.span,{className:\"hide-tail\",style:{minWidth:\".853em\",height:\"1.08em\"},children:(0,e.jsx)(n.svg,{viewBox:\"0 0 400000 1080\",xmlns:\"http://www.w3.org/2000/svg\",height:\"1.08em\",width:\"400em\",preserveAspectRatio:\"xMinYMin slice\",children:(0,e.jsx)(n.path,{d:`M95,702\nc-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14\nc0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54\nc44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10\ns173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429\nc69,-144,104.5,-217.7,106.5,-221\nl0 -0\nc5.3,-9.3,12,-14,20,-14\nH400000v40H845.2724\ns-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7\nc-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z\nM834 80h400000v40h-400000z`})})})]})]}),(0,e.jsx)(n.span,{className:\"vlist-s\",children:\"\\u200B\"})]}),(0,e.jsx)(n.span,{className:\"vlist-r\",children:(0,e.jsx)(n.span,{className:\"vlist\",style:{height:\".1266em\"},children:(0,e.jsx)(n.span,{})})})]})})]})})]})]}),(0,e.jsx)(n.li,{children:\"Block math:\"})]}),(0,e.jsx)(n.span,{className:\"katex-display\",translate:\"no\",children:(0,e.jsxs)(n.span,{className:\"katex\",translate:\"no\",children:[(0,e.jsx)(n.span,{className:\"katex-mathml\",children:(0,e.jsx)(n.math,{xmlns:\"http://www.w3.org/1998/Math/MathML\",display:\"block\",children:(0,e.jsxs)(n.semantics,{children:[(0,e.jsxs)(n.mrow,{children:[(0,e.jsxs)(n.msub,{children:[(0,e.jsx)(n.mi,{children:\"C\"}),(0,e.jsx)(n.mi,{children:\"L\"})]}),(0,e.jsx)(n.mo,{children:\"=\"}),(0,e.jsxs)(n.mfrac,{children:[(0,e.jsx)(n.mi,{children:\"L\"}),(0,e.jsxs)(n.mrow,{children:[(0,e.jsx)(n.mi,{children:\"q\"}),(0,e.jsx)(n.mi,{children:\"S\"})]})]})]}),(0,e.jsx)(n.annotation,{encoding:\"application/x-tex\",children:\"C_L = \\\\frac{L}{q S} \"})]})})}),(0,e.jsxs)(n.span,{className:\"katex-html\",\"aria-hidden\":\"true\",children:[(0,e.jsxs)(n.span,{className:\"base\",children:[(0,e.jsx)(n.span,{className:\"strut\",style:{height:\".8333em\",verticalAlign:\"-.15em\"}}),(0,e.jsxs)(n.span,{className:\"mord\",children:[(0,e.jsx)(n.span,{className:\"mord mathnormal\",style:{marginRight:\".07153em\"},children:\"C\"}),(0,e.jsx)(n.span,{className:\"msupsub\",children:(0,e.jsxs)(n.span,{className:\"vlist-t vlist-t2\",children:[(0,e.jsxs)(n.span,{className:\"vlist-r\",children:[(0,e.jsx)(n.span,{className:\"vlist\",style:{height:\".3283em\"},children:(0,e.jsxs)(n.span,{style:{top:\"-2.55em\",marginLeft:\"-.0715em\",marginRight:\".05em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"2.7em\"}}),(0,e.jsx)(n.span,{className:\"mtight reset-size6 size3 sizing\",children:(0,e.jsx)(n.span,{className:\"mord mathnormal mtight\",children:\"L\"})})]})}),(0,e.jsx)(n.span,{className:\"vlist-s\",children:\"\\u200B\"})]}),(0,e.jsx)(n.span,{className:\"vlist-r\",children:(0,e.jsx)(n.span,{className:\"vlist\",style:{height:\".15em\"},children:(0,e.jsx)(n.span,{})})})]})})]}),(0,e.jsx)(n.span,{className:\"mspace\",style:{marginRight:\".2778em\"}}),(0,e.jsx)(n.span,{className:\"mrel\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"mspace\",style:{marginRight:\".2778em\"}})]}),(0,e.jsxs)(n.span,{className:\"base\",children:[(0,e.jsx)(n.span,{className:\"strut\",style:{height:\"2.2408em\",verticalAlign:\"-.8804em\"}}),(0,e.jsxs)(n.span,{className:\"mord\",children:[(0,e.jsx)(n.span,{className:\"nulldelimiter mopen\"}),(0,e.jsx)(n.span,{className:\"mfrac\",children:(0,e.jsxs)(n.span,{className:\"vlist-t vlist-t2\",children:[(0,e.jsxs)(n.span,{className:\"vlist-r\",children:[(0,e.jsxs)(n.span,{className:\"vlist\",style:{height:\"1.3603em\"},children:[(0,e.jsxs)(n.span,{style:{top:\"-2.314em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"3em\"}}),(0,e.jsx)(n.span,{className:\"mord\",children:(0,e.jsx)(n.span,{className:\"mord mathnormal\",style:{marginRight:\".05764em\"},children:\"qS\"})})]}),(0,e.jsxs)(n.span,{style:{top:\"-3.23em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"3em\"}}),(0,e.jsx)(n.span,{className:\"frac-line\",style:{borderBottomWidth:\".04em\"}})]}),(0,e.jsxs)(n.span,{style:{top:\"-3.677em\"},children:[(0,e.jsx)(n.span,{className:\"pstrut\",style:{height:\"3em\"}}),(0,e.jsx)(n.span,{className:\"mord\",children:(0,e.jsx)(n.span,{className:\"mord mathnormal\",children:\"L\"})})]})]}),(0,e.jsx)(n.span,{className:\"vlist-s\",children:\"\\u200B\"})]}),(0,e.jsx)(n.span,{className:\"vlist-r\",children:(0,e.jsx)(n.span,{className:\"vlist\",style:{height:\".8804em\"},children:(0,e.jsx)(n.span,{})})})]})}),(0,e.jsx)(n.span,{className:\"nulldelimiter mclose\"})]})]})]})]})}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"mermaid\",children:[(0,e.jsx)(n.a,{href:\"#mermaid\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Mermaid\"]}),(0,e.jsx)(n.p,{children:\"GitHub supports Mermaid code blocks as follows:\"}),(0,e.jsx)(n.pre,{className:\"language-markdown\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-markdown\",children:[(0,e.jsx)(n.span,{className:\"code-line\",children:(0,e.jsxs)(n.span,{className:\"token code\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"```\"}),(0,e.jsx)(n.span,{className:\"token code-language\",children:\"mermaid\"}),`\n`]})}),(0,e.jsx)(n.span,{className:\"code-line\",children:(0,e.jsx)(n.span,{className:\"token code\",children:`\n`})}),(0,e.jsxs)(n.span,{className:\"code-line\",children:[(0,e.jsx)(n.span,{className:\"token code\",children:(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"```\"})}),`\n`]})]})}),(0,e.jsx)(n.p,{children:\"However, Mermaid in MDX requires Playwright to build, which internally depends on Chromium, making it a heavy dependency. Currently, Contentlayer doesn't offer an ideal solution for supporting Mermaid in MDX.\"}),(0,e.jsx)(n.p,{children:\"For more information, check out:\"}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.a,{href:\"https://sjwall.github.io/mdx-mermaid/docs/intro/\",children:\"mdx-mermaid\"}),\", which uses Puppeteer to render Mermaid to SVG.\"]}),(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://mermaid.js.org/intro/getting-started.html\",children:\"mermaid.js\"})})]}),(0,e.jsx)(n.hr,{}),(0,e.jsxs)(n.div,{className:\"markdown-alert markdown-alert-note\",dir:\"auto\",children:[(0,e.jsxs)(n.p,{className:\"markdown-alert-title\",dir:\"auto\",children:[(0,e.jsx)(n.svg,{viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",\"aria-hidden\":\"true\",className:\"octicon\",children:(0,e.jsx)(n.path,{d:\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"})}),\"NOTE\"]}),(0,e.jsxs)(n.p,{children:[\"Updated: I've created a React component to render Mermaid in MDX. See \",(0,e.jsx)(n.a,{href:\"/blog/2025/mdx/2025-03-04-mermaid-mdx\",children:\"Mermaid Support for MDX in Next.js\"}),\".\"]})]}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"import-another-mdx-file\",children:[(0,e.jsx)(n.a,{href:\"#import-another-mdx-file\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Import another MDX file\"]}),(0,e.jsxs)(n.div,{className:\"markdown-alert markdown-alert-warning\",dir:\"auto\",children:[(0,e.jsxs)(n.p,{className:\"markdown-alert-title\",dir:\"auto\",children:[(0,e.jsx)(n.svg,{viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",\"aria-hidden\":\"true\",className:\"octicon\",children:(0,e.jsx)(n.path,{d:\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"})}),\"WARNING\"]}),(0,e.jsx)(n.p,{children:\"This is to be fixed. ContentLayer2 does not support ChildMDX file yet.\"})]}),(0,e.jsxs)(n.p,{children:[\"We can directly import the MDX file as a React component. Next.js use \",(0,e.jsx)(n.a,{href:\"https://github.com/remcohaszing/remark-mdx-frontmatter\",children:\"remark-mdx-frontmatter\"}),\" as the plugin to extract the frontmatter metadata from the MDX file.\"]}),(0,e.jsxs)(n.p,{children:[\"Remember to add dependency to your \",(0,e.jsx)(n.code,{children:\"package.json\"}),\" and add the plugin to \",(0,e.jsx)(n.code,{children:\"remarkPlugins\"}),\" in \",(0,e.jsx)(n.code,{children:\"next.config.ts\"}),\".\"]}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsx)(n.code,{className:\"code-highlight language-tsx\",children:(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"import\"}),\" \",(0,e.jsxs)(n.span,{className:\"token imports\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword module\",children:\"default\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword module\",children:\"as\"}),\" \",(0,e.jsx)(n.span,{className:\"token maybe-class-name\",children:\"ChildMDX\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" frontmatter \",(0,e.jsx)(n.span,{className:\"token keyword module\",children:\"as\"}),\" childFrontmatter \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"})]}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"from\"}),\" \",(0,e.jsx)(n.span,{className:\"token string\",children:\"'./child.mdx'\"}),`\n`]})})}),(0,e.jsxs)(n.h4,{className:\"content-header\",id:\"childfrontmatter\",children:[(0,e.jsx)(n.a,{href:\"#childfrontmatter\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),(0,e.jsx)(n.strong,{children:\"childFrontmatter\"})]}),(0,e.jsx)(n.p,{children:\"This is the frontmatter metadata of the child page.\"}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-tsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[\" \",(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"pre\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"relative p-6 rounded-xl overflow-hidden bg-slate-100\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),(0,e.jsx)(n.span,{className:\"token class-name known-class-name\",children:\"JSON\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"stringify\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"childFrontmatter\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"null\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,e.jsx)(n.span,{className:\"token number\",children:\"2\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"pre\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"4\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"5\",children:[\" \",(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"p\"]}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"/>\"})]}),`\n`]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"6\",children:`\n`}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"7\",children:[\" \",(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"relative p-6 rounded-xl overflow-hidden bg-slate-100\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"8\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"ul\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"list-inside list-disc space-y-2 pl-4\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"9\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),(0,e.jsx)(n.span,{className:\"token class-name known-class-name\",children:\"Object\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"keys\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"childFrontmatter\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\".\"}),(0,e.jsx)(n.span,{className:\"token function property-access method\",children:\"map\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),\"key\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,e.jsx)(n.span,{className:\"token operator arrow\",children:\"=>\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"10\",children:[\" \",(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"li\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"text-gray-800 font-medium text-sm\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"key\"}),(0,e.jsxs)(n.span,{className:\"token language-javascript script\",children:[(0,e.jsx)(n.span,{className:\"token punctuation script-punctuation\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\"key\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"11\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"span\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"font-bold\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\"key\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:\":\"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"span\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),\"childFrontmatter\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"[\"}),\"key\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"]\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"12\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"li\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"13\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"14\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"ul\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"15\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]})]})}),(0,e.jsxs)(n.h4,{className:\"content-header\",id:\"child-page-content\",children:[(0,e.jsx)(n.a,{href:\"#child-page-content\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),(0,e.jsx)(n.strong,{children:\"Child page content\"})]}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsx)(n.code,{className:\"code-highlight language-tsx\",children:(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"relative overflow-hidden rounded-xl bg-slate-100 p-6\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),(0,e.jsx)(n.span,{className:\"token comment\",children:\"/* <ChildMDX /> */\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]})})}),(0,e.jsxs)(n.div,{className:\"markdown-alert markdown-alert-note\",dir:\"auto\",children:[(0,e.jsxs)(n.p,{className:\"markdown-alert-title\",dir:\"auto\",children:[(0,e.jsx)(n.svg,{viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",\"aria-hidden\":\"true\",className:\"octicon\",children:(0,e.jsx)(n.path,{d:\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"})}),\"NOTE\"]}),(0,e.jsxs)(n.p,{children:[\"The \",(0,e.jsx)(n.code,{children:\"remark-mdx-frontmatter\"}),\" plugin, which is used to extract the frontmatter metadata from the MDX file, exports the metadata as \",(0,e.jsx)(n.code,{children:\"frontmatter\"}),\" but it may conflict with the \",(0,e.jsx)(n.code,{children:\"frontmatter\"}),\" in the current page. So we rename it to \",(0,e.jsx)(n.code,{children:\"childFrontmatter\"}),\" to avoid conflict.\"]})]}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"demo-using-component-in-mdx\",children:[(0,e.jsx)(n.a,{href:\"#demo-using-component-in-mdx\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Demo: Using Component in MDX\"]}),(0,e.jsx)(n.p,{children:\"Use MDXComponents within your MDX file:\"}),(0,e.jsx)(n.ul,{children:(0,e.jsx)(n.li,{children:\"First, create a React component:\"})}),(0,e.jsx)(n.pre,{className:\"language-tsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-tsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsx)(n.span,{className:\"token comment\",children:\"// hello-mdx.tsx\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token keyword\",children:\"export\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"default\"}),\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"function\"}),\" \",(0,e.jsx)(n.span,{className:\"token function\",children:\"HelloMDX\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[\" \",(0,e.jsx)(n.span,{className:\"token keyword\",children:\"return\"}),\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"(\"}),(0,e.jsx)(n.span,{className:\"token operator spread\",children:\"...\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\")\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),(0,e.jsx)(n.ul,{children:(0,e.jsx)(n.li,{children:\"Then, use it inside an MDX file:\"})}),(0,e.jsx)(n.pre,{children:(0,e.jsxs)(n.code,{className:\"code-highlight language-mdx\",children:[(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"1\",children:`### Demo: Show HelloMDX\n`}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"2\",children:`\n`}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"3\",children:`<HelloMDX />\n`})]})}),(0,e.jsx)(s,{}),(0,e.jsxs)(n.h2,{className:\"content-header\",id:\"using-jsx-in-mdx\",children:[(0,e.jsx)(n.a,{href:\"#using-jsx-in-mdx\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\"content-header-link\",children:(0,e.jsxs)(n.svg,{viewBox:\"0 0 20 20\",xmlns:\"http://www.w3.org/2000/svg\",className:\"h-5 linkicon w-5\",fill:\"currentColor\",children:[(0,e.jsx)(n.path,{d:\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"}),(0,e.jsx)(n.path,{d:\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"})]})})})}),\"Using JSX in MDX\"]}),(0,e.jsx)(n.pre,{className:\"language-jsx\",children:(0,e.jsxs)(n.code,{className:\"code-highlight language-jsx\",children:[(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"1\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"mx-auto mb-5 max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"2\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"md:flex\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"3\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"md:shrink-0\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"4\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"img\"]}),`\n`]})]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"5\",children:(0,e.jsxs)(n.span,{className:\"token tag\",children:[\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"h-48 w-full object-cover md:h-full md:w-48\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),`\n`]})}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"6\",children:(0,e.jsxs)(n.span,{className:\"token tag\",children:[\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"src\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9SRRmhH4X5N2e4QalcoxVbzYsD44C-sQv-w&s\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),`\n`]})}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"7\",children:(0,e.jsxs)(n.span,{className:\"token tag\",children:[\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"alt\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"Modern building architecture\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),`\n`]})}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"8\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"/>\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"9\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"10\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"p-8\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"11\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"text-sm font-semibold uppercase tracking-wide text-indigo-500\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"12\",children:(0,e.jsx)(n.span,{className:\"token plain-text\",children:` Company Retreats\n`})}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"13\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"14\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"a\"]}),`\n`]})]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"15\",children:(0,e.jsxs)(n.span,{className:\"token tag\",children:[\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"href\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"#\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),`\n`]})}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"16\",children:(0,e.jsxs)(n.span,{className:\"token tag\",children:[\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"mt-1 block text-lg font-medium leading-tight text-black hover:underline\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),`\n`]})}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"17\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[\" \",(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"18\",children:(0,e.jsx)(n.span,{className:\"token plain-text\",children:` Incredible accommodation for your team\n`})}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"19\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"a\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"20\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,e.jsx)(n.span,{className:\"token attr-name\",children:\"className\"}),(0,e.jsxs)(n.span,{className:\"token attr-value\",children:[(0,e.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"mt-2 text-gray-500\",(0,e.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"21\",children:(0,e.jsx)(n.span,{className:\"token plain-text\",children:` Looking to take your team away on a retreat to enjoy awesome food and sunshine? We have a\n`})}),(0,e.jsx)(n.span,{className:\"code-line line-number\",line:\"22\",children:(0,e.jsx)(n.span,{className:\"token plain-text\",children:` list of places for just that.\n`})}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"23\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"24\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"25\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\",children:\" \"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),(0,e.jsx)(n.span,{className:\"token plain-text\",children:`\n`})]}),(0,e.jsxs)(n.span,{className:\"code-line line-number\",line:\"26\",children:[(0,e.jsx)(n.span,{className:\"token plain-text\"}),(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsxs)(n.span,{className:\"token tag\",children:[(0,e.jsx)(n.span,{className:\"token punctuation\",children:\"</\"}),\"div\"]}),(0,e.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]})]})}),(0,e.jsx)(\"br\",{}),(0,e.jsx)(\"div\",{className:\"mx-auto mb-5 max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl\",children:(0,e.jsxs)(\"div\",{className:\"md:flex\",children:[(0,e.jsx)(\"div\",{className:\"md:shrink-0\",children:(0,e.jsx)(\"img\",{className:\"h-48 w-full object-cover md:h-full md:w-48\",src:\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9SRRmhH4X5N2e4QalcoxVbzYsD44C-sQv-w&s\",alt:\"Modern building architecture\"})}),(0,e.jsxs)(\"div\",{className:\"p-8\",children:[(0,e.jsx)(\"div\",{className:\"text-sm font-semibold uppercase tracking-wide text-indigo-500\",children:(0,e.jsx)(n.p,{children:\"Company Retreats\"})}),(0,e.jsx)(\"a\",{href:\"#\",className:\"mt-1 block text-lg font-medium leading-tight text-black hover:underline\",children:(0,e.jsx)(n.p,{children:\"Incredible accommodation for your team\"})}),(0,e.jsx)(\"div\",{className:\"mt-2 text-gray-500\",children:(0,e.jsx)(n.p,{children:\"Looking to take your team away on a retreat to enjoy awesome food and sunshine? We have a list of places for just that.\"})})]})]})})]})}function h(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(p,{...a})}):p(a)}function i(a,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(v);})();\n;return Component;"
  },
  "_id": "blog/2025/mdx/2025-01-13-nextjs-mdx.mdx",
  "_raw": {
    "sourceFilePath": "blog/2025/mdx/2025-01-13-nextjs-mdx.mdx",
    "sourceFileName": "2025-01-13-nextjs-mdx.mdx",
    "sourceFileDir": "blog/2025/mdx",
    "contentType": "mdx",
    "flattenedPath": "blog/2025/mdx/2025-01-13-nextjs-mdx"
  },
  "type": "Blog",
  "readingTime": { "text": "11 min read", "minutes": 10.215, "time": 612900, "words": 2043 },
  "slug": "2025/mdx/2025-01-13-nextjs-mdx",
  "path": "blog/2025/mdx/2025-01-13-nextjs-mdx",
  "filePath": "blog/2025/mdx/2025-01-13-nextjs-mdx.mdx",
  "toc": [
    { "value": "Page Information", "url": "#page-information", "depth": 2 },
    { "value": "Setup MDX in Next.js", "url": "#setup-mdx-in-nextjs", "depth": 2 },
    {
      "value": "How does MDX work with Next.js?",
      "url": "#how-does-mdx-work-with-nextjs",
      "depth": 2
    },
    {
      "value": "Option 1: Static app(or page) routing like page.tsx",
      "url": "#option-1-static-appor-page-routing-like-pagetsx",
      "depth": 3
    },
    {
      "value": "Option 2: Dynamic page template",
      "url": "#option-2-dynamic-page-template",
      "depth": 3
    },
    {
      "value": "Option 3: Remote MDX like MDXRemote",
      "url": "#option-3-remote-mdx-like-mdxremote",
      "depth": 3
    },
    {
      "value": "Content styling with @tailwind/typography",
      "url": "#content-styling-with-tailwindtypography",
      "depth": 2
    },
    { "value": "Math equations", "url": "#math-equations", "depth": 2 },
    { "value": "Mermaid", "url": "#mermaid", "depth": 2 },
    { "value": "Import another MDX file", "url": "#import-another-mdx-file", "depth": 2 },
    { "value": "childFrontmatter", "url": "#childfrontmatter", "depth": 4 },
    { "value": "Child page content", "url": "#child-page-content", "depth": 4 },
    { "value": "Demo: Using Component in MDX", "url": "#demo-using-component-in-mdx", "depth": 2 },
    { "value": "Using JSX in MDX", "url": "#using-jsx-in-mdx", "depth": 2 }
  ],
  "structuredData": {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "Use MDX in Next.js",
    "datePublished": "2025-01-13T00:00:00.000Z",
    "dateModified": "2025-01-13T00:00:00.000Z",
    "description": "This is a guide to build a documentation site with Next.js and MDX.",
    "image": "/og?title=Use MDX in Next.js",
    "url": "https://xianminx.github.io//blog/2025/mdx/2025-01-13-nextjs-mdx",
    "author": [{ "@type": "Person", "name": "Lucas Xu" }]
  }
}