企业官网建设流程全解析

Shadboard 是一款基于 Next.js 15 和 shadcn/ui 构建的开源管理后台模板，完全免费、可商用。本文是一份面向新手的 Shadboard 部署教程，手把手带你把管理后台上线到 Vercel 生产环境——从环境准备、环境变量配置到数据库处理，一次讲清所有关键步骤。

部署前速览：选对版本，事半功倍

Shadboard 提供两套模板，部署前先确认你用的是哪一套，因为它们的环境变量需求不同：

完整版的登录能力由 NextAuth + Prisma 实现，数据模型定义在 prisma/schema.prisma，默认使用 SQLite（DATABASE_URL=file:./dev.db）。这一点会影响生产环境的数据库选择，后面会重点说明。

一键部署准备：环境要求与本地构建验证

在推送到 Vercel 之前，先在本地确认项目能成功构建，这是避免上线翻车的最快方法。

环境要求清单

根据 package.json 中的engines声明，请确保本地环境满足：

• Node.js：22 及以上版本
• pnpm：10 及以上版本
• 一个Vercel 账号（免费额度即可）

本地拉取并构建

git clone https://gitcode.com/gh_mirrors/sh/shadboard cd shadboard/full-kit # 或 starter-kit pnpm install pnpm run build

如果pnpm run build成功输出✓ Compiled successfully，说明你的代码可以安全上线 🎉。

💡 小提示：full-kit 的postinstall脚本会自动执行prisma generate，即安装依赖时会自动生成 Prisma Client，无需手动操作。

Vercel 上线步骤：5 分钟完成部署

1. 导入项目

登录 Vercel，点击Add New → Project，将 Shadboard 所在的代码仓库导入。如果仓库托管在本地或其他平台，可先推送到 Vercel 支持的代码托管服务，再执行导入。

2. 配置项目参数

在部署设置页面，Vercel 会基于package.json自动识别Next.js框架，你只需确认以下 3 项：

3. 配置环境变量

这是 Shadboard 部署中最容易出错的环节。完整版的变量清单参考 .env.example：

starter-kit 只需配置BASE_URL和HOME_PATHNAME两个变量，见 starter-kit/.env.example。

🔑NEXTAUTH_SECRET可用命令行生成：openssl rand -base64 32。两个HOME_PATHNAME变量必须保持一致，否则会出现重定向循环——重定向逻辑定义在 next.config.mjs，登录后的路由守卫逻辑在 middleware.ts 中。

4. 点击 Deploy，坐等上线

变量填写完成后点击Deploy，Vercel 会自动完成安装依赖、prisma generate、构建和部署。大约 1~2 分钟后，你就能获得一个https://your-app.vercel.app的生产地址了。

生产环境关键项：数据库与域名

SQLite 的局限：生产环境建议换库

Vercel 的构建与运行环境文件系统是临时的，file:./dev.db这种 SQLite 文件在重新部署后会丢失数据。如果你的管理后台需要真实持久化用户数据（注册、登录、会话），建议：

1. 购买一个托管 Postgres 数据库（如 Neon、Supabase 等）；
2. 将 prisma/schema.prisma 中的provider从"sqlite"改为"postgresql"，并更新DATABASE_URL；
3. 执行prisma migrate dev重新生成迁移，再部署上线。

如果只是展示模板、演示 UI 效果，默认的 SQLite 配置可以直接跑，无需改动。

绑定自定义域名

部署成功后，在 Vercel 项目的Settings → Domains中添加你的域名并按提示配置 DNS 即可，Vercel 会自动签发 SSL 证书。绑定后记得同步更新BASE_URL、API_URL、NEXTAUTH_URL三个变量为新域名，然后重新部署。

部署后验收：上线检查清单 📋

打开你的生产地址，逐项核对：

• 首页正常：应跳转到HOME_PATHNAME配置的仪表盘页面
• 主题切换：右上角可切换浅色 / 深色模式
• 多语言：语言下拉可切换 English / العربية（阿拉伯语为 RTL 布局）
• 登录流程（full-kit）：登录页可正常提交，无 401/500 报错
• 控制台无报错：F12 打开开发者工具，Network 面板无失败请求

常见部署问题速查表

总结

Shadboard 的 Vercel 部署流程可以概括为四步：本地构建验证 → 指定 Root Directory 导入 → 配置环境变量 → 按需处理数据库。其中最容易踩坑的两处是：

1. 仓库包含full-kit和starter-kit两个子项目，Root Directory 必须手动指定；
2. 生产环境需要补齐NEXTAUTH_SECRET并认真考虑 SQLite 的持久化问题。

按照本文清单操作，你可以在 10 分钟内把一个功能完整、带深色模式和多语言支持的管理后台上线到生产环境。祝你部署顺利 🚀