在 Next.js 使用 MDX 撰寫技術文章 | 喂！我是 Wei

喂！我是 Wei

Front-End Engineer

Be a Problem Solver.

⌘K

導覽

所有文章緣起互動小功能

文章分類

目錄

什麼是 MDX？為什麼用 MDX？加入 MDX 到 Next.js 專案 1. 安裝套件 2. 建立文章資料夾 3. 建立文章讀取工具：lib/posts.ts 4. 建立文章頁面：app/posts/[slug]/page.tsx 管理文章：本地檔案為主文章的基本格式解析 frontmatter：gray-matter 編譯 MDX：next-mdx-remote 建立文章頁小結

相關文章

Next.js Blog 實作文章目錄（TOC）

2026年3月7日

Next.js Blog 加入程式碼高亮（Shiki + rehype-pretty-code）

2026年3月6日

我是如何用 Next.js 打造這個技術 Blog

2026年3月4日

最新文章

瀏覽器快取機制：Memory Cache、Disk Cache、Service Worker 與 PWA

前端 CI/CD 與正式環境除錯：從 Pull Request 到事故排查

即時資料怎麼選？Polling、SSE、WebSocket 比較

前端系統設計：如何拆元件、資料流與大型專案架構？

無障礙不是加 ARIA：語意化 HTML、鍵盤操作與焦點管理