### Install next-mdx-remote

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

The standard command to install the library via npm.

```shell
npm install next-mdx-remote
```

--------------------------------

### Basic MDX Rendering with Core MDX Library

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Provides a server-side rendering example using the core '@mdx-js/mdx' library without next-mdx-remote. It compiles MDX source to a function body and runs it to generate a React Server Component, allowing for client component integration.

```js
import { compile, run } from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'
import ClientComponent from './components/client'

// MDX can be retrieved from anywhere, such as a file or a database.
const mdxSource = `# Hello, world!
<ClientComponent />
`

export default async function Page() {
  // Compile the MDX source code to a function body
  const code = String(
    await compile(mdxSource, { outputFormat: 'function-body' })
  )
  // You can then either run the code on the server, generating a server
  // component, or you can pass the string to a client component for
  // final rendering.

  // Run the compiled code with the runtime and get the default export
  const { default: MDXContent } = await run(code, {
    ...runtime,
    baseUrl: import.meta.url,
  })

  // Render the MDX content, supplying the ClientComponent as a component
  return <MDXContent components={{ ClientComponent }} />
}
```

--------------------------------

### Rendering Framer Motion Components in MDX

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

This example shows how to render components with dot notation in their names, such as those from framer-motion. By passing the relevant object (e.g., `motion`) in the `components` prop of MDXRemote, these components can be used directly within MDX.

```jsx
import { motion } from 'framer-motion'

import { MDXProvider } from '@mdx-js/react'
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

export default function TestPage({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} components={{ motion }} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = `Some **mdx** text, with a component:

<motion.div animate={{ x: 100 }} />`
  const mdxSource = await serialize(source)
  return { props: { source: mdxSource } }
}
```

--------------------------------

### MDXRemote Component Usage

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

This example demonstrates the basic usage of the `<MDXRemote />` component, which consumes the compiled source from the `serialize` function. It shows how to pass the compiled source, custom components, and scope to render MDX content within a React application.

```jsx
<MDXRemote {...source} components={components} />
```

--------------------------------

### Implement Type-Safe MDX Pages with TypeScript

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

This example demonstrates how to define interfaces for frontmatter and scope, and apply them to the MDXRemoteSerializeResult type. It shows the full lifecycle of fetching content, serializing it with type-safe options, and rendering it within a Next.js page component.

```typescript
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
import type { GetStaticProps, GetStaticPaths } from 'next';

interface PostFrontmatter {
  title: string;
  date: string;
  author: { name: string; avatar: string };
  tags: string[];
  draft?: boolean;
}

interface PostScope {
  siteUrl: string;
  buildTime: string;
}

interface PostPageProps {
  mdxSource: MDXRemoteSerializeResult<PostScope, PostFrontmatter>;
}

export default function PostPage({ mdxSource }: PostPageProps) {
  const { frontmatter } = mdxSource;
  return (
    <article>
      <header>
        <h1>{frontmatter.title}</h1>
      </header>
      <MDXRemote {...mdxSource} />
    </article>
  );
}

export const getStaticProps: GetStaticProps<PostPageProps> = async ({ params }) => {
  const source = await getPostContent(params?.slug as string);
  const mdxSource = await serialize<PostScope, PostFrontmatter>(source, {
    scope: { siteUrl: process.env.SITE_URL!, buildTime: new Date().toISOString() },
    parseFrontmatter: true
  });
  return { props: { mdxSource } };
};
```

--------------------------------

### Serializing MDX Content with Options

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

This TypeScript example shows the detailed usage of the `serialize` function, including its various options. It covers passing raw MDX string, scope for custom components, MDX compilation options (like remark and rehype plugins), frontmatter parsing, and JavaScript expression blocking for security.

```typescript
serialize(
  // Raw MDX contents as a string
  '# hello, world',
  // Optional parameters
  {
    // made available to the arguments of any custom MDX component
    scope: {},
    // MDX's available options, see the MDX docs for more info.
    // https://mdxjs.com/packages/mdx/#compilefile-options
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
      format: 'mdx',
    },
    // Indicates whether or not to parse the frontmatter from the MDX source
    parseFrontmatter: false,
    // Block JavaScript expressions in MDX (e.g., {variable}, {func()})
    // When true, these expressions are removed. Defaults to true.
    blockJS: true,
    // Provides a best effort option to block dangerous JavaScript when blockJS is false (JS is allowed).
    // Prevents access to eval, Function, process, require, and other dangerous globals.
    // Only applies when blockJS is false. Defaults to true for security.
    blockDangerousJS: true,
  }
)
```

