Next.jsReact后台作品集

3d-portfolio — Next.js 后台模板

作者 HasnainIrfan

Next.js 16 + Three.js 的 3D 作品集模板，带 Supabase 后台管理联系表单，SEO 开箱即用。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

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

值得关注的模板亮点

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

3D 动画英雄区、着色器地球、固定横向案例展示，视觉辨识度高

内置管理后台，联系表单数据直接存入 Supabase，支持搜索、分页和删除

SEO 开箱即用：sitemap、robots、canonical、Open Graph、Twitter 卡片、JSON-LD

所有内容集中在 constants/ 目录，按类型拆分为文件，改文案无需动组件

环境变量全部可选，空 .env 也能构建运行，无服务端密钥

代码结构清晰，TypeScript 严格模式，单文件不超过 250 行

模板详细介绍

3d-portfolio 是一个面向开发者的作品集网站模板，核心卖点在于把视觉冲击和实用功能结合在一起。它用 Next.js 16、React 19、TypeScript 和 Tailwind CSS v4 构建，首页包含一个动画 3D 英雄区（GLTF 模型）、随滚动移动的着色器地球、固定的横向案例展示，以及贯穿页面的滚动驱动动画。内容结构覆盖了作品集通常需要的板块：项目、服务、经验时间线、技能、评价等，所有文案和项目数据都集中在 constants/ 目录下，按领域拆分成类型化文件，改内容时不需要动组件。

与多数纯展示型模板不同，它内置了一个联系表单和对应的管理后台。表单提交的数据会写入你自己的 Supabase 数据库，并在 /admin 路径下以私有收件箱形式呈现，支持搜索、分页和删除。后台通过 Supabase Auth 和 admin_users 白名单做权限控制，仓库里不包含任何服务端密钥，环境变量全部可选，即使不配置也能正常运行。SEO 方面也做了不少工作，包括 sitemap、robots、canonical、Open Graph、Twitter 卡片和 JSON-LD 结构化数据，并且 /admin 被排除在索引之外。

需要留意的是，模板的 3D 模型来自 Sketchfab 的第三方同人作品，许可证需要自行核实并保留署名；个人内容、项目截图和客户 logo 也归原作者所有，部署前必须替换。此外，README 中提到的“生产就绪”更多指代码结构完整，实际上线前仍需自己测试表单流程、配置 Supabase 和域名。如果你想要一个视觉突出、又带点后台管理能力的作品集，这个模板值得一试，但请预留时间处理资产替换和 Supabase 设置。

Next.jsReact后台作品集

适合你的项目吗？

适用场景

开发者想要一个带 3D 视觉效果的个人作品集网站
需要收集访问者留言，并希望在一个私有后台中管理这些线索
希望网站对搜索引擎友好，减少手动 SEO 配置工作
愿意投入时间配置 Supabase 和替换第三方素材的开发者

适合人群

熟悉 Next.js 和 React 的开发者
需要作品集且希望有后台管理功能的个人
偏好 TypeScript 和 Tailwind CSS 的项目
能接受使用 Supabase 作为后端服务的用户

上手与定制指南

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

1
克隆仓库后运行 npm install && npm run dev 即可启动，需要 Node 20.9+。
2
环境变量全部可选，但若启用联系表单和后台，需在 Supabase 创建项目并配置 NEXT_PUBLIC_SUPABASE_URL 和 NEXT_PUBLIC_SUPABASE_ANON_KEY，同时按照 docs/deployment.md 设置数据库表、RLS 策略、admin_users 白名单和 Edge Function 发送邮件。
3
部署前务必替换 constants/ 中的个人内容、public/assets/ 下的图片、public/og.jpg，以及 public/models/ 中的 .glb 模型（注意检查 Sketchfab 许可证并保留署名）。

查看仓库使用说明