From 5b7ccf0b671e2999b62befc729a3e517a0433728 Mon Sep 17 00:00:00 2001
From: Bertrand Yuan <bert.yuan@outlook.com>
Date: Mon, 15 Dec 2025 23:48:10 +0800
Subject: initial commit -- the front-end prototype

The initial code is base on Anirudh's work.

More to see at:

    https://github.com/techwithanirudh/shadcn-blog

Therefore, the code in this commit is under MIT license.
---
 content/using-mdx.mdx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 content/using-mdx.mdx

(limited to 'content/using-mdx.mdx')

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.
-- 
cgit v1.2.3