--------------------------------

### Customizing MDX Components with Next-MDX-Remote

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Illustrates how to provide custom React components to override default HTML elements rendered by MDX. This example defines a custom h1 component and passes it to MDXRemote via the components prop.

```tsx
// components/mdx-remote.js
import { MDXRemote } from 'next-mdx-remote/rsc'

const components = {
  h1: (props) => (
    <h1 {...props} className="large-text">
      {props.children}
    </h1>
  ),
}

export function CustomMDX(props) {
  return (
    <MDXRemote
      {...props}
      components={{ ...components, ...(props.components || {}) }}
    />
  )
}
```

```tsx
// app/page.js
import { CustomMDX } from '../components/mdx-remote'

export default function Home() {
  return (
    <CustomMDX
      // h1 now renders with `large-text` className
      source={`# Hello World
      This is from Server Components!
    `}
    />
  )
}
```

--------------------------------

### Configure Global MDX Components with MDXProvider

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

Demonstrates how to wrap a Next.js application with MDXProvider to provide global components to all MDXRemote instances. This avoids redundant component passing in individual pages.

```tsx
import { MDXProvider } from '@mdx-js/react';
import type { AppProps } from 'next/app';

const globalComponents = {
  h1: (props: any) => <h1 className="text-4xl font-extrabold my-4" {...props} />,
  Alert: ({ type, children }: { type: 'success' | 'error' | 'info'; children: React.ReactNode }) => (
    <div className={`alert alert-${type} p-4 rounded-lg my-4">{children}</div>
  )
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MDXProvider components={globalComponents}>
      <Component {...pageProps} />
    </MDXProvider>
  );
}
```

--------------------------------

### Provide Custom MDX Components Globally with MDXProvider

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Demonstrates how to make custom components available to all `<MDXRemote />` instances within an application by wrapping the application with `<MDXProvider />` from `@mdx-js/react`. This allows for consistent component usage across different MDX files.

```jsx
// pages/_app.jsx
import { MDXProvider } from '@mdx-js/react'

import Test from '../components/test'

const components = { Test }

export default function MyApp({ Component, pageProps }) {
  return (
    <MDXProvider components={components}>
      <Component {...pageProps} />
    </MDXProvider>
  )
}
```

```jsx
// pages/test.jsx
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

export default function TestPage({ source }) {
  return (

```

--------------------------------

### Implement MDX serialization and hydration

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Demonstrates how to use serialize in getStaticProps to process MDX and the MDXRemote component to render it in a Next.js page.

```jsx
import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote } from 'next-mdx-remote';
import Test from '../components/test';

const components = { Test };

export default function TestPage({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} components={components} />
    </div>
  );
}

export async function getStaticProps() {
  const source = 'Some **mdx** text, with a component <Test />';
  const mdxSource = await serialize(source);
  return { props: { source: mdxSource } };
}
```

--------------------------------

### Simplified MDX Evaluation with Core MDX Library

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Presents a simplified approach using the 'evaluate' function from '@mdx-js/mdx' for compiling and running MDX code in a single step. This is suitable when the compiled MDX string doesn't need to be passed elsewhere, demonstrating component rendering and export access.

```js
import { evaluate } from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'
import ClientComponent from './components/client'

// MDX can be retrieved from anywhere, such as a file or a database.
const mdxSource = `
export const title = "MDX Export Demo";

# Hello, world!
<ClientComponent />

export function MDXDefinedComponent() {
  return <p>MDX-defined component</p>;
}
`

export default async function Page() {
  // Run the compiled code
  const {
    default: MDXContent,
    MDXDefinedComponent,
    ...rest
  } = await evaluate(mdxSource, runtime)

  console.log(rest) // logs { title: 'MDX Export Demo' }

  // Render the MDX content, supplying the ClientComponent as a component, and
  // the exported MDXDefinedComponent.
  return (
    <>
      <MDXContent components={{ ClientComponent }} />
      <MDXDefinedComponent />
    </>
  )
}
```

--------------------------------

### Execute Curl Command

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/__tests__/fixtures/basic/mdx/test.mdx

This snippet demonstrates how to execute a curl command to a local host. It's useful for testing API endpoints or network services.

```shell-session
curl localhost
```

--------------------------------

### TypeScript Integration with serialize

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

Demonstrates how to use generic types with the serialize function and MDXRemoteSerializeResult to maintain type safety for frontmatter and scope.

```APIDOC
## TypeScript Usage with serialize

