Next.jsReact后台启动器

nellavio — Next.js 后台模板

作者 nellavio

Next.js 16 后台启动器，含认证、RBAC、i18n、90+ 组件，可独立前端或对接 Node 后端。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

4 个预览视图

桌面端首页1 / 4

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 4

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Next.js 16、React 19、TypeScript 和 Tailwind 4，使用 App Router

90+ 可复用组件，基于 Shadcn UI 和 Radix 原语

内置认证页面（登录、注册、忘记密码），集成 Better-Auth，支持 RBAC 三种角色

i18n 多语言支持（next-intl），暗黑/亮色主题切换

60+ 图表变体（Recharts），高级表格（TanStack Table v8），日历（FullCalendar）

预配置 Storybook、Vitest、GitHub Actions、ESLint、Prettier、Husky

模板详细介绍

Nellavio 是一个基于 Next.js 16、TypeScript 和 Tailwind 4 的开源后台启动器，定位是帮助开发者快速搭建 SaaS 产品、内部工具或数据密集型管理面板。它默认以纯前端方式运行，内置 18 个页面和 90 多个基于 Shadcn UI 与 Radix 的组件，覆盖仪表盘、订单、客户、产品、分析、日历、个人资料等常见后台场景，并附带登录、注册、忘记密码等认证页面。项目结构清晰，按 App Router 组织，包含 locale、auth、protected 等目录，便于扩展和定制。

Nellavio 的核心能力在于开箱即用的完整功能：支持暗黑/亮色主题切换、基于 next-intl 的多语言、基于 Better-Auth 的认证流程、RBAC 角色权限控制（admin、editor、viewer），以及由 Recharts 驱动的 60 多种图表变体。表格使用 TanStack Table v8，支持排序、筛选、搜索和分页；日历集成 FullCalendar，支持拖拽事件；产品页带灯箱和 PDF 导出。此外，项目预配置了 Storybook、Vitest 单元测试、GitHub Actions CI、ESLint、Prettier 和 Husky，适合作为团队协作的起点。

需要留意的是，Nellavio 默认使用 mock 数据（backendBackup.json），路由保护关闭，认证和真实数据需连接配套的 Node.js 后端（nellavio-backend）才能启用。忘记密码页面仅为 UI，未接后端。生产部署前需自行配置环境变量并验证构建行为，因为静态与动态渲染模式会随配置变化。

Next.jsReact后台启动器

适合你的项目吗？

适用场景

快速搭建 SaaS 产品的前端界面，后续对接自有 API
构建内部工具或管理后台，需要现成的表格、图表和布局
作为学习 Next.js 16 + Tailwind 4 + Shadcn UI 的完整示例项目
需要一个自带认证和 RBAC 的启动器，并愿意配合官方后端使用

适合人群

熟悉 React 和 Next.js 的开发者
需要快速原型或 MVP 的团队
偏好组件化、可定制 UI 的项目
希望有测试和 CI 基础配置的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后运行 npm install 和 npm run dev 即可启动，默认使用 mock 数据，所有路由可访问。
2
若要启用真实认证和数据，需克隆并运行 nellavio-backend，设置 GRAPHQL_URL 和 NEXT_PUBLIC_AUTH_URL 环境变量，然后重启 dev server。
3
生产环境构建前需配置环境变量，否则静态预渲染不会生效。

查看仓库使用说明