基于 Next.js 与 NextUI 构建,源自 nextui-org 的 next-app-template
dev.tomdev.xyz — Next.js 作品集模板
作者 JoKeRxTD
基于 Next.js 与 NextUI 的个人作品集网站模板,集成 TypeScript、AuthJS v5 与 Discord OAuth,可克隆或通过模板创建仓库后自行修改。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
使用 TypeScript 编写
集成 AuthJS v5 与 Discord OAuth
使用 NextUI、ShadCN 与 Tailwind CSS 进行界面样式
使用 Framer Motion 处理动画
README 提供克隆、安装依赖、开发与构建命令
模板详细介绍
该模板是作者的个人作品集网站,基于 nextui-org 提供的 next-app-template 构建,使用 Next.js 与 NextUI,并包含 TypeScript、AuthJS v5(Discord OAuth)、ShadCN、Tailwind CSS 与 Framer Motion。README 说明可点击仓库的 Use this template 按钮创建新仓库,或克隆仓库后执行 npm install / yarn install 安装依赖,使用 npm run dev / yarn dev 启动开发,或 npm run build / yarn build 构建,并在浏览器访问 http://localhost:3000 查看结果。编辑范围包括 src 目录、next.config.js、public、styles 与 components 目录。README 未提供页面结构、路由、组件清单、环境变量配置、AuthJS 与 Discord OAuth 的具体接入步骤、Netlify 部署配置说明,也未说明模板是否包含除作品集展示与认证之外的功能。预览截图仅证明桌面与移动端页面存在,不证明具体页面功能。
适合你的项目吗?
适用场景
- 作为个人作品集网站的起点,按 README 指引克隆或通过 Use this template 创建仓库后修改 src 等目录
- 在本地运行 npm run dev 或 yarn dev,访问 http://localhost:3000 预览并编辑页面
- 使用 npm run build 或 yarn build 构建项目
- 在需要时参考 README 中列出的 AuthJS v5 与 Discord OAuth 技术组合进行认证相关开发
适合人群
- 希望基于 Next.js、NextUI 与 TypeScript 搭建个人作品集网站的开发者
- 需要参考 AuthJS v5 与 Discord OAuth 集成方式的开发者
- 接受 README 许可条款并愿意在个人使用中标注模板来源的用户
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
README 说明可通过仓库的 Use this template 按钮创建新仓库,或使用 git clone 克隆仓库
- 2
安装依赖使用 npm install 或 yarn install
- 3
开发运行使用 npm run dev 或 yarn dev,构建使用 npm run build 或 yarn build
- 4
启动后访问 http://localhost:3000 查看结果,可编辑 src 目录及 next.config.js、public、styles、components 目录
- 5
README 未提供 AuthJS 与 Discord OAuth 所需的环境变量或回调地址配置说明
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- README 要求:可自由使用并按个人用途修改,但需为模板作者署名,通过链接回 tomdev.xyz 完成署名。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
https://github.com/JoKeRxTD/dev.tomdev.xyz/blob/master/LICENSEhttps://github.com/JoKeRxTD/dev.tomdev.xyz/blob/master/README.mdYou can use this at your own free will & edit how every you like for your own personal use, All I ask is that I am credited for the template. You can do this by linking back to my website, [tomdev.xyz](https://tomdev.xyz).
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-13。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 77 / 100
- 技术栈
- Next.js · React
- 网站类型
- 作品集
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2025-07-01
- 截图检查日期
- 2026-10-13
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16
查看当时使用的来源资料
SHA-256: 544ff19fedca7b80c8f5209afcd51f04b2f7249adc43ae1860d55058d8353212
2026-10-13T22:44:12.200Z
来源文件 / 仓库# Portfolio Website Template This is my Porfoilio website built with Next.js and NextUI. It is a template that you can use to build your own website. This was created from the template provided by [nextui-org](https://github.com/nextui-org/next-app-template). You can preview the website [PREVIEW](https://tomdev.xyz). # Build [](https://app.netlify.com/sites/funny-bombolone-136075/deploys) # Star <img style='border-radius: 10px;' src="https://cdn.tomdev.xyz/img/dev_bo4h5gr1.png" alt="star" /> ## Technologies Used - [Next.js 14](https://nextjs.org/docs/getting-started) - [TypeScript](https://www.typescriptlang.org/) - [AuthJS v5](https://authjs.dev) - [Discord 0Auth](https://discord.dev) - [NextUI](https://nextui.org/) & [ShadCN](https://ui.shadcn.com) with [Tailwind CSS](https://tailwindcss.com/) - [Framer Motion](https://www.framer.com/motion/) ## How to Use ### Use the template with jokerev.xyz 1. Click on the `Use this template` button on the top right of the repository. 2. Create a new repository with the template. ### Clone the repository 1. Clone the repository with the following command: ```bash git clone ``` 2. Install the dependencies: ```bash npm install # or yarn install ``` 1. Deploy the project ```bash npm run dev # or yarn dev ``` or build the project ```bash npm run build # or yarn build ``` 1. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the files in the `src` directory. 2. Start editing the files in the `src` directory. 3. You can also change the `next.config.js` file to add your own configurations. 4. You can also change the `public` directory to add your own images and other assets. 5. You can also change the `styles` directory to add your own styles. 6. You can also change the `components` directory to add your own components. ## License You can use this at your own free will & edit how every you like for your own personal use, All I ask is that I am credited for the template. You can do this by linking back to my website, [tomdev.xyz](https://tomdev.xyz).
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

react-resume-template
A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css
Next.js · 作品集

nxt-lnk
Custom bio links for creatives who love coding. A perfect custom alternative for linktree, bio and other short…
Next.js · 作品集

sylph
A minimal portfolio template.
Next.js · 作品集

sleek-portfolio
sleek-portfolio 是一个面向开发者个人品牌展示的现代作品集模板,基于 Next.js 15、TypeScript、Tailwind CSS 和 Shadcn UI 构建。
Next.js · 作品集

research-website-template
React + Next.js template for research websites (for PhD students, researchers, etc)
Next.js · 作品集

shadcn-portfolio
shadcn-portfolio 是一个面向开发者的作品集模板,技术栈为 Next.js 15、shadcn/ui、Tailwind CSS 和 Framer Motion。
Next.js · 作品集
