Next.jsReact作品集博客

nextjs-portofolio-website — Next.js 作品集模板

作者 alemoraru

基于 Next.js、TypeScript、Tailwind CSS 和 MDX 的开发者作品集模板，包含首页、工作、项目、博客四个页面，支持内容自动发现、SEO 优化与主题定制。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图

整体预览

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

作者提供的预览

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

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

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

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

值得关注的模板亮点

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

使用 MDX 编写博客、项目与工作经历，Zod 校验 frontmatter，构建时捕获字段错误

自动生成 sitemap.xml、RSS 订阅、llms.txt 与动态 Open Graph 图片

支持明暗模式切换，并可运行时切换 10 种强调色，选择保存在 localStorage

博客、项目与工作条目支持分页、排序、筛选，博客含分类页与相似文章推荐

站点元数据与首页内容集中在 src/data 目录，无需修改组件即可定制

模板详细介绍

这是一个面向开发者与设计师的个人网站模板，使用 Next.js、TypeScript、Tailwind CSS 和 MDX 构建。它提供首页、工作经历、项目与博客四个主要页面，内容以 .mdx 文件形式存放在 src/data 目录下，模板会自动发现并渲染，无需手动维护列表或路由。所有站点元数据与首页文案集中在 src/data/metadata.ts 和 src/data/content.ts 中，便于统一修改。

模板内置了较完整的 SEO 支持，包括 JSON-LD 结构化数据、自动生成的 sitemap.xml、RSS 订阅、llms.txt 路由以及动态 Open Graph 图片。博客、项目与工作条目均支持分页、排序和筛选，博客还提供分类页与相似文章推荐。主题方面支持明暗模式切换，并可在运行时通过右键或长按主题按钮切换 10 种强调色，选择会保存在 localStorage 中。

Next.jsReact作品集博客

适合你的项目吗？

适用场景

开发者搭建个人作品集网站，集中展示工作经历、项目与博客文章
技术写作者使用 MDX 撰写博客，并希望自动获得 SEO 元数据与订阅源
需要快速启动一个可定制主题、支持明暗模式与强调色切换的个人站点
希望内容以文件形式管理，避免维护数据库或后台系统的静态站点项目

适合人群

熟悉 Next.js 与 React 的前端开发者
希望以 Markdown/MDX 管理内容的个人博主
需要展示项目与工作经历的自由职业者或求职者
想要一个可深度定制、不依赖外部 CMS 的静态作品集模板的开发者

上手与定制指南

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

1
克隆仓库后运行 npm install 或 pnpm install 安装依赖，Husky Git 钩子会自动配置
2
运行 npm run dev 或 pnpm dev 启动开发服务器，默认地址为 http://localhost:3000
3
在 src/data/metadata.ts 中修改站点标题、描述、作者、域名与社交账号等 SEO 信息
4
在 src/data/content.ts 中修改首页介绍、个人事实与页脚社交链接
5
在 src/data/blog、src/data/projects、src/data/work 目录下新增 .mdx 文件并填写 frontmatter 即可添加内容

查看仓库使用说明