### Description
This pattern demonstrates how to define custom interfaces for frontmatter and scope, and apply them to the `serialize` function and `MDXRemoteSerializeResult` type.

### Method
N/A (Server-side utility)

### Endpoint
next-mdx-remote/serialize

### Parameters
#### Request Body
- **source** (string) - Required - The raw MDX content string.
- **options** (object) - Optional - Configuration including scope, parseFrontmatter, and plugins.

### Request Example
```typescript
const mdxSource = await serialize<PostScope, PostFrontmatter>(source, {
  scope: { siteUrl: 'https://example.com' },
  parseFrontmatter: true
})
```

### Response
#### Success Response (200)
- **mdxSource** (MDXRemoteSerializeResult) - The serialized MDX object containing compiled source, frontmatter, and scope.
```

--------------------------------

### Basic MDX Rendering in Next.js

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

This snippet demonstrates the basic usage of next-mdx-remote to serialize and render MDX content server-side using getStaticProps. It takes raw MDX text, serializes it, and passes it to the MDXRemote component for rendering.

```jsx
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

export default function TestPage({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text, with a component <Test />'
  const mdxSource = await serialize(source)
  return { props: { source: mdxSource } }
}
```

--------------------------------

### MDX Rendering with Loading State using Suspense

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Shows how to implement a loading state for MDX content rendering in Next.js Server Components using React's Suspense API. This ensures a better user experience by displaying fallback content while the MDX is being processed.

```tsx
import { MDXRemote } from 'next-mdx-remote/rsc'
import { Suspense } from 'react'

// app/page.js
export default function Home() {
  return (
    <Suspense fallback={<>Loading...</>
    }>
      <MDXRemote
        source={`# Hello World

        This is from Server Components!
        `}
      />
    </Suspense>
  )
}
```

--------------------------------

### serialize(source, options)

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

The serialize function compiles MDX source strings into a serialized format, typically executed within Next.js data fetching methods like getStaticProps.

```APIDOC
## serialize(source, options)

### Description
Compiles MDX source strings into a serialized format containing the compiled code, scope, and frontmatter. This is intended for server-side execution.

### Method
Function Call (Server-side)

### Parameters
#### Arguments
- **source** (string) - Required - The raw MDX content string.
- **options** (object) - Optional - Configuration object including `mdxOptions`, `scope`, `parseFrontmatter`, and security flags.

### Request Example
```javascript
const result = await serialize(mdxContent, {
  parseFrontmatter: true,
  mdxOptions: { remarkPlugins: [remarkGfm] }
});
```

### Response
#### Success Response
- **compiledSource** (string) - The serialized MDX content.
- **scope** (object) - Variables passed to the MDX scope.
- **frontmatter** (object) - Parsed frontmatter data.

#### Response Example
{
  "compiledSource": "...",
  "scope": {},
  "frontmatter": { "title": "My Article" }
}
```

--------------------------------

### Configure Turbopack for next-mdx-remote

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Configuration required for next.config.js when using the library with Turbopack to ensure proper transpilation.

```javascript
const nextConfig = {
  transpilePackages: ['next-mdx-remote'],
}
```

--------------------------------

### Implement next-mdx-remote with TypeScript

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Demonstrates how to use serialize and MDXRemote with TypeScript in a Next.js page. It shows the usage of MDXRemoteSerializeResult to type the props and the getStaticProps function.

```tsx
import type { GetStaticProps } from 'next'
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote, type MDXRemoteSerializeResult } from 'next-mdx-remote'
import ExampleComponent from './example'

const components = { ExampleComponent }

interface Props {
  mdxSource: MDXRemoteSerializeResult
}

export default function ExamplePage({ mdxSource }: Props) {
  return (
    <div>
      <MDXRemote {...mdxSource} components={components} />
    </div>
  )
}

export const getStaticProps: GetStaticProps<{
  mdxSource: MDXRemoteSerializeResult
}> = async () => {
  const mdxSource = await serialize('some *mdx* content: <ExampleComponent />')
  return { props: { mdxSource } }
}
```

--------------------------------

### Replace Default MDX Components with Custom Components (JSX)

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Demonstrates how to replace default HTML tags with custom React components using MDXProvider in next-mdx-remote. This allows for custom styling and component integration. Note that component names with '/' are not supported.

```jsx
import { Typography } from "@material-ui/core";

