Next.js 项目结构设计指南

Next.js 很适合做个人网站、CMS 和全栈产品，但项目结构如果一开始不清楚，后面会很快变成页面文件、接口和组件互相缠绕。

我会先划四条边界

1. app/ 负责路由、页面、API 和 SEO。
2. components/site/ 负责前台展示体验。
3. components/admin/ 负责后台管理体验。
4. lib/ 负责数据访问、鉴权、Markdown、SEO 和工具函数。

前台和后台不要混在一起

前台需要表达力、动效、视觉节奏；后台需要稳定、密度、可预期。它们可以共享基础组件，但不应该共享页面思路。

数据读取保持集中

我倾向在 lib/data.ts 里放公开数据读取和 normalize 逻辑。这样页面不用知道 tags、techStack 这些字段在数据库里是 JSON 字符串，也方便后续切换数据源。

什么时候加抽象

只有当重复已经影响维护，或者一个概念在多个页面都稳定出现时，我才会提取组件。过早抽象会让项目看起来工程化，实际上更难改。