Next.jsReact作品集博客

ahnafnafee.dev — Next.js 作品集模板

作者 ahnafnafee

基于 Next.js 16 与 React 19 的个人作品集与 MDX 博客模板，内置 JSON-LD、llms.txt、动态 OG 图、PWA 与 Vitest 测试。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

整体预览

访问演示网站在新标签页打开

作者提供的预览

查看现有预览图，更多页面尚未采集。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-23查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

博客、作品集与研究详情页输出相互关联的 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 等安全响应头

模板详细介绍

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。

Next.jsReact作品集博客

适合你的项目吗？

适用场景

开发者、研究者或工程师搭建个人作品集与博客，需要开箱即用的 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 的技术博客维护者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
项目使用 Yarn 4（通过 Corepack 启用），vercel.json 中的 installCommand 会执行 corepack enable 与 yarn install --immutable
2
内容以 MDX 文件形式存放，frontmatter 由 gray-matter 解析，无需配置 CMS 或数据库
3
构建时生成 llms.txt 与站点地图，发布后可通过 IndexNow、Google Indexing API 与百度推送提交 URL，相关说明见 docs/INDEXING.md
4
可运行 yarn validate:json-ld 校验构建输出中的 JSON-LD，运行 yarn audit:alt-text 检查 MDX 中的 alt 文本
5
截图位于 public/images/screenshot-*.png，fork 后建议替换为自己部署的截图

查看仓库使用说明