Example: Using JSX Components in MDX

Welcome to MDX with JSX Components!

This is an example article showcasing how to use @next/mdx with custom JSX components embedded directly in your markdown content.

Using Custom Components

Callout Component

You can use different types of callouts to highlight important information:

💡

This is an info callout. Perfect for sharing helpful tips and information with your readers!

⚠️

⚠️ This is a warning callout. Use it to alert readers about potential issues or important considerations.

✅

✅ This is a success callout. Great for confirming successful actions or positive outcomes!

❌

❌ This is an error callout. Use it to highlight critical issues or errors that need attention.

Card Component

Cards are great for organizing related content:

Getting Started

Here's what you need to know to get started with MDX:

Install @next/mdx and related dependencies
Configure your next.config.js
Create custom components
Start writing MDX files with JSX!

Pro Tips

Use components sparingly for maximum impact
Keep your components simple and reusable
Test your components in different contexts
Document your component props clearly

HighlightBox Component

Highlight important sections with colorful boxes:

Key Takeaway: MDX combines the simplicity of Markdown with the power of React components, giving you the best of both worlds!

Did you know? @next/mdx is the official MDX integration for Next.js, providing excellent performance and developer experience.

Pro Tip: You can create your own custom components and make them available globally in your MDX files through the mdx-components.tsx file.

Mixing Markdown and Components

The beauty of MDX is that you can seamlessly mix regular markdown with JSX components:

Here's a regular markdown paragraph with bold text and italic text.

💡

And here's a component right in the middle of your content!

You can also use markdown features like:

Bullet lists
Bold and italic text
Links
Images
Code blocks

// And even code blocks!
const greeting = "Hello, MDX!"
console.log(greeting)

Code Example

Here's how you might use these components in your own MDX files:

<Callout type="info">
Your important message here!
</Callout>

<Card title="Your Title">
Your card content here
</Card>

<HighlightBox color="primary">
Your highlighted content here
</HighlightBox>

Benefits of Using @next/mdx

Performance: Built-in optimization and compilation at build time
Type Safety: Full TypeScript support for your components
Flexibility: Use any React component in your content
SEO Friendly: Proper HTML output for search engines
Developer Experience: Hot reload, error handling, and great tooling

Conclusion

✅

You now have a working example of @next/mdx with custom JSX components! Feel free to explore, modify, and create your own components to enhance your content.

MDX opens up endless possibilities for creating rich, interactive content while maintaining the simplicity of markdown. Start experimenting with your own components and see what you can create!

Wanderlust.