MDX là gì? Hướng dẫn từ A-Z cho Developer

# Tiêu đề
 
Đây là đoạn văn bản bình thường.
 
- Item 1
- Item 2

# Tiêu đề
 
Đây là đoạn văn bản bình thường.
 
<Alert type="info">
  Đây là React component nhúng trong bài viết!
</Alert>
 
<InteractiveDemo />

npm install @next/mdx @mdx-js/loader @mdx-js/react

import createMDX from "@next/mdx";
 
const withMDX = createMDX({
  extension: /\.mdx?$/,
});
 
export default withMDX({
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});

npm install velite

import { defineConfig, s } from "velite";
 
export default defineConfig({
  collections: {
    posts: {
      name: "Post",
      pattern: "blog/**/*.mdx",
      schema: s.object({
        title: s.string(),
        description: s.string(),
        date: s.isodate(),
        published: s.boolean().default(false),
        tags: s.array(s.string()).default([]),
        body: s.mdx(),
      }),
    },
  },
});

npm install contentlayer next-contentlayer

npm install rehype-pretty-code shiki

import rehypePrettyCode from "rehype-pretty-code";
 
// trong mdx options:
mdx: {
  rehypePlugins: [
    [rehypePrettyCode, { theme: "one-dark-pro" }],
  ],
}

function Hello({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}

def fibonacci(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

---
title: "Tiêu đề bài viết"
description: "Mô tả ngắn"
date: "2026-02-26"
published: true
featured: false
tags: ["react", "next.js"]
authors: ["Datto"]
---

**Bold text**
*Italic text*
~~Strikethrough~~
`inline code`
[Link text](https://example.com)

## Heading 2
### Heading 3
#### Heading 4

- Unordered item 1
- Unordered item 2
 
1. Ordered item 1
2. Ordered item 2

> Đây là một blockquote.
> Có thể nhiều dòng.

| Cột 1 | Cột 2 | Cột 3 |
|--------|--------|--------|
| A | B | C |
| D | E | F |

![Alt text](/images/example.png)