Next.js 15 + Velite: 現代內容管理方案

在建構 8plus.app 時，我選擇了 Next.js 15 + Velite 的技術組合。這篇文章分享選擇這個方案的原因和實踐經驗。

為什麼選擇 Velite？

1. 類型安全

Velite 基於 Zod schema，提供完整的 TypeScript 類型支援：

const posts = defineCollection({
  name: 'Post',
  pattern: 'content/posts/**/*.mdx',
  schema: s.object({
    title: s.string(),
    date: s.isodate(),
    tags: s.array(s.string()).optional(),
    summary: s.string(),
    published: s.boolean().default(true),
    content: s.mdx()
  })
})

2. 簡單而強大

相比 Contentlayer，Velite 提供了更簡潔的 API 和更好的效能：

• 更快的建構速度
• 更少的配置
• 更好的錯誤提示

3. Next.js 15 相容性

Velite 原生支援 Next.js 15，避免了版本相容性問題。

實踐經驗

配置檔案結構

export default defineConfig({
  root: '.',
  output: {
    data: '.velite',
    assets: 'public/static',
    base: '/static/',
    clean: true
  },
  collections: { posts, projects },
  mdx: {
    rehypePlugins: [
      rehypeSlug,
      [rehypeAutolinkHeadings, { behavior: 'wrap' }]
    ]
  }
})

在 React 元件中使用

import { posts } from '.velite'

export default function BlogPage() {
  const publishedPosts = posts
    .filter(post => post.published)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
  
  return (
    <div>
      {publishedPosts.map(post => (
        <article key={post.slug}>
          <h2>{post.title}</h2>
          <p>{post.summary}</p>
        </article>
      ))}
    </div>
  )
}

建構流程

建構流程非常簡單：

velite && next build

Velite 會：

1. 掃描 MDX 檔案
2. 驗證 frontmatter
3. 生成類型定義
4. 編譯內容為 JSON

優勢總結

1. 開發體驗: 完整的類型支援和智慧提示
2. 效能: 快速的建構和執行時效能
3. 簡潔: 最少的配置，最大的功能
4. 可靠: 基於 Zod 的資料驗證

結論

Next.js 15 + Velite 是一個優秀的現代內容管理方案，特別適合：

• 技術部落格
• 文件網站
• 專案展示
• 個人網站

如果你正在尋找一個簡單而強大的內容管理解決方案，強烈推薦嘗試這個組合。

---

想了解更多技術細節？歡迎預約諮詢時間深入討論。