Next.js Blog 實作文章目錄（TOC） | 喂！我是 Wei

喂！我是 Wei

Front-End Engineer

Be a Problem Solver.

⌘K

導覽

所有文章緣起互動小功能

文章分類

目錄

整體資料流第一步：定義資料型別第二步：從 MDX 提取標題第三步：在 getPostBySlug 回傳 toc 第四步：建立 <Toc /> 元件 IntersectionObserver 的 rootMargin 調整第五步：@right Parallel Routes 與 TOC 的放置位置小結

相關文章

在 Next.js 使用 MDX 撰寫技術文章

2026年3月6日

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

2026年3月6日

前端工程師面試題：CSR、SSR、SSG 差在哪？Next.js 為什麼適合 SEO？

2026年6月2日

最新文章

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

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

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

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

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