从零搭建 Next.js 博客全记录

Next.jsTypeScript

为什么先搭建页面骨架

第一阶段只处理首页结构,让导航、内容区和页脚拥有稳定的组件边界。文章数据随后接入,不让内容文件承担页面布局职责。

页面组件负责展示,Markdown 文件负责内容。

目录划分

  • src/app 保存路由与页面组合。
  • src/components 保存可复用的 UI 组件。
  • src/lib 保存文章读取和排序逻辑。
  • content/posts 保存 Markdown 与 MDX 文章。

首页如何读取文章

首页组件从文章数据层取得文章摘要,再按发布日期排序:

const posts = getAllPosts().slice(0, 4);

这样新增文章时,只需要在 content/posts 中添加文件。

下一步

后续可以在不修改文章内容的前提下调整列表、正文排版和导航样式。