react后台模板再添一员——自由优雅的Nexus-Starter

Nexus-Starter是一个基于React，Typescript，React Router 7，Vite，Nexus-Kit构建的极简的后台管理模板项目。可以用于中小企业快速构建后台项目，用来学习react相关技术也是不错的选择。

项目地址

GitHub仓库：github.com/CiroLee/nex…

预览地址：nexus-starter.netlify.app

项目特点

1. 项目结构简单，所有页面都采用模块化方案。每个页面需要的组件管理都经过合理规划，仅在该页面用到的组件会放在当前目录下，避免components目录无限膨胀。这样做的好处是如果你不需要这个页面，就可以直接删除这个目录及对应的目录配置，再也不用担心误删的烦恼。
2. 响应式设计。后台管理系统多为PC端操作，常规的后台项目做移动端适配的不多或适配的不那么好，nexus-starter项目所有页面均适配移动端，保证在移动端上也有良好的体验。
3. 自由的UI组件。UI组件使用的是Nexus-Kit，也是我自己基于TailwindCSS 4和Radix UI开发的一套现代化组件，直接copy，paste就可以使用，如果想修改代码，每个组件不超过300行的代码也是可以轻松看懂，易于二次开发。
4. 支持国际化配置(采用react-i18next库)，亮色/暗色模式主题自动适配和主动切换。
5. 采用更加轻量且对中文优化的tiny-lorem数据mock方案。
6. 集成的页面都是符合真实场景的需求功能，避免单纯的功能堆叠。

Note：项目并没有集成权限管理和请求拦截，这些属于锦上添花的功能且与页面有较高的耦合，如果不需要这些功能删除起来又很繁琐。

项目预览

项目结构

src/
├── _mock/         # Mock数据，方便前后端分离开发
├── assets/        # 静态资源，如图片、SVG图标
├── components/    # 可复用组件
│   ├── business/  # 业务相关组件
│   └── ui/        # 基础UI组件 (来自Nexus-Kit)
├── hooks/         # 自定义React Hooks
├── i18n/          # 国际化配置与资源
├── layout/        # 应用整体布局，如头部、侧边栏
├── lib/           # 通用工具函数
├── pages/         # 页面级组件
├── routes/        # 路由定义与配置
├── store/         # Zustand状态管理
├── styles/        # 全局样式与主题
├── types/         # 全局TypeScript类型定义
└── utils/         # 更细分的工具函数

import type { RouteObject } from 'react-router-dom';

export type CustomRoute = RouteObject & {
  children?: CustomRoute[];
  meta?: {
    /** 菜单栏显示的页面名称 */
    name: string;
    icon?: React.ReactNode;
    /** 是否在菜单栏显示，只有显示设置为false的不会显示 */
    visible?: boolean;
    /** 二级菜单是否默认展开 */
    defaultOpen?: boolean;
  };
};

以上就是全部内容了，需要了解更多内容的小伙伴可以clone代码阅读。
最后奉上配套的倾力之作的UI组件Nexus-Kit：
github.com/CiroLee/nex…