const components = { Test, h2: (props) => <Typography variant="h2" {...props} /> }
...
```

--------------------------------

### Configure Serialization Security Options

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

Shows how to control JavaScript expression execution during MDX serialization. Options range from blocking all JS to allowing full execution for trusted content.

```typescript
import { serialize } from 'next-mdx-remote/serialize';

// Enable JS with dangerous calls blocked
const semiTrustedResult = await serialize(content, {
  parseFrontmatter: true,
  blockJS: false,
  blockDangerousJS: true
});

// Full JS access (ONLY for trusted content)
const trustedResult = await serialize(content, {
  scope: { data: { items: [] } },
  blockJS: false,
  blockDangerousJS: false
});
```

--------------------------------

### Basic MDX Rendering with Next-MDX-Remote

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Demonstrates the fundamental usage of MDXRemote component in Next.js Server Components to render MDX content. It imports MDXRemote and uses it within a React component to display markdown.

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

// app/page.js
export default function Home() {
  return (
    <MDXRemote
      source={`# Hello World

      This is from Server Components!
      `}
    />
  )
}
```

--------------------------------

### Extract Content and Frontmatter with compileMDX

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

Shows how to use compileMDX to separate MDX content from frontmatter metadata. This is useful for building page layouts that require frontmatter data for headers, metadata, or SEO tags.

```tsx
// app/blog/[slug]/page.tsx
import { compileMDX } from 'next-mdx-remote/rsc'
import { notFound } from 'next/navigation'

interface BlogFrontmatter {
  title: string
  description: string
  date: string
  tags: string[]
}

const components = {
  Image: ({ src, alt }: { src: string; alt: string }) => (
    <img src={src} alt={alt} className="rounded-lg shadow-md" />
  ),
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const response = await fetch(`https://cms.example.com/posts/${params.slug}`)
  if (!response.ok) notFound()

  const mdxSource = await response.text()

  const { content, frontmatter } = await compileMDX<BlogFrontmatter>({
    source: mdxSource,
    components,
    options: {
      parseFrontmatter: true,
      blockJS: false,
    },
  })

  return (
    <article>
      <header>
        <h1 className="text-3xl font-bold">{frontmatter.title}</h1>
        <p className="text-gray-600">{frontmatter.description}</p>
        <time dateTime={frontmatter.date}>
          {new Date(frontmatter.date).toLocaleDateString()}
        </time>
        <div className="flex gap-2">
          {frontmatter.tags.map(tag => (
            <span key={tag} className="bg-blue-100 px-2 py-1 rounded">
              {tag}
            </span>
          ))}
        </div>
      </header>
      <main className="prose">
        {content}
      </main>
    </article>
  )
}

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const mdxSource = await fetch(`https://cms.example.com/posts/${params.slug}`).then(r => r.text())

  const { frontmatter } = await compileMDX<BlogFrontmatter>({
    source: mdxSource,
    options: { parseFrontmatter: true },
  })

  return {
    title: frontmatter.title,
    description: frontmatter.description,
  }
}
```

--------------------------------

### Accessing Frontmatter with compileMDX

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Demonstrates how to parse and access frontmatter from MDX content directly within Next.js Server Components using the compileMDX function. This allows for metadata extraction and dynamic content generation.

```tsx
// app/page.js
import { compileMDX } from 'next-mdx-remote/rsc'

export default async function Home() {
  // Optionally provide a type for your frontmatter object
  const { content, frontmatter } = await compileMDX<{ title: string }>({
    source: `--- 
title: RSC Frontmatter Example
---
# Hello World
This is from Server Components!
`,
    options: { parseFrontmatter: true },
  })
  return (
    <>
      <h1>{frontmatter.title}</h1>
      {content}
    </>
  )
}
```

--------------------------------

### Render MDX with MDXRemote in React Server Components

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

Demonstrates using the async MDXRemote component to fetch and render MDX content directly within a Next.js server component. It includes custom component mapping and configuration options for frontmatter and plugins.

```tsx
// app/blog/[slug]/page.tsx
import { MDXRemote } from 'next-mdx-remote/rsc'
import { Suspense } from 'react'

const components = {
  Callout: ({ type, children }: { type: 'info' | 'warning'; children: React.ReactNode }) => (
    <div className={`callout callout-${type}`}>
      {children}
    </div>
  ),
  code: (props: any) => <code className="bg-gray-100 rounded px-1" {...props} />,
}

