ahnafnafee.dev
Next.js · React / 作品集 · 博客 · 作者 ahnafnafee
基于 Next.js 16 与 React 19 的个人作品集与 MDX 博客模板，内置 JSON-LD、llms.txt、动态 OG 图、PWA 与 Vitest 测试。
模板详细介绍
ahnafnafee.dev 是 Ahnaf An Nafee 的个人作品集与 MDX 博客站点，同时作为可复用的模板发布。项目使用 Next.js 16 App Router、React 19、TypeScript 与 Tailwind CSS v4，内容由 MDX 驱动，通过 gray-matter 解析 frontmatter，不依赖 CMS 或数据库。站点包含首页、博客、研究项目页与主题归档，博客支持阅读时长、相关文章导航、RSS 摘要与全文两种输出。
SEO 与 AI 搜索是模板的重点：博客、作品集与研究详情页输出相互关联的 schema.org @graph JSON-LD，首页与简历页使用 ProfilePage，主题归档使用 CollectionPage 与 ItemList，并提供 FAQPage 与 HowTo 的 MDX 组件。构建时生成 llms.txt 清单，站点地图包含图片条目与 frontmatter 驱动的 lastmod，robots.txt 显式列出 AI 爬虫允许名单。Open Graph 与 Twitter 卡片统一为 1200×630，动态 OG 图由 /api/og 通过 @vercel/og 渲染。
工程方面包含 shadcn/ui 组件层、Vitest 测试、JSON-LD 校验脚本、alt 文本审计脚本，以及覆盖类型检查、lint、测试、构建与 JSON-LD 验证的 GitHub Actions CI。部署侧提供 vercel.json 的 installCommand 以启用 Yarn 4，并支持发布后向 IndexNow、Google Indexing API 与百度推送提交 URL。
主要特点
- 博客、作品集与研究详情页输出相互关联的 schema.org @graph JSON-LD，覆盖 BlogPosting、SoftwareSourceCode、ScholarlyArticle 等类型
- 构建时自动生成 llms.txt 清单，robots.txt 显式列出 GPTBot、ClaudeBot、PerplexityBot 等 AI 爬虫允许名单
- 动态 OG 图由 /api/og 使用 @vercel/og 渲染，统一为 1200×630 并带 alt 文本
- MDX 内容管线支持 Mermaid 图表、KaTeX 数学公式、Prism 语法高亮与自定义组件（TLDR、KeyPoints、FAQ、HowTo 等）
- 内置 Vitest 测试、JSON-LD 校验脚本与 alt 文本审计脚本，GitHub Actions 在每次推送与 PR 时执行类型检查、lint、测试、构建与 JSON-LD 验证
- PWA 支持离线访问，并配置严格 CSP、HSTS 等安全响应头
适用场景
- 开发者、研究者或工程师搭建个人作品集与博客，需要开箱即用的 SEO 与结构化数据
- 撰写学术项目页面，需要展示作者与机构、会议/期刊信息、DOI/arXiv 标识及 BibTeX 复制
- 发布技术长文，需要 Mermaid 图表、KaTeX 公式、代码高亮与 FAQ/HowTo 结构化内容
- 希望让 AI 搜索引擎与爬虫更好地理解站点内容，需要 llms.txt 与 AI 爬虫允许名单
- 作为 Next.js 16 + React 19 + Tailwind v4 的参考实现，学习 SEO 完整的站点结构
适合人群
- 需要个人作品集与 MDX 博客的开发者、研究者与工程师
- 关注 SEO、结构化数据与 AI 搜索可见性的站点作者
- 希望以 MIT 许可 fork 并二次开发模板的前端开发者
- 使用 Next.js App Router 与 TypeScript 的技术博客维护者
使用前需要核对
- 项目使用 Yarn 4（通过 Corepack 启用），vercel.json 中的 installCommand 会执行 corepack enable 与 yarn install --immutable
- 内容以 MDX 文件形式存放，frontmatter 由 gray-matter 解析，无需配置 CMS 或数据库
- 构建时生成 llms.txt 与站点地图，发布后可通过 IndexNow、Google Indexing API 与百度推送提交 URL，相关说明见 docs/INDEXING.md
- 可运行 yarn validate:json-ld 校验构建输出中的 JSON-LD，运行 yarn audit:alt-text 检查 MDX 中的 alt 文本
- 截图位于 public/images/screenshot-*.png，fork 后建议替换为自己部署的截图
本介绍由 AI 根据目录元数据和仓库 README 整理，实际功能以原仓库为准。
功能与适用范围
目录记录的用途为作品集、博客，主要技术栈为Next.js、React。功能是否完整实现，需要在源码和演示中进一步确认。
- Next.js
- React
- 作品集
- 博客