Logo文档
环境设置

Next.js

Next.js 独立部署的环境变量配置

此配置非常适合传统托管、Docker 部署或开发环境。Next.js 独立模式为各种托管提供商提供了灵活性。

🚀 核心应用设置

变量描述示例必需
BETTER_AUTH_SECRETBetter Auth 会话加密的密钥your-32-character-secret-key
BETTER_AUTH_URL应用程序的基础URLhttps://yourdomain.com
NEXT_PUBLIC_APP_URL客户端使用的公共URLhttps://yourdomain.com
DATABASE_URL数据库URLpostgresql://xxx

BETTER_AUTH_SECRET 是一个随机字符串,用于加密和生成哈希值,你可以使用以下命令生成一个 32 位安全的密钥:

# 执行命令生成一个 32 位安全的密钥
openssl rand -base64 32

📧 邮件配置

变量描述示例必需
RESEND_API_KEYResend 邮件服务的API密钥re_123456789
RESEND_AUDIENCE_ID新闻简报功能的受众IDaud_123456789

如果需要开启账号密码登录功能,需要发送邮件来验证邮箱,那么需要设置 RESEND_API_KEY。如果需要开启 newsletter 功能,需要设置 RESEND_AUDIENCE_ID

如果只开启社交媒体登录功能,不需要交易邮件或者 newsletter 功能,那么不需要设置 RESEND_API_KEYRESEND_AUDIENCE_ID

更多关于 Email 相关的配置,请参考:

邮件

配置邮件模板和新闻简报功能以进行用户沟通。

🔐 OAuth 提供商设置

GitHub OAuth

变量描述示例必需
GITHUB_CLIENT_IDGitHub App 客户端IDa629723d24c123456
GITHUB_CLIENT_SECRETGitHub App 客户端密钥abc123def456ghi789jkl012

如果需要开启 GitHub 登录功能,那么需要设置 GITHUB_CLIENT_IDGITHUB_CLIENT_SECRET

Google OAuth

变量描述示例必需
GOOGLE_CLIENT_IDGoogle OAuth 客户端ID123456789-abc123.apps.googleusercontent.com
GOOGLE_CLIENT_SECRETGoogle OAuth 客户端密钥GOCSPX-abc123def456ghi789

如果需要开启 Google 登录功能,那么需要设置 GOOGLE_CLIENT_IDGOOGLE_CLIENT_SECRET

更多关于 OAuth 相关的配置,请参考:

身份验证

设置用户身份验证和授权,支持 OAuth 等多种提供商。

💳 支付集成 (Stripe)

变量描述示例必需
STRIPE_SECRET_KEY服务器端操作的 Stripe 密钥sk_test_123...sk_live_123...
STRIPE_WEBHOOK_SECRETStripe 事件的 Webhook 端点密钥whsec_123456789
NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY月度专业版计划的 Stripe 价格IDprice_123456789
NEXT_PUBLIC_PRICE_ID_PRO_YEARLY年度专业版计划的 Stripe 价格IDprice_987654321
NEXT_PUBLIC_PRICE_ID_LIFETIME终身计划的 Stripe 价格IDprice_555666777

更多关于支付相关的配置,请参考:

支付

集成 Stripe 来处理支付和订阅,提供灵活的定价计划。

📁 存储配置

变量描述示例必需
NEXT_PUBLIC_AVATARS_BUCKET_NAME头像上传的 S3 存储桶名称my-app-avatars

该配置需要和你在 S3 或者 Cloudflare R2 中配置的存储桶名称一致。

☁️ AWS S3 配置(如果使用 AWS S3 服务)

变量描述示例必需
STORAGE_REGIONS3 区域us-east-1
STORAGE_ACCESS_KEY_IDS3 AWS 访问密钥AKXXX
STORAGE_SECRET_ACCESS_KEYS3 AWS 密钥XXX

🌍 Cloudflare R2 配置(如果使用 Cloudflare R2 服务)

