如何用 Next.js 建立部落格

在這篇文章中，我將分享如何使用 Next.js 建立一個功能完整的部落格。

技術棧

我們將使用以下技術：

1. Next.js 14 - React 框架
2. TypeScript - 型別安全
3. Tailwind CSS - 樣式框架
4. gray-matter - 解析 Markdown frontmatter
5. remark - Markdown 轉 HTML

專案結構

my-blog/
├── app/
│   ├── page.tsx          # 首頁
│   ├── blog/
│   │   ├── page.tsx      # 文章列表
│   │   └── [slug]/
│   │       └── page.tsx  # 文章詳情
├── posts/                # Markdown 文章
├── lib/
│   └── posts.ts          # 文章處理函式
└── components/           # 共用元件

下一步

在接下來的文章中，我會詳細介紹每個步驟的實作細節。