Next.js 个人站点脚手架

这是一套开箱即用的个人网站/技术作品集/博客系统，基于 Next.js 16 + App Router + TypeScript + Tailwind CSS 技术栈构建，采用本地 Markdown 作为内容管理方案，为技术从业者提供专业的个人品牌展示载体。

核心功能特性

• 首页：品牌化个人介绍区、精选文章展示、代表作项目聚合、RSS 订阅入口
• 项目作品集：结构化展示项目案例，包含技术选型、核心决策、落地成果与关联技术文章
• 博客体系：自动扫描 content/posts 目录下的 Markdown 文件生成文章列表
• 文章详情：自动生成动态元数据、Open Graph 分享图，内置基于 SQLite 的本地评论系统
• 评论管理后台：支持身份验证、评论审核、驳回、删除与基础防刷机制
• SEO 全链路支持：自动生成 RSS 订阅、sitemap.xml、robots.txt、Open Graph/Twitter 分享卡片
• 可选第三方集成：开箱支持 Plausible 隐私友好型网站统计

本地开发启动

npm run dev

启动后访问 http://localhost:3000 即可预览站点。

个性化配置指南

1. 站点基础信息配置

编辑 lib/site.ts 文件，修改中英文站点文案与导航配置，快速打造个人品牌定位。

2. 项目作品集替换

编辑 lib/projects.ts 文件，将示例项目替换为你的个人项目、开源贡献或工作案例，补充项目成果、技术亮点与相关链接。

3. 内容创作流程

在 content/posts 目录下创建 .md 文件即可发布新文章：

---
title: "文章标题"
summary: "文章核心观点摘要"
date: "2026-04-06"
tags:
  - Next.js
  - 前端工程化
featured: false
---

此处开始撰写文章正文内容。

英文版本文章放置在 content/posts/en 目录下，保持与中文版本相同的 slug 即可实现双语自动关联。

4. 生产环境配置

复制 .env.example 文件为 .env.local，根据实际需求填写配置项：

• NEXT_PUBLIC_SITE_URL：站点正式部署域名，用于生成 canonical 标签、RSS 订阅、站点地图与社交分享图
• COMMENT_ADMIN_PASSWORD：评论管理后台访问密码，通过 /admin/comments 路径登录管理
• COMMENT_REQUIRE_MODERATION：评论审核开关，1 表示需审核后发布，0 表示直接发布
• NEXT_PUBLIC_PLAUSIBLE_*：Plausible 统计服务相关配置

项目目录结构

app/                 # 站点路由与页面组件
  about/             # 关于页面
  admin/comments/    # 评论管理后台
  api/comments/      # 评论接口
  blog/              # 博客列表与详情页
  projects/          # 项目作品集页面
  layout.tsx         # 全局布局
  page.tsx           # 首页
components/          # 公共 UI 组件
  project-card.tsx   # 项目卡片组件
  post-card.tsx      # 文章卡片组件
  follow-panel.tsx   # 关注引导组件
  local-comments.tsx # 评论展示组件
content/             # 内容资源目录
  posts/             # Markdown 文章存储
lib/                 # 工具函数与配置
  comments.ts        # 评论系统逻辑
  projects.ts        # 项目数据配置
  site.ts            # 站点全局配置

后续扩展建议

1. 替换 lib/projects.ts 中的示例项目为你的真实项目案例
2. 为项目添加独立详情页面，替代当前的聚合展示模式
3. 扩展标签归档、专题专栏、站内搜索等内容聚合功能
4. 评论数据默认存储在本地 data/comments.db，上线前请制定合理的备份策略，并妥善设置管理后台密码