# Next.js+Shadcn 后台管理前端模板

**Repository Path**: akaedu2012/next-shadcn

## Basic Information

- **Project Name**: Next.js+Shadcn 后台管理前端模板
- **Description**: 采用前沿技术栈,React,Next.js,Shadcn组件等开发的前端后台模板，UI新颖，支持深色模式。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-04-24
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


<div align="center"><strong>Next.js 14 Admin Dashboard Starter Template With Shadcn-ui</strong></div>
<div align="center">基于 Next.js 14 和 Shadcn-ui 的后台管理系统模板响应式布局</div>
<br />
<div align="center">
<a href="https://next-shadcn-dashboard-starter.vercel.app">使用 Next.js App Router 构建</a>
<span>
</div>

![输入图片说明](public/image.png)

![输入图片说明](public/2.png)

这是一个使用以下技术的模板：

- 框架 - [Next.js 14](https://nextjs.org/13)
- 语言 - [TypeScript](https://www.typescriptlang.org)
- 样式 - [Tailwind CSS](https://tailwindcss.com)
- 组件 - [Shadcn-ui](https://ui.shadcn.com)
- 数据验证 - [Zod](https://zod.dev)
- 状态管理 - [Zustand](https://zustand-demo.pmnd.rs)
- 搜索参数状态管理 - [Nuqs](https://nuqs.47ng.com/)
- 认证 - [Auth.js](https://authjs.dev/)
- 表格 - [Tanstack Tables](https://ui.shadcn.com/docs/components/data-table)
- 表单 - [React Hook Form](https://ui.shadcn.com/docs/components/form)
- 命令行界面 - [kbar](https://kbar.vercel.app/)
- 代码检查 - [ESLint](https://eslint.org)
- 预提交钩子 - [Husky](https://typicode.github.io/husky/)
- 格式化 - [Prettier](https://prettier.io)


页面说明
| 页面 | 功能说明 |
| :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------ |
| 登录 | 使用 NextAuth 实现的身份认证，支持社交登录和邮箱登录（演示版可使用测试邮箱） |
| 仪表盘 | 使用 recharts 实现的数据分析图表卡片 |
| 员工管理 | 使用 Tanstack tables 实现的服务端搜索、过滤、分页表格（通过 Nuqs 管理搜索参数状态） |
| 新增员工 | 使用 shadcn form (react-hook-form + zod) 实现的员工表单 |
| 产品管理 | 使用 Tanstack tables 实现的服务端搜索、过滤、分页表格（通过 Nuqs 管理搜索参数状态） |
| 新增产品 | 使用 shadcn form (react-hook-form + zod) 实现的产品表单 |
| 个人信息 | 使用 react-hook-form 和 zod 实现的多步骤动态表单验证 |
| 看板 | 使用 dnd-kit 实现的拖拽任务管理看板，使用 zustand 实现本地状态持久化 |
| 404页面 | 根级别的 404 未找到页面 |