Xây Dựng Blog Cá Nhân — Phase 2: Render MDX Theo Yêu Cầu

# Hello World
 
Đây là đoạn văn bình thường.
 
<CustomAlert type="warning">
  Đây là component React nằm trong Markdown!
</CustomAlert>
 
```bash
npm install next-mdx-remote
```

npm install next-mdx-remote gray-matter remark-gfm rehype-pretty-code rehype-slug shiki

mkdir -p content/posts

my-blog/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── blog/
│       ├── page.tsx          # Trang danh sách bài
│       └── [slug]/
│           └── page.tsx      # Trang chi tiết bài
├── components/
│   ├── Header.tsx
│   └── Footer.tsx
├── content/
│   └── posts/                # File MDX nằm đây
│       ├── hello-world.mdx
│       └── my-second-post.mdx
├── lib/
│   ├── mdx.ts               # MDX compiler config (dùng React.createElement, không có JSX)
│   └── posts.ts              # Đọc/liệt kê bài từ đĩa
└── package.json

---
title: "Hello World — Bài Viết Đầu Tiên"
description: "Bài test ngắn để kiểm tra pipeline MDX hoạt động từ đầu đến cuối."
date: "2026-02-28"
tags: ["intro", "blog"]
---
 
Chào mừng đến blog của tôi! Bài viết này chứng minh pipeline MDX đã hoạt động.
 
## Tại Sao Tôi Xây Cái Này
 
Tôi muốn một blog mà:
 
- Nằm trong Git repo
- Dùng Markdown để viết
- Hỗ trợ tô màu code ngay từ đầu
 
## Ví Dụ Code
 
Đây là một hàm TypeScript đơn giản:
 
```typescript
function greet(name: string): string {
  return `Hello, ${name}!`
}
 
console.log(greet('World'))
```
 
## Tiếp Theo
 
Ở phase tiếp theo mình sẽ thêm database với Drizzle ORM cho view count và subscription.

---
title: "Hello World"           # Hiển thị làm <h1> của trang
description: "Bài test ngắn..."  # Dùng trong thẻ <meta> và card bài viết
date: "2026-02-28"             # Ngày xuất bản (YYYY-MM-DD)
tags: ["intro", "blog"]        # Để lọc và hiển thị
---

// lib/posts.ts
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
 
// Interface TypeScript cho metadata bài viết
export interface PostMeta {
  title: string
  description: string
  date: string
  tags: string[]
  image?: string
  slug: string
}
 
// Bài viết đầy đủ = metadata + nội dung MDX thô
export interface Post extends PostMeta {
  content: string
}

// lib/posts.ts (tiếp)
 
const POSTS_DIR = path.join(process.cwd(), 'content/posts')
 
function formatDate(date: Date | string): string {
  const d = new Date(date)
  return d.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}
 
export function getAllPosts(): PostMeta[] {
  // 1. Đọc tất cả tên file .mdx từ thư mục posts
  const filenames = fs.readdirSync(POSTS_DIR)
    .filter((f) => f.endsWith('.mdx'))
 
  // 2. Parse frontmatter từ mỗi file
  const posts = filenames.map((filename) => {
    const slug = filename.replace(/\.mdx$/, '')
    const fullPath = path.join(POSTS_DIR, filename)
    const fileContents = fs.readFileSync(fullPath, 'utf8')
    const { data } = matter(fileContents)
 
    return {
      slug,
      title: data.title,
      description: data.description,
      date: formatDate(data.date),
      tags: data.tags || [],
      image: data.image,
    }
  })
 
  // 3. Sắp xếp theo ngày (mới nhất trước)
  return posts.sort((a, b) =>
    new Date(b.date).getTime() - new Date(a.date).getTime()
  )
}

// lib/posts.ts (tiếp)
 
export function getPostBySlug(slug: string): Post | null {
  const fullPath = path.join(POSTS_DIR, `${slug}.mdx`)
 
  // Trả về null nếu file không tồn tại
  if (!fs.existsSync(fullPath)) {
    return null
  }
 
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  const { data, content } = matter(fileContents)
 
  return {
    slug,
    title: data.title,
    description: data.description,
    date: formatDate(data.date),
    tags: data.tags || [],
    image: data.image,
    content, // Chuỗi MDX thô — sẽ compile sau
  }
}

// lib/mdx.ts
import React from 'react'
import { compileMDX } from 'next-mdx-remote/rsc'
import rehypePrettyCode from 'rehype-pretty-code'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'
 
// Tùy chọn rehype-pretty-code (tô màu bằng Shiki)
const prettyCodeOptions = {
  theme: 'github-dark',     // Theme tối cho code block
  keepBackground: true,      // Giữ màu nền của theme
  defaultLang: 'plaintext',  // Ngôn ngữ mặc định khi không chỉ định
}
 
export async function compileMDXContent(source: string) {
  const { content } = await compileMDX({
    source,
    options: {
      parseFrontmatter: true,
      mdxOptions: {
        remarkPlugins: [remarkGfm],
        rehypePlugins: [
          rehypeSlug,
          [rehypePrettyCode, prettyCodeOptions],
        ],
      },
    },
  })
 
  return content
}

