从零打造一款基于Nextjs+antd5.0的中后台管理系统

hi,大家好,我是徐小夕,最近在研究nextjs, 为了更全面复盘总结nextjs, 我写了一个开箱即用的基于 next 的后台管理系统, 供大家学习参考.

github地址: https://github.com/MrXujiang/next-admin

演示地址:http://next-admin.com

接下来我就和大家介绍一下 Next-Admin 这款中后台管理系统。

为什么要用Nextjs

首先从官网上我们可以了解到 Next.js 提供了先进的服务端渲染 (SSR)和静态生成 (SSG)能力,使得我们能够在服务器上生成动态内容并将其直接发送给客户端,从而大大减少首次加载的等待时间。这样可以提高网站的性能搜索引擎优化 (SEO)以及用户体验

在深度使用 next.js 开发应用之后,我总结了以下使用它的优点:

  • 支持高效的服务端渲染和静态页面生成能力
  • 规则化的路由系统(保证页面更有组织层次,能更好的管理多页面)
  • 规范且颗粒度的API开发模式(更好的规范接口和业务调用)
  • 支持复杂系统的搭建(优雅的SPA单页模式和MPA多页面模式)
  • 部署和开发成本很低(前后端同构更优雅)

所以基于以上体验和思考,我决定在后面的产品和系统上都采用 Next 来开发。

Next-Admin 特点

去年值得高兴的事情是 antd5.0 发布了,从组件UI和设计架构上都有了很大的改进,尤其是 Design Token . 有了它我们可以轻松的实时切换网站主题风格, 并且在应用里复用 antd 的设计语言。

所以为了更好的方便国内开发者使用 nextjs 开发中后台系统,我打算使用 antd5.0 作为UI库来开发, 大家也可以在 Next-Admin 的基础上改造成自己的中后台系统。

接下来就来介绍一下 Next-Admin 的特点。

1. 内置基础的登录注册页面

2. 内置可拖拽的数据报表

在内置常用数据看板的同时我还支持了看板拖拽功能, 让用户更高效的消费数据。

3. 内置监控大屏页面

4. 内置常用的搜索列表

5. 支持内嵌第三方系统

上图演示的是内嵌表单搭建引擎 https://turntip.cn/formManager 的案例。

6. 内置空白Landing页面

7. 支持国际化 & 一键换肤

暗模式:

明模式:

同时项目还集成了很多优秀的开发工具,方便大家更高效的开发业务系统。

如果你对 next 开发或者需要开发一套管理系统, 我相信 Next-Admin 会给你开发和学习的灵感。

同时也欢迎和我一起贡献, 让它变得更优秀~

github地址: https://github.com/MrXujiang/next-admin

演示地址:http://next-admin.com

由于服务器在国外, 所以建议大家git到本地体验~

欢迎star + 反馈~

更多推荐

可视化表单&试卷搭建平台技术详解

爆肝1000小时, Dooring零代码搭建平台3.5正式上线

相关推荐
念念不忘 必有回响1 分钟前
viepress:vue组件展示和源码功能
前端·javascript·vue.js
C澒7 分钟前
多场景多角色前端架构方案:基于页面协议化与模块标准化的通用能力沉淀
前端·架构·系统架构·前端框架
崔庆才丨静觅8 分钟前
稳定好用的 ADSL 拨号代理,就这家了!
前端
江湖有缘10 分钟前
Docker部署music-tag-web音乐标签编辑器
前端·docker·编辑器
早點睡39013 分钟前
高级进阶 React Native 鸿蒙跨平台开发:react-native-device-info 设备信息获取
react native·react.js·harmonyos
恋猫de小郭1 小时前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅8 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60619 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了9 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅9 小时前
实用免费的 Short URL 短链接 API 对接说明
前端