前言
將使用的套件:
- next Next.js 框架
- next-mdx-remote 處理和載入 MDX 內容
- gray-matter 解析 Markdown 的前置資料
本教學的程式碼庫:
https://github.com/tszhong0411/nextjs-mdx-blog
範例
如何建立部落格
首先,我們使用以下指令建立 Next.js 專案:
接著,建立以下檔案:
components/layout.jsx
- 將所有組件包裝在容器中(可選,用於樣式)data/blog/*.mdx
- 部落格文章lib/format-date.js
- 將日期格式化為MM DD, YYYY
pages/blog/[slug].jsx
- 文章頁面,使用 動態路由
components
layout.jsx
data
blog
markdown.mdx
nextjs.mdx
react.mdx
lib
format-date.js
mdx.js
pages
blog
[slug].jsx
如何處理 Markdown 檔案
首先建立變數 const root
,其值為根目錄,process.cwd()
方法返回當前 Node.js 進程的工作目錄。
接著定義變數 POSTS_PATH
,用於儲存文章檔案的路徑。
使用 fs
讀取該目錄下的內容,即 data/blog
下的所有檔案名。
然後撰寫一個函數移除檔案副檔名,稍後會用到。
接著根據 slug 獲取文章內容。
接下來可以獲取所有文章,以顯示在首頁。
格式化日期
首頁
文章頁面
這樣,一個簡單的部落格就完成了。