export default async function BlogPage({ params }: { params: { slug: string } }) {
  const mdxContent = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.text())

  return (
    <article>
      <Suspense fallback={<div>Loading content...</div>}>
        <MDXRemote
          source={mdxContent}
          components={components}
          options={{
            parseFrontmatter: true,
            blockJS: false,
            mdxOptions: {
              remarkPlugins: [],
              rehypePlugins: [],
            },
          }}
        />
      </Suspense>
    </article>
  )
}
```

--------------------------------

### Parse Frontmatter in MDX with next-mdx-remote

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Demonstrates how to enable and parse frontmatter from MDX content using `serialize` with `parseFrontmatter: true`. The parsed frontmatter is then accessible via `mdxSource.frontmatter` and can be used to render metadata like titles. This functionality relies on the `vfile-matter` package.

```jsx
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import Test from '../components/test'

const components = { Test }

export default function TestPage({ mdxSource }) {
  return (
    <div className="wrapper">
      <h1>{mdxSource.frontmatter.title}</h1>
      <MDXRemote {...mdxSource} components={components} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = `--- 
title: Test
---

Some **mdx** text, with a component <Test name={frontmatter.title}/>
  `

  const mdxSource = await serialize(source, { parseFrontmatter: true })
  return { props: { mdxSource } }
}
```

--------------------------------

### serialize() Utility

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

The serialize function is used to transform raw MDX text into a serialized format that can be passed to the client-side MDXRemote component.

```APIDOC
## serialize(source, options)

### Description
Converts raw MDX string content into a serialized object that is safe to pass from Next.js data fetching methods to the client.

### Parameters
#### Arguments
- **source** (string) - Required - The raw MDX content string.
- **options** (object) - Optional - Configuration options for the MDX compiler.

### Request Example
const mdxSource = await serialize('Some **mdx** text');

### Response
#### Success Response (Object)
- **compiledSource** (string) - The compiled MDX content.
- **scope** (object) - Any variables or data passed to the MDX scope.
```

--------------------------------

### Lazy Hydration for MDX Content

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

This snippet illustrates how to implement lazy hydration for MDX content. By setting the `lazy` prop on MDXRemote, hydration of components is deferred until they are needed, which can improve initial load performance but might delay interactivity.

```jsx
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import Test from '../components/test'

const components = { Test }

export default function TestPage({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} components={components} lazy />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text, with a component <Test />'
  const mdxSource = await serialize(source)
  return { props: { source: mdxSource } }
}
```

--------------------------------

### Serialize MDX Source - TypeScript

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

Compiles MDX source strings into a serialized format for rendering. Supports frontmatter parsing, custom scope variables, and MDX compiler options like remark/rehype plugins. Runs server-side.

```typescript
import { serialize } from 'next-mdx-remote/serialize'
import type { MDXRemoteSerializeResult } from 'next-mdx-remote'

// Basic serialization
const mdxSource = await serialize('# Hello **World**')
// Returns: { compiledSource: '...', scope: {}, frontmatter: {} }

// With frontmatter parsing
const sourceWithFrontmatter = `---
title: My Article
author: John Doe
---

# {frontmatter.title}

Written by {frontmatter.author}
`

interface Frontmatter {
  title: string
  author: string
}

const result = await serialize<Record<string, unknown>, Frontmatter>(
  sourceWithFrontmatter,
  {
    parseFrontmatter: true,
    blockJS: false, // Enable JS expressions like {frontmatter.title}
  }
)

console.log(result.frontmatter.title) // "My Article"

// With MDX options and remark plugins
import remarkGfm from 'remark-gfm'
import rehypeHighlight from 'rehype-highlight'

const advancedResult = await serialize(mdxContent, {
  scope: {
    productName: 'NextJS',
    version: '14.0'
  },
  mdxOptions: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeHighlight],
    format: 'mdx',
  },
  parseFrontmatter: true,
  blockJS: false,           // Allow {variable} expressions
  blockDangerousJS: true,   // Block eval, Function, process access
})
```

--------------------------------

### Pass Custom Data to `serialize` Function for MDX Scope

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Shows how to pass custom data directly to the `serialize` function using the `scope` option. This data is then made available to the MDX content when rendered. Values passed to `serialize` must be serializable (e.g., no functions or components). Key names must be valid JavaScript variable names.

```jsx
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import Test from '../components/test'

const components = { Test }
const data = { product: 'next' }

