1 files changed, 38 insertions, 0 deletions
diff --git a/content/using-mdx.mdx b/content/using-mdx.mdx
new file mode 100644
index 0000000..b91d0af
--- /dev/null
+++ b/content/using-mdx.mdx
@@ -0,0 +1,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.