Next.js Integration

MDXE provides seamless integration with Next.js through its plugin system.

Basic Setup

// next.config.mjs
import { withMDXE } from 'mdxe'
 
export default withMDXE({
  // Your Next.js config here
})

Advanced Features

Custom MDX Components

// mdx-components.js
export function useMDXComponents(components) {
  return {
    h1: props => <h1 style={{ color: 'blue' }} {...props} />,
    ...components
  }
}

Page Metadata

---
title: My Page
description: SEO-friendly description
---
 
# Content

Troubleshooting

Common issues and solutions:

1. MDX files not processing

   • Ensure file extension is .mdx
   • Check pageExtensions in Next.js config

2. Component import errors

   • Verify import path
   • Check component compatibility

See Deployment Guide for production setup.