blob: b91d0afc870fc65dded0b57ad3b7b55019d89607 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
---
title: 'Using MDX'
description: Learn MDX in Next.js to mix Markdown with React. This guide shows setup with @next/mdx, usage tips, and examples to embed JSX in posts—ideal for blogs, docs, and interactive tutorials.
date: '2025-03-23'
tags: ['nextjs', 'mdx', 'guide']
image: /images/blog/using-mdx.png
author: You
---
import { Button } from '@/components/ui/button'
This Next.js app is configured with MDX support using the [`@next/mdx`](https://nextjs.org/docs/app/building-your-application/configuring/mdx) plugin. If you decide not to use MDX, you can remove the configuration from your `next.config.js`.
## Why MDX?
MDX is Markdown on steroids — it lets you embed JSX directly inside Markdown. This means you can [mix Markdown with React components](https://mdxjs.com/docs/what-is-mdx/) to build rich, interactive content.
Perfect for blog posts, documentation, or tutorials that need some React magic ✨.
## Example
Here's how you can use a React component directly in MDX:
<Button>Click Me!</Button>
Yep, that button is fully interactive — thanks to MDX + React.
## More Links
- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx/)
- [Next.js MDX Setup Guide](https://nextjs.org/docs/app/building-your-application/configuring/mdx)
- [Client Components in App Router](https://nextjs.org/docs/app/building-your-application/rendering/client-components)
> **Note:** Components used in `.mdx` files should be **Client Components** if they use state, effects, or interactivity.
---
Let me know if you're using the Pages Router instead or want the full setup guide with `next.config.js` and loader info — happy to drop that in too.
|
