Vercel

将您的 NEXTDEVKIT 应用程序部署到 Vercel，这是 Next.js 应用程序最通用的平台。Vercel 提供与 Next.js 的无缝集成，并提供零配置部署的优秀开发者体验。

🎯 为什么选择 Vercel

• 零配置：专为 Next.js 应用程序构建
• 全球边缘网络：全球自动边缘部署
• 预览部署：每个拉取请求的唯一 URL
• 自动优化：内置性能优化
• 慷慨的免费层：适合开发和小型项目

📋 先决条件

在部署您的 NEXTDEVKIT 项目之前，确保您拥有：

• Git 仓库：您的代码已推送到 GitHub、GitLab 或 Bitbucket
• Vercel 账户：如果您没有账户，请在此注册
• 数据库设置：已配置外部数据库（参见数据库指南）
• 环境变量：准备好生产环境变量（参见环境指南）

🚀 部署步骤

第 1 步：将代码推送到 Git 仓库

确保您的 NEXTDEVKIT 代码已推送到您的 Git 仓库，如 GitHub、GitLab 或 Bitbucket。

第 2 步：连接到 Vercel

1. 登录 Vercel 控制台
2. 点击 "Add New Project" 或 "New Project" 按钮
3. 从 GitHub、GitLab 或 Bitbucket 导入您的 Git 仓库
4. 选择您的 NEXTDEVKIT 仓库

第 3 步：配置项目设置

在配置页面上，Vercel 将自动检测您的 Next.js 项目。验证这些设置：

注意：除非您有特定要求，否则保持默认值。Vercel 为 Next.js 应用程序优化了这些设置。

第 4 步：配置环境变量

在 环境变量 部分，为您的 NEXTDEVKIT 应用程序添加所有必需的变量：

参考：有关详细的环境变量配置，请参见环境指南。

第 5 步：部署项目

1. 点击 "Deploy" 按钮开始部署过程
2. Vercel 将自动构建和部署您的项目
3. 等待部署完成（通常 1-2 分钟）
4. 您的应用程序将在 https://your-project.vercel.app 可用

🌐 重要：NEXT_PUBLIC_APP_URL 配置

NEXT_PUBLIC_APP_URL 环境变量对于您的应用程序正常工作至关重要。

初始部署

对于您的首次部署，使用 Vercel 提供的域名：

NEXT_PUBLIC_APP_URL="https://your-project.vercel.app"

部署后

1. 在成功部署后记录 Vercel 提供的域名
2. 使用此域名更新 NEXT_PUBLIC_APP_URL 环境变量
3. 重新部署项目以应用更改

使用自定义域名

如果您计划使用自定义域名：

NEXT_PUBLIC_APP_URL="https://your-custom-domain.com"

🔧 自定义域名设置

要为您的 NEXTDEVKIT 项目添加自定义域名：

第 1 步：在 Vercel 中添加域名

1. 在 Vercel 控制台中转到您的项目
2. 导航到 Settings → Domains
3. 点击 "Add Domain"
4. 输入您的自定义域名（例如，your-app.com）

第 2 步：配置 DNS

按照 Vercel 的 DNS 配置说明：

• 对于 Vercel 名称服务器：更改您域名的名称服务器
• 对于外部 DNS：按指示添加 A/CNAME 记录

第 3 步：更新环境变量

1. 转到 Settings → Environment Variables
2. 将 NEXT_PUBLIC_APP_URL 更新为您的自定义域名
3. 将 BETTER_AUTH_URL 更新为您的自定义域名
4. 重新部署项目

⚙️ 管理环境变量

添加新变量

1. 转到 Project Settings → Environment Variables
2. 点击 "Add New"
3. 输入变量名和值
4. 选择环境（生产、预览、开发）
5. 点击 "Save"

更新变量

1. 在列表中找到变量
2. 点击 "Edit"
3. 更新值
4. 点击 "Save"
5. 重新部署项目以应用更改

环境类型

• 生产：实时应用程序
• 预览：拉取请求部署
• 开发：本地开发（可选）

🔄 自动部署

Vercel 为以下提供自动部署：

生产部署

• 触发：推送到 main/master 分支
• URL：您的生产域名
• 环境：生产变量

预览部署

• 触发：拉取请求和功能分支
• URL：每个部署的唯一预览 URL
• 环境：预览变量（回退到生产）

分支部署

• 触发：推送到任何分支（可配置）
• URL：分支特定 URL
• 环境：预览变量

📊 Vercel 对 NEXTDEVKIT 的优化

自动优化

Vercel 自动应用这些优化：

• 图像优化：自动 WebP/AVIF 转换
• 代码分割：自动包优化
• 边缘缓存：静态资源全球缓存
• 压缩：Gzip/Brotli 压缩

🔍 监控和调试

构建日志

• 在 Vercel 仪表板中访问构建日志
• 检查构建错误和警告
• 监控构建性能

运行时日志

• 实时查看函数日志
• 监控 API 路由性能
• 跟踪错误和异常

分析

• 启用 Vercel Analytics 以获得性能洞察
• 监控核心 Web 重要指标
• 跟踪用户交互

🚨 常见问题和解决方案

构建失败

问题：部署期间构建过程失败

解决方案：

• 查看构建日志以获得详细错误信息
• 确保所有依赖项都在 package.json 中
• 验证环境变量设置正确
• 检查 TypeScript 错误

身份验证问题

问题：部署后身份验证不工作

解决方案：

• 验证 BETTER_AUTH_URL 与您的域名匹配
• 检查 BETTER_AUTH_SECRET 设置正确
• 确保回调 URL 配置正确
• 验证数据库连接

数据库连接问题

问题：无法连接到数据库

解决方案：

• 验证 DATABASE_URL 是否正确
• 检查数据库服务是否运行
• 确保数据库允许来自 Vercel 的连接
• 首先在本地测试连接

参考：有关数据库设置，请参见数据库指南。

环境变量问题

问题：环境变量不工作

解决方案：

• 确保为生产环境设置变量
• 检查变量名是否正确（区分大小写）
• 更改变量后重新部署
• 验证客户端变量的 NEXT_PUBLIC_ 前缀

🎉 下一步

成功部署后：

1. 测试您的应用程序：验证所有功能工作正常
2. 设置监控：配置错误跟踪和分析
3. 配置 Webhooks：如果使用支付，设置 Stripe webhooks
4. SSL 证书：Vercel 提供自动 SSL 证书
5. 性能监控：使用 Vercel Analytics 获得洞察

🔗 有用资源

• Vercel 文档
• Next.js 部署指南
• 环境变量指南
• 数据库配置指南

准备将您的 NEXTDEVKIT 应用程序部署到 Vercel 了吗？按照上述步骤，您的应用程序将在几分钟内上线！🚀