Next.jsReact作品集

dev.tomdev.xyz — Next.js 作品集模板

作者 JoKeRxTD

基于 Next.js 与 NextUI 的个人作品集网站模板,集成 TypeScript、AuthJS v5 与 Discord OAuth,可克隆或通过模板创建仓库后自行修改。

看看你的网站会是什么样

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

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

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

采集于 2026-10-13查看来源

值得关注的模板亮点

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

01

基于 Next.js 与 NextUI 构建,源自 nextui-org 的 next-app-template

02

使用 TypeScript 编写

03

集成 AuthJS v5 与 Discord OAuth

04

使用 NextUI、ShadCN 与 Tailwind CSS 进行界面样式

05

使用 Framer Motion 处理动画

06

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 部署配置说明,也未说明模板是否包含除作品集展示与认证之外的功能。预览截图仅证明桌面与移动端页面存在,不证明具体页面功能。

Next.js作品集

适合你的项目吗?

适用场景

  • 作为个人作品集网站的起点,按 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. 1

    README 说明可通过仓库的 Use this template 按钮创建新仓库,或使用 git clone 克隆仓库

  2. 2

    安装依赖使用 npm install 或 yarn install

  3. 3

    开发运行使用 npm run dev 或 yarn dev,构建使用 npm run build 或 yarn build

  4. 4

    启动后访问 http://localhost:3000 查看结果,可编辑 src 目录及 next.config.js、public、styles、components 目录

  5. 5

    README 未提供 AuthJS 与 Discord OAuth 所需的环境变量或回调地址配置说明

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • README 要求:可自由使用并按个人用途修改,但需为模板作者署名,通过链接回 tomdev.xyz 完成署名。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

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).

README 原文
https://github.com/JoKeRxTD/dev.tomdev.xyz/blob/master/LICENSEhttps://github.com/JoKeRxTD/dev.tomdev.xyz/blob/master/README.md

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
[![Netlify Status](https://api.netlify.com/api/v1/badges/851db577-e644-4c91-9fb2-3a1cb0b926f6/deploy-status)](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).
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。