从零构建现代 Next.js 博客

构建一个令人愉悦的博客远不止“写文章”这么简单。从内容创作到页面展示，再到 SEO 与性能表现，每一个环节都决定了最终的体验。

为什么选择 Next.js

Next.js 提供了灵活的渲染策略与优雅的开发体验，我们可以针对不同页面在静态生成（SSG）与服务端渲染（SSR）之间自由切换。同时，App Router 让布局组合更加清晰，让我们可以轻松地构建多层布局与共享 UI。

Tailwind + shadcn/ui 的组合优势

• 设计一致性：通过 shadcn/ui 提供的基础组件结合 Tailwind 的原子化样式，使得 UI 既统一又易于扩展。
• 强大的主题能力：借助 CSS 变量与 next-themes，我们可以快速构建浅色/深色模式切换。
• 高效开发：大部分样式通过类名即可完成，无需来回切换到样式文件。

内容模型规划

在项目中，我们将文章抽象为包含以下字段的实体：

• 标题、描述、发布时间与更新日期
• 分类与标签，用于构建导航与过滤
• 阅读时长、字数统计，提升读者预期
• 目录（Table of Contents），方便快速跳转
• 相关文章推荐，提升阅读深度

配合 gray-matter 与 MDX，我们不仅能保存结构化元信息，也能在内容中灵活嵌入 React 组件。

代码高亮体验

使用 rehype-pretty-code 搭配 Shiki，我们可以获得接近 IDE 的代码高亮体验：

import { compileMDX } from "next-mdx-remote/rsc";
 
export async function parsePost(source: string) {
  return compileMDX({
    source,
    options: {
      mdxOptions: {
        remarkPlugins: [remarkGfm],
        rehypePlugins: [[rehypePrettyCode, { theme: "github-dark" }]],
      },
    },
  });
}

在高亮的同时，我们还支持代码行高亮、单词标注与行号显示，让教程类文章更加直观。

信息架构与页面布局

我们为博客设计了以下信息架构：

1. 首页展示精选文章、最新内容、标签云与订阅入口
2. 独立的文章列表页，支持按标签/分类/关键字筛选
3. 文章详情页提供目录、阅读统计、相关文章推荐
4. 关于页面与内容指南，帮助新读者快速了解站点定位

持续交付与迭代

通过将文章内容放在仓库内，我们可以：

• 使用 PR 审核内容，保证质量
• 在 CI 中运行拼写与链接检查
• 通过版本控制追踪文章迭代

下一步

这篇文章是整个项目的设计蓝图。接下来，你可以继续阅读：

• 构建可扩展的内容管道
• 让博客更快更稳的性能优化策略

祝你构建顺利！