shadcn-nextjs-boilerplate布局体系源码解析Sidebar、Navbar与三层架构的设计思路【免费下载链接】shadcn-nextjs-boilerplateShadcn UI NextJS Boilerplate ⚡️ Free Open-source ChatGPT UI Admin Dashboard Template - Horizon AI Boilerplate项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-nextjs-boilerplateshadcn-nextjs-boilerplate是一款免费的开源 Next.js 后台仪表盘模板Horizon AI Boilerplate内置 ChatGPT 风格的 AI 对话界面、Supabase 认证与 Stripe 支付。本文带你读懂它的布局体系源码Sidebar 侧边栏、Navbar 导航栏如何与三层架构协作帮你在 30 分钟内搭出自己的管理后台。 先看整体三层布局架构这个项目的页面不是一块大 HTML而是由三层布局像套娃一样叠起来的层级文件职责第一层根布局app/layout.tsx挂载主题切换ThemeProvider与 Supabase 认证上下文SupabaseProvider第二层仪表盘布局components/layout/index.tsx组合 Sidebar Navbar 主内容区 Footer并注入用户状态第三层页面内容app/dashboard/main/page.tsx等各功能页只关心业务 UI复用components/layout/innerContent.tsx的居中容器RootLayout主题 认证 └─ DashboardLayoutSidebar Navbar main Footer └─ InnerContent内容居中容器最大宽度 1170px └─ 具体页面第二层是整个布局体系的心脏源码在components/layout/index.tsx第 29~31 行UserContext / UserDetailsContext把登录用户对象、用户资料注入全局Sidebar 和 Navbar 里的头像、用户名都从这两个 Context 读取OpenContext管理移动端侧边栏的打开/关闭状态Navbar 左上角的汉堡按钮和 Sidebar 的关闭按钮共用同一个setOpen。 布局如何生效路由守卫 布局组件以app/dashboard/page.tsx为例页面在服务端先查用户未登录就redirect(/dashboard/signin)已登录跳转到/dashboard/main。也就是说认证逻辑写在页面层布局只负责长什么样。登录页则走另一套骨架——components/auth/AuthUI.tsx提供独立的认证布局无 Sidebar、无 Navbar并通过variant属性让同一个 Sidebar 组件在两种布局下表现不同见下文。 Sidebar 源码解析一个组件两种形态核心代码在components/sidebar/Sidebar.tsx第 44~49 行关键就三行div className{lg:!z-99 fixed !z-[99] min-h-full w-[300px] transition-all md:!z-[99] xl:!z-0 ${props.variant auth ? xl:hidden : xl:block} ${props.open ? : -translate-x-[120%] xl:translate-x-[unset]}}拆解它的设计思路固定宽度 300px fixed定位桌面端xl断点以上常显主内容区用xl:ml-[328px]给它让出空间-translate-x-[120%]位移动画小屏时整体移出视口OpenContext的open变为true时滑回配合transition-all形成抽屉效果零 JS 动画库variant auth双形态登录页布局传入variantauthxl:hidden直接隐藏侧边栏同一份代码复用两种场景。Sidebar 内部自上而下分四个区块第 60~128 行品牌区Logo Horizon AI 标题 FREE 徽标导航菜单交给子组件components/sidebar/components/Links.tsx渲染升级卡片SidebarCard.tsx推广付费版是模板的变现位用户信息条头像、昵称 退出登录按钮数据全部来自 UserContext。Sidebar 内部结构 ├─ 品牌区Logo Badge ├─ Links routes{routes} / ← 数据驱动的导航 ├─ SidebarCard / ← 推广卡 └─ 用户信息条Avatar 退出 导航数据驱动routes.tsx 是菜单的配置中心Sidebar 自己硬编码了几个菜单项吗没有。菜单数据全部来自components/routes.tsx第 14~89 行export const routes: IRoute[] [ { name: Main Dashboard, path: /dashboard/main, icon: HiOutlineHome /, collapse: false }, { name: AI Chat, path: /dashboard/ai-chat, icon: HiOutlineCpuChip /, collapse: false }, ... ];每个菜单项就是一个{ name, path, icon, disabled }对象。Links.tsx用usePathname()做pathname.includes(route.path)判断高亮第 20~25 行disabled: true的项渲染为半透明不可点击样式——加一个页面 在数组里加一行不用碰任何组件。utils/navigation.tsx的getActiveRoute()用同样的路由表做递归匹配第 5~18 行把当前页面的name取出来——这正是 Navbar 标题的来源。 Navbar 源码解析悬浮毛玻璃导航条Navbar 代码在components/navbar/NavbarAdmin.tsx设计上有三个亮点悬浮定位 毛玻璃第 15 行fixed定位在顶部bg-white/30 backdrop-blur-xl实现毛玻璃质感宽度用calc(100vw - 365px)随断点动态扣掉 Sidebar 占位实现漂浮在内容之上的效果面包屑标题数据来自路由表DashboardLayout 传入brandText{getActiveRoute(routes, pathname)}导航栏自动显示Pages / AI Chat无需每页手动写标题功能键全部下沉到NavbarLinksAdmin.tsxNavbarLinksAdmin 的按钮组从左到右 ├─ ☰ 汉堡按钮仅小屏控制 OpenContext 打开 Sidebar ├─ 主题切换next-themeslight/dark 一键切换 ├─ ⓘ 帮助下拉菜单DropdownMenu ├─ ↪ 退出登录supabase.auth.signOut └─ 用户头像点击进设置页主题切换按钮只是setTheme(theme dark ? light : dark)一行调用背后依赖第一层根布局里挂好的 ThemeProvider——三层架构各司其职的典型体现。 快速上手5 分钟跑起来git clone https://gitcode.com/gh_mirrors/sh/shadcn-nextjs-boilerplate cd shadcn-nextjs-boilerplate npm install npm run dev跑通后建议按这条路径改造成你自己的项目换品牌改components/sidebar/Sidebar.tsx里的 Horizon AI 文字与 Logo改菜单编辑components/routes.tsx增删routes数组项换页面在app/dashboard/下新建目录参照app/dashboard/main/page.tsx写页面内容区套上InnerContent即可自动居中限宽接认证登录/注册 UI 在components/auth/AuthUI.tsx数据库表结构见schema.sql。✅ 总结这套布局体系最值得抄的 3 个点设计点实现方式文件数据驱动导航菜单 一个 TS 数组组件只负责渲染components/routes.tsx无动画库的抽屉侧边栏CSStranslate-x Context 开关components/sidebar/Sidebar.tsx布局与认证解耦页面层做redirect布局层只管结构app/dashboard/page.tsx对新手来说这个项目最大的价值不是 UI 好看而是把一个生产级后台的骨架拆成了可独立理解的模块根布局管全局状态、DashboardLayout 管页面骨架、路由表管菜单——读懂这三层你就掌握了 90% 的 Next.js 后台项目的布局套路。【免费下载链接】shadcn-nextjs-boilerplateShadcn UI NextJS Boilerplate ⚡️ Free Open-source ChatGPT UI Admin Dashboard Template - Horizon AI Boilerplate项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-nextjs-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考