// app/blog/page.tsx
import Link from 'next/link'
import { getAllPosts } from '@/lib/posts'
 
export default function BlogPage() {
  const posts = getAllPosts()
 
  return (
    <div className="max-w-3xl mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold mb-8">Blog</h1>
 
      {posts.length === 0 ? (
        <p className="text-muted-foreground">Chưa có bài nào. Quay lại sau nhé!</p>
      ) : (
        <div className="space-y-8">
          {posts.map((post) => (
            <article key={post.slug} className="group">
              <Link href={`/blog/${post.slug}`}>
                <div className="border rounded-lg p-6 transition-colors hover:bg-accent">
                  <time className="text-sm text-muted-foreground">
                    {post.date}
                  </time>
                  <h2 className="text-2xl font-semibold mt-1 mb-2 group-hover:text-primary">
                    {post.title}
                  </h2>
                  <p className="text-muted-foreground">{post.description}</p>
                  {post.tags.length > 0 && (
                    <div className="flex gap-2 mt-3">
                      {post.tags.map((tag) => (
                        <span
                          key={tag}
                          className="px-2 py-1 text-xs rounded-full bg-secondary text-secondary-foreground"
                        >
                          {tag}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              </Link>
            </article>
          ))}
        </div>
      )}
    </div>
  )
}

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { getPostBySlug } from '@/lib/posts'
import { compileMDXContent } from '@/lib/mdx'
 
interface PageProps {
  params: Promise<{ slug: string }>
}
 
// Bắt buộc render theo yêu cầu (không sinh tĩnh)
export const dynamic = 'force-dynamic'
 
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const post = getPostBySlug(slug)
 
  if (!post) {
    return { title: 'Không Tìm Thấy Bài Viết' }
  }
 
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.date,
    },
  }
}
 
export default async function PostPage({ params }: PageProps) {
  const { slug } = await params
  const post = getPostBySlug(slug)
 
  if (!post) {
    notFound()
  }
 
  // Compile MDX mỗi request (render theo yêu cầu)
  const content = await compileMDXContent(post.content)
 
  return (
    <article className="max-w-3xl mx-auto px-4 py-12">
      <header className="mb-8">
        <Link
          href="/blog"
          className="inline-flex items-center text-muted-foreground hover:text-foreground mb-6"
        >
          ← Quay lại blog
        </Link>
        <time className="block text-sm text-muted-foreground mb-2">
          {post.date}
        </time>
        <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
        {post.tags.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {post.tags.map((tag) => (
              <span
                key={tag}
                className="px-2 py-1 text-sm rounded-full bg-secondary text-secondary-foreground"
              >
                {tag}
              </span>
            ))}
          </div>
        )}
      </header>
 
      {/* Class prose cho typography đẹp */}
      <div className="prose prose-slate dark:prose-invert max-w-none">
        {content}
      </div>
    </article>
  )
}

npm install @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

<div className="prose prose-slate dark:prose-invert max-w-none">
  {content}
</div>

```typescript
const x: number = 42
```

// lib/mdx.ts — tùy chọn: hỗ trợ hai theme
const prettyCodeOptions = {
  theme: {
    dark: 'github-dark',
    light: 'github-light',
  },
  keepBackground: true,
  defaultLang: 'plaintext',
}

// lib/mdx.ts — với component tùy chỉnh (dùng React.createElement, không có JSX)
import React from 'react'
import { compileMDX } from 'next-mdx-remote/rsc'
 
// Định nghĩa Callout component ở components/Callout.tsx (JSX nằm đó).
// Ở đây trong lib/mdx.ts, mình đăng ký nó bằng React.createElement — không cần JSX.
export async function compileMDXContent(source: string) {
  const { content } = await compileMDX({
    source,
    options: {
      parseFrontmatter: true,
      mdxOptions: {
        remarkPlugins: [remarkGfm],
        rehypePlugins: [
          rehypeSlug,
          [rehypePrettyCode, prettyCodeOptions],
        ],
      },
    },
    components: {
      // React.createElement giữ file không có JSX (.ts extension hợp lệ)
      Callout: (props: any) => React.createElement(Callout, props),
    },
  })
 
  return content
}

<Callout type="warning">
  Đảm bảo cài đầy đủ dependency trước khi tiếp tục!
</Callout>

| Tính năng | Hỗ trợ |
|-----------|--------|
| Bảng      | ✅     |
| Task list | ✅     |
| Gạch ngang | ✅   |

- [x] Cài dependency
- [x] Tạo thư mục nội dung
- [ ] Viết bài đầu tiên
- [ ] Deploy lên production

~~Đoạn văn này bị gạch ngang~~

Truy cập https://nextjs.org để xem tài liệu.

<!-- Input: ## My Heading -->
<!-- Output: <h2 id="my-heading">My Heading</h2> -->

npm install next-mdx-remote gray-matter remark-gfm rehype-pretty-code rehype-slug shiki

```typescript   ← Phải chỉ định ngôn ngữ
const x = 42
```

npm install @tailwindcss/typography

/* app/globals.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";