🔗 Project Links

This blog application is open source and available for exploration:

• GitHub Repository — View the complete source code, explore the implementation, and contribute improvements
• Live Deployment — See the blog in action on Vercel, showcasing MDX with Next.js 16 and React 19

You can clone the repository, run it locally, or use it as a starting point for your own MDX-powered blog.

Using MDX with Next.js 16, React 19, Tailwind, and ShadCN

MDX lets you write Markdown content enhanced with JSX. It’s ideal for content-driven apps where you want the power of React inside rich text — perfect for blogs, documentation, and interactive pages.

✅ App Router + MDX

Next.js 16 with the App Router supports MDX smoothly.

To load an MDX file dynamically:

tsxCopy
const post = await import(`@/content/posts/${slug}.mdx`);

Then render it using @/next/mdx compiled output. Use useMDXComponents to register any global components you want available in all MDX files.

🧪 Example: ShadCN Button in MDX

Because we’ve already registered the ShadCN Button in our useMDXComponents config, we can use it in MDX without needing to import it:

mdxCopy
## Example with globally registered Button

<Button variant="outline">Click me</Button>

Alternatively, you can import it manually if you prefer:

mdxCopy
import { Button } from "@/components/ui/button";

## Example with local import

<Button variant="default">I was imported manually</Button>

Both approaches render the same styled component — choose based on your project's organization or preference.