Getting Started with MDX in Next.js

MDX lets you write Markdown and use React components in the same file.
Perfect for blogs, docs, and content-driven sites 🚀

Why MDX?

• Write content using Markdown
• Embed React components
• Great for blogs & documentation
• Fully supported by Next.js

• [] new checklist

My Storybook Documentation

Here's an example table:

Basic Markdown

Text styles

• Bold text
• Italic text
• ~~Strikethrough~~

Lists

1. First item
2. Second item
3. Third item

• Item2
• Item2

Code Block

export function hello(name: string) {
  return `Hello, ${name}!`;
}

export function testFunction() {
  return a + b;
}

Tables

| Package | Purpose | Version | | ----------------- | ----------------------- | -------- | | @next/mdx | MDX support for Next.js | latest | | next-mdx-remote | Remote MDX rendering | 5.x | | contentlayer | Content management | 0.x |