MDX in Next.js with App directory

MDX is a superset of markdown that lets you write JSX directly in your markdown files. It is a powerful way to add dynamic interactivity and embed React components within your content.

How do I set it up in my Next.js app?

Step 1 - Install required dependencies

npm install @next/mdx @mdx-js/loader @mdx-js/react

If you are using typescript also install

npm install -D @types/mdx

Step 2 - Create `mdx-components.tsx`

For Next.js app-router to work with MDX it requires a file named mdx-components.tsx in the root of the project

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

Step 3 - Update `next.config.js` to use `@next/mdx`

const withMDX = require('@next/mdx')()
 
/** @type {import('next').NextConfig} */
const config = {
  // ... other config properties
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
}
 
module.exports = withMDX(config)

Step 4 -Create a page with `.mdx` extension

//project/app/mdx-pages/article-1/page.mdx
import { MyComponent } from 'my-components'
 
# Welcome to my MDX page!
 
This is some **bold** and _italics_ text.
 
This is a list in markdown:
 
- One
- Two
- Three
 
// You need to add this component in the mdx-components.tsx to be available here 
<MyComponent />

That's it, you can now use MDX inside of your app router in Next.js

For more detailed guide checkout official Next.js docs for MDX here

MDX in Next.js with App directory

How do I set it up in my Next.js app?

Step 1 - Install required dependencies

Step 2 - Create mdx-components.tsx

Step 3 - Update next.config.js to use @next/mdx

Step 4 -Create a page with .mdx extension

Loading discussion...

Step 2 - Create `mdx-components.tsx`

Step 3 - Update `next.config.js` to use `@next/mdx`

Step 4 -Create a page with `.mdx` extension