变量描述示例必需
STORAGE_REGIONCloudflare R2 区域auto
STORAGE_ACCESS_KEY_IDCloudflare R2 访问密钥xxx
STORAGE_SECRET_ACCESS_KEYCloudflare R2 密钥xxx
STORAGE_ENDPOINTCloudflare R2 端点https://xxx.r2.cloudflarestorage.com

存储

为您的应用程序资产和用户上传设置文件存储解决方案。

📊 分析配置

变量描述示例必需
NEXT_PUBLIC_GOOGLE_ANALYTICS_IDGoogle Analytics 网站IDG-xxx
NEXT_PUBLIC_UMAMI_WEBSITE_IDUmami Analytics 网站IDxxx
NEXT_PUBLIC_UMAMI_SCRIPT_URLUmami Analytics 脚本URLhttps://xxx.js
NEXT_PUBLIC_PLAUSIBLE_DOMAINPlausible Analytics 域名xxx
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URLPlausible Analytics 脚本URLhttps://xxx.js

更多关于分析相关的配置,请参考:

分析

使用集成的分析解决方案跟踪用户行为和应用程序性能。

💰 联盟营销配置

变量描述示例必需
NEXT_PUBLIC_AFFILIATE_AFFONSO_IDAffonso 推广IDxxx

NEXT_PUBLIC_AFFILIATE_AFFONSO_ID 是 Affonso 推广ID,用于跟踪推广效果。

更多关于推广相关的配置,请参考:

推广

集成 Affonso 来处理推广效果。

📝 .env 文件示例

BETTER_AUTH_SECRET=
BETTER_AUTH_URL=http://localhost:3000
NEXT_PUBLIC_APP_URL=http://localhost:3000

# ---------Database----------
DATABASE_URL=

# ---------Email----------
RESEND_API_KEY=
RESEND_AUDIENCE_ID=

# ---------Auth----------
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET

# ---------Payment----------
STRIPE_SECRET_KEY=sk_test_
STRIPE_WEBHOOK_SECRET=whsec_
NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY=price_
NEXT_PUBLIC_PRICE_ID_PRO_YEARLY=price_
NEXT_PUBLIC_PRICE_ID_LIFETIME=price_

# ---------Storage----------

NEXT_PUBLIC_AVATARS_BUCKET_NAME=nextdevkit-avatars

# Clouflare R2
STORAGE_REGION=auto
STORAGE_ACCESS_KEY_ID=
STORAGE_SECRET_ACCESS_KEY=
STORAGE_ENDPOINT=https://xxx.r2.cloudflarestorage.com

# S3
#STORAGE_REGION=us-east-1
#STORAGE_ACCESS_KEY_ID=
#STORAGE_SECRET_ACCESS_KEY=

# ---------Analytics----------

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-xxx

# Umami Analytics
NEXT_PUBLIC_UMAMI_WEBSITE_ID=
NEXT_PUBLIC_UMAMI_SCRIPT_URL=

# Plausible Analytics
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL=

# ---------Affiliate----------
NEXT_PUBLIC_AFFILIATE_AFFONSO_ID=

🛠️ 开发环境 vs 生产环境

开发环境

  • 本地URL使用 http://localhost:3000
  • 使用 Stripe 测试密钥(以 sk_test_ 开头)
  • OAuth 重定向URI应指向 localhost

生产环境

  • 所有URL使用实际域名
  • 使用 Stripe 生产密钥(以 sk_live_ 开头)
  • 为 OAuth 提供商配置生产重定向URI
  • 确保所有密钥都得到适当保护并定期轮换

🔧 下一步

设置环境变量后:

  1. 测试身份验证 - 验证 OAuth 提供商工作正常
  2. 测试邮件 - 确认邮件发送与提供商配合正常
  3. 部署 - 部署到您选择的托管平台

您的 Next.js 应用程序现在已准备好进行开发和部署!🎉