export default function TestPage({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} components={components} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source =
    'Some **mdx** text, with a component <Test product={product} />'
  const mdxSource = await serialize(source, { scope: data })
  return { props: { source: mdxSource } }
}
```

--------------------------------

### <MDXRemote /> Component

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

The MDXRemote component renders the serialized MDX content in the browser, allowing for dynamic component injection and lazy hydration.

```APIDOC
## <MDXRemote />

### Description
A React component that consumes the output of the serialize function to render MDX content.

### Props
- **compiledSource** (string) - Required - The serialized source from the serialize function.
- **components** (object) - Optional - A mapping of component names to React components.
- **scope** (object) - Optional - Variables available within the MDX scope.
- **lazy** (boolean) - Optional - If true, defers hydration of components for performance optimization.

### Usage Example
<MDXRemote {...source} components={{ TestComponent }} lazy />
```

--------------------------------

### Pass Custom Data to MDX Components using Scope Prop

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

Illustrates how to pass custom data to MDX content using the `scope` prop of the `<MDXRemote />` component. Data passed via `scope` is exposed as JavaScript variables and must be consumed as arguments to components, not rendered directly in text. Key names in `scope` must be valid JavaScript variable names.

```jsx
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import Test from '../components/test'

const components = { Test }
const data = { product: 'next' }

export default function TestPage({ source }) {
  return (
    <div className="wrapper">
      <MDXRemote {...source} components={components} scope={data} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source =
    'Some **mdx** text, with a component using a scope variable <Test product={product} />'
  const mdxSource = await serialize(source)
  return { props: { source: mdxSource } }
}
```

--------------------------------

### MDXRemote Component

Source: https://github.com/hashicorp/next-mdx-remote/blob/main/README.md

The MDXRemote component is used on the client side to hydrate the serialized MDX source provided by the server.

```APIDOC
## <MDXRemote />

### Description
A React component that takes the serialized source object and renders the MDX content, optionally injecting custom components.

### Parameters
#### Props
- **...source** (object) - Required - The serialized source object returned by the serialize function.
- **components** (object) - Optional - A mapping of custom components to be used within the MDX content.

### Usage Example
<MDXRemote {...source} components={{ Test: MyComponent }} />
```

--------------------------------

### Render Serialized MDX with MDXRemote - TSX

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

Renders serialized MDX content on the client side using the MDXRemote component. Accepts serialized data and optional custom components. Supports lazy hydration for performance.

```tsx
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'

// Custom components to use in MDX
const components = {
  // Custom component accessible as <Button /> in MDX
  Button: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
    <button className="btn-primary" onClick={onClick}>
      {children}
    </button>
  ),
  // Override default HTML elements
  h1: (props: any) => <h1 className="text-4xl font-bold" {...props} />,
  a: (props: any) => <a className="text-blue-500 hover:underline" {...props} />,
  // Support for dot notation (e.g., framer-motion)
  motion: {
    div: (props: any) => <div className="animated" {...props} />,
  },
}

interface Props {
  mdxSource: MDXRemoteSerializeResult
}

export default function BlogPost({ mdxSource }: Props) {
  return (
    <article>
      <h1>{mdxSource.frontmatter?.title}</h1>
      <MDXRemote
        {...mdxSource}
        components={components}
        lazy // Enable lazy hydration for better performance
      />
    </article>
  )
}

export async function getStaticProps() {
  const source = `
---
title: Getting Started with MDX
---

# Welcome

Click the <Button>Submit</Button> to continue.

<motion.div>Animated content</motion.div>
`

  const mdxSource = await serialize(source, {
    parseFrontmatter: true,
    blockJS: false,
  })

  return { props: { mdxSource } }
}
```

--------------------------------

### MDXRemote Component

Source: https://context7.com/hashicorp/next-mdx-remote/llms.txt

The MDXRemote component is a client-side React component used to render the serialized output generated by the serialize function.

```APIDOC
## <MDXRemote />

### Description
A React component that takes the output of `serialize()` and renders the MDX content into the DOM, supporting custom component injection.

### Parameters
#### Props
- **...mdxSource** (object) - Required - The result object from `serialize()`.
- **components** (object) - Optional - A map of custom components to override HTML elements or add custom functionality.
- **lazy** (boolean) - Optional - Enables lazy hydration for improved performance.

### Request Example
```tsx
<MDXRemote
  {...mdxSource}
  components={{ Button: MyButton }}
  lazy
/>
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.