Next.jsReact后台启动器

next-supabase-admin-starter — Next.js 后台模板

作者 jayvidev

Next.js 16 + Supabase 的 CMS 与后台管理启动器，支持可选数据库，内置丰富管理组件。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

Next.js 16 + Turbopack + React 19 + TypeScript + Tailwind v4

Supabase 认证（邮箱/密码）及 proxy.ts 保护 /admin/* 路由

Supabase 可选：无数据库也能运行，认证自动绕过

内置 DataTable、资源表单、对话框、拖拽排序、Cloudinary 媒体选择器、Tiptap 编辑器

Supabase CLI 工作流：版本化迁移、类型生成

详尽的文档和 AI 提示，便于扩展和二次开发

模板详细介绍

next-supabase-admin-starter 是一个面向内容型网站的后台管理启动器，基于 Next.js 16、Supabase 和 shadcn/ui 构建。它将项目清晰地划分为公开站点和管理后台两部分：公开站点通过 ISR 渲染，后台 CMS 则负责编辑站点内容。这种结构适合需要内置内容管理能力的营销站点或内容型应用，避免了从零开始重新设计架构的麻烦。

模板提供了完整的后台管理基础组件，包括可折叠侧边栏、命令菜单、主题切换、React Query 集成以及通知提示。数据表格基于 TanStack，表单使用 react-hook-form 和 Zod 校验，还集成了拖拽排序、Cloudinary 媒体选择器和 Tiptap 富文本编辑器。站点数据通过 Supabase 获取并使用缓存和标签失效机制，后台的修改会触发缓存重建。

一个显著的特点是 Supabase 被设计为可选项：应用在没有数据库的情况下也能启动和构建，管理后台的认证会被绕过，方便在项目早期快速预览界面。当准备好接入 Supabase 时，只需设置环境变量即可启用认证和数据库，无需修改代码。不过，模板的 Cloudinary 集成和 Tiptap 编辑器需要相应的外部服务配置，部署前应仔细阅读文档，确保所有依赖项都已正确设置。

Next.js后台启动器

适合你的项目吗？

适用场景

需要为营销站点或内容型网站快速搭建后台 CMS
希望使用 Next.js 和 Supabase 构建管理界面，但不想从零配置
需要一个可选的数据库方案，便于前期开发与后期接入
需要集成富文本编辑、媒体管理和数据表格等常见后台功能

适合人群

熟悉 Next.js 和 React 的开发者
希望使用 Supabase 作为后端服务的项目
需要快速原型或启动器来加速开发的内容管理项目

上手与定制指南

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

1
需要 pnpm 和 Node.js 环境。
2
复制 .env.example 为 .env.local，设置 Cloudinary 凭证（Supabase 可暂不设置）。
3
启用 Supabase 时，需复制 supabase/config.example.toml 并配置项目 ID，使用 supabase link 关联远程项目，运行 db:push 和 db:types。
4
本地开发可使用 pnpm db:start 启动 Docker 栈。
5
务必阅读 docs 目录下的文档，特别是关于 Supabase 可选配置和部署的部分。

查看仓库使用说明