用最新的 NextJS 实现

跟着鱼皮哥的课程实现的项目，一边学习项目的规范和实践经验，一边探索用 nextjs 实现相同的功能。

项目已上线，欢迎大家体验！

项目

Github 仓库：用户中心项目 - 鱼皮

上线地址：鱼皮用户中心项目改造 - NextJs 版

开发记录：开发记录.md

主要功能

• 用户注册、登录、注销
• 用户表格查看

待完善部分

• 统一后端返回
• 定义统一错误码
• docker
• nginx

技术栈

总体来说，使用 T3 Stack 启动了 NextJS 的项目，前后端同构，前端是 React 后端是 Nodejs。T3 stack 集成了生产级的配置，配好了 prettier 和 eslint，以及全栈需要各项开源项目。

前端：

• NextJS 15 + Tailwindcss 4 + React 19，跟进最新技术框架
• Shadcn UI 定制化组件开发，学习其设计方法和理念，组件属性解构、cn 和 cva 模式
• Tankstack Query 异步数据状态管理，高效实现 React 组件数据获取、缓存和更新
• Tankstack Table 强大的 Headless UI 表格状态管理和数据操作

后端：

• 项目分层 api、services、repositories
• JSDoc 风格代码注释
• Drizzle ORM 数据库访问
• 阿里云 RDS 的 Serverless MySql 数据库
• JWT session 和 cookie 管理

其他

• 测试 Vitest (AI 写的)，Rest Client 测试 api 端点
• Cloufalre 域名托管
• Vercel 项目部署上线
• Github 数据托管，commit 命名遵循 Angular Commit Message Guidelines

项目结构

可以直接在 Github 仓库 中查看

后端

app/api/v1/user controler 的接口，前端直接访问，如 example.com/api/v1/user/current 。 get 方法 和 post 方法

server/db/ 数据库相关 Drizzle ORM server/db/index.ts 创建数据库连接 server/db/schema.ts 数据库表设计 server/db/types.ts 根据 schema 自动定义类型

server/repositories/user.ts 用户数据访问层 server/services/user.ts 服务层

server/utils/error-handling.ts 用 TRPCError 包装 NextResponse server/utils/hash.ts 用 bcryptjs 密码加密函数 server/utils/session.ts 根据 NextJS 文档建议，JWT session 创建

前端

app/ 页面

app/(auth)/ 用户相关页面 app/(auth)/login 登录表单，useEffect + React Form Hook + Zod + axios app/(auth)/register 注册表单，Tankstack Query（useMutation） + React Form Hook + Zod + axios app/(auth)/logout 登出页面，清除 session

app/(dashboard)/layout.ts 侧边栏设计 app/(dashboard)/welcome/ 用户主页 app/(dashbaord)/user-manage 用户数据库表格，Tankstack Table

components/ 组件整理 components/ui/ 导入进来的 shadcn ui 组件，可定制 components/aceternity/ 从组件库 aceternity ui 复制来的组件代码 compoents/fallback/ 用于 suspense 的骨架组件 components/user-manage tankstack table 表格的构建，columns 定义 compoents/ ** .tsx 自建的各种 React 组件

其他

src/env.js 复用 t3 实现环境变量配置 src/middleware.ts 中间件，鉴权，路由保护和跳转 （ps. 之前出了挺火的漏洞233，所以必须在别处二次鉴权）

test/ 测试代码 test/rest-client 后端端点连接和测试

eslint.config.js 静态检查 prettier.config.js 代码格式化