5分钟快速上手Next.js billing appLemon Squeezy订阅系统搭建教程【免费下载链接】nextjs-billingNext.js billing app with Lemon Squeezy项目地址: https://gitcode.com/gh_mirrors/ne/nextjs-billingNext.js billing app是一款基于Next.js 14构建的订阅制SaaS应用模板集成了Lemon Squeezy支付系统可帮助开发者快速搭建专业的订阅管理平台。本教程将带你在5分钟内完成从环境配置到系统部署的全流程轻松实现订阅功能集成。 为什么选择Next.js Lemon Squeezy组合这款模板采用现代化技术栈专为订阅制应用设计框架Next.js 14提供卓越的性能和开发体验支付处理Lemon Squeezy简化订阅管理和支付流程认证系统集成GitHub OAuth实现安全登录数据存储Neon Drizzle ORM提供无服务器Postgres解决方案UI组件使用Wedges组件库打造专业界面 快速开始5分钟安装步骤1️⃣ 克隆项目仓库首先将项目代码克隆到本地环境git clone https://gitcode.com/gh_mirrors/ne/nextjs-billing cd nextjs-billing2️⃣ 安装依赖包使用pnpm安装项目所需依赖pnpm install3️⃣ 配置环境变量复制环境变量模板并填写必要信息cp .env.example .env需要配置的核心参数包括# Lemon Squeezy配置 LEMONSQUEEZY_API_KEYyour_api_key LEMONSQUEEZY_STORE_IDyour_store_id LEMONSQUEEZY_WEBHOOK_SECRETrandom_secret # 数据库配置 POSTGRES_URLyour_neon_postgres_url # 认证配置 AUTH_GITHUB_IDyour_github_oauth_id AUTH_GITHUB_SECRETyour_github_oauth_secret AUTH_SECRETrandom_auth_secret4️⃣ 初始化数据库运行以下命令初始化数据库结构pnpm db:push5️⃣ 启动开发服务器一切准备就绪启动开发服务器pnpm dev访问 http://localhost:3000 即可看到应用界面 关键配置详解Lemon Squeezy账户设置访问Lemon Squeezy注册页面创建账户在测试模式下前往Settings API创建API密钥从Settings Stores获取商店ID生成随机字符串作为webhook密钥数据库连接本项目使用Neon提供的无服务器Postgres数据库注册Neon账户并创建数据库从Neon控制台获取连接URL将URL填入POSTGRES_URL环境变量认证配置GitHub OAuth设置创建GitHub OAuth应用获取Client ID和Client Secret生成32位随机字符串作为AUTH_SECRETopenssl rand -hex 32 配置Webhook接收支付事件Webhook是接收Lemon Squeezy支付事件的关键在应用仪表盘中点击Setup webhook按钮自动配置或手动在Lemon Squeezy的Settings Webhooks添加webhook URL确保勾选subscription_created和subscription_updated事件填入与环境变量相同的webhook密钥应用的webhook处理端点位于/api/webhook负责接收并处理支付事件。 核心功能模块订阅管理应用提供完整的订阅生命周期管理查看当前订阅状态更改订阅计划暂停/恢复订阅取消订阅相关代码位于src/components/dashboard/billing/subscription/目录包括subscriptions.tsx订阅状态展示actions.tsx订阅管理操作change-plans.tsx计划变更界面产品计划展示产品计划展示模块位于src/components/dashboard/billing/plans/主要文件包括plans.tsx计划列表组件plan.tsx单个计划卡片change-plan-button.tsx切换计划按钮 上线前检查清单准备部署到生产环境时请完成以下步骤在Lemon Squeezy后台关闭测试模式创建生产环境API密钥并更新环境变量配置生产环境webhook确保所有环境变量正确设置运行数据库迁移pnpm db:push 实用提示使用Drizzle Studio管理数据库pnpm db:studio开发环境需要使用ngrok或LocalCan创建公网URL接收webhookLemon Squeezy提供内置的Customer Portal可作为订阅管理的替代方案应用采用Next.js App Router架构支持组件级数据获取通过本教程你已经掌握了Next.js billing app的基本搭建流程。这个模板提供了坚实的基础你可以在此之上构建更复杂的订阅功能打造属于自己的SaaS产品【免费下载链接】nextjs-billingNext.js billing app with Lemon Squeezy项目地址: https://gitcode.com/gh_mirrors/ne/nextjs-billing创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考