react19 next15 最新后台管理系统

Soon-Admin 是一套以typescript全栈开发的后台管理系统。包含vue版、nextjs版前端，express版后端。

• 🧑‍🤝‍🧑前端 soon-admin-vue3 vue3 ts tailwind-css i18n国际化 多标签 可视化mock 移动端适配

• 🧑‍🤝‍🧑前端 soon-admin-react-nextjs app router ts tailwind-css i18n国际化 可视化mock 移动端适配

• 👭后端 soon-admin-express express ts i18n国际化 api级权限

截图

项目功能 🔨

• Next js + Typescript + Ant Design
• 自定义主题色，暗黑模式
• 样式采用 scss 和 Tailwind Css
• 状态管理 valtio
• 使用 soon-fetch进行http请求,不到3K
• 使用 soon-i18n 实现国际化,有良好的type提示约束,不到3K
• 使用 soon-mock 可视化配置模拟API
• 移动端适配完善，表格在移动端展示为卡片形式
• 使用 Prettier 统一格式化代码，集成 ESLint代码校验规范
• 使用 husky、lint-staged 规范提交信息

安装使用步骤 📔

• Clone：

git clone https://github.com/leafio/soon-admin-react-nextjs.git

• Install：

pnpm install

• Run：

1. 普通dev模式 (需开启后端项目进行连接)

pnpm dev

2. mock dev模式（会自动启动并连接本地mock服务器）

pnpm dev:mock

• Build：

# 生产环境
pnpm build

• Lint：

# eslint 检测代码
pnpm lint

# prettier 格式化代码
pnpm lint:prettier

文件资源目录 📚

Soon-Admin-React-NextJs
├─ .husky                  # husky 配置文件
├─ env                     # Vite 配置项
├─ mock                    # soon-mock 配置及数据文件
├─ public                  # 静态资源文件（该文件夹不会被打包）
├─ src
│  ├─ api                  # API 接口管理
│  ├─ app                  # 项目所有页面
│  ├─ components           # 全局组件
│  ├─ css                  # 全局样式文件
│  ├─ hooks                # 常用 Hooks 封装
│  ├─ i18n                 # 语言国际化 i18n
│  ├─ layout               # 框架布局模块
│  ├─ router               # 路由管理
│  ├─ store                # valtio
│  └─ utils                # 常用工具库
├─  types                  # 全局 ts 声明
├─ .env                    # vite 常用配置
├─ .env.development        # 开发环境配置
├─ .env.production         # 生产环境配置
├─ .eslintrc.json          # Eslint 校验配置文件
├─ .gitignore              # 忽略 git 提交
├─ .prettierignore         # 忽略 Prettier 格式化
├─ .prettierrc             # Prettier 格式化配置
├─ next.config.mjs         # next配置文件
├─ package.json            # 依赖包管理
├─ postcss.config.js       # postcss 配置
├─ README.md               # README 介绍
└─tsconfig.json            # typescript 全局配置