Next.jsReactSaaS启动器

chargebee-nextjs-static — Next.js SaaS模板

作者 bharathvaj-ganesan

基于 Next.js 与 React 的订阅定价页模板，集成 Chargebee 结账，用于 SaaS 与在线服务的套餐展示与订阅入口。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

Next.js + React + TypeScript 构建的订阅定价页模板

集成 Chargebee 结账，用于承接订阅流程

样式采用 Twind，在 JavaScript 中编写 Tailwind 风格工具类

内置 ESLint、Prettier、Husky、Commitizen、Commitlint、Renovate、lint-staged 等工程化配置

支持 @ 前缀的绝对路径导入

提供 Vercel 一键部署入口与在线演示

模板详细介绍

这是一个面向 SaaS 产品和在线服务的订阅定价页启动模板，使用 Next.js 与 React 构建，页面以网格形式展示订阅套餐，并通过 Chargebee 的结账能力承接订阅流程。仓库提供在线演示，可直接查看桌面端与手机端效果。

模板自带一套前端工程化配置，包括 ESLint、Prettier、Husky、Commitizen、Commitlint、Renovate、lint-staged，以及使用 @ 前缀的绝对路径导入。样式方案采用 Twind，即在 JavaScript 中编写 Tailwind 风格的工具类。项目使用 TypeScript 编写。

使用前需要完成两项与 Chargebee 相关的配置：在环境变量 NEXT_PUBLIC_CHARGEBEE_SITE_ID 中填入自己的站点 ID，并在 utils/chargebee.ts 中修改商品价格。README 同时提供了 Vercel 一键部署入口和本地开发命令（yarn、yarn dev，默认访问 localhost:3000）。

该模板定位为静态定价页起步项目，README 未说明后端订阅状态同步、用户账户体系或 Webhook 处理等能力，这些部分需要自行补充。代码采用 MIT 许可，可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材以及 Chargebee、托管等外部服务需另行核对许可与费用。

Next.jsReactSaaS启动器

适合你的项目吗？

适用场景

为 SaaS 产品搭建订阅套餐展示与订阅入口页面
为在线服务制作定价页原型并接入 Chargebee 结账
在 Next.js 项目中参考 Twind 与前端工程化配置的组织方式

适合人群

需要快速起步订阅定价页的 SaaS 或在线服务项目
已使用或计划使用 Chargebee 作为订阅与结账服务的团队
希望以 Next.js、React、TypeScript 为基础二次开发的开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
在环境变量 NEXT_PUBLIC_CHARGEBEE_SITE_ID 中填入自己的 Chargebee 站点 ID
2
在 utils/chargebee.ts 中修改商品价格
3
本地开发依次运行 yarn 与 yarn dev，然后访问 http://localhost:3000
4
也可通过 README 中的 Vercel 部署按钮或模板仓库生成方式创建项目
5
演示图片、字体、图标等第三方素材需按各自许可核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

使用前必须配置 Chargebee 站点 ID 环境变量 NEXT_PUBLIC_CHARGEBEE_SITE_ID，否则无法正常接入结账流程。
商品价格需在 utils/chargebee.ts 中自行修改，模板不提供现成可用的定价数据。
订阅结账依赖第三方服务 Chargebee，需自行注册账户并可能产生相应服务费用。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Update the env variable `NEXT_PUBLIC_CHARGEBEE_SITE_ID` with your site id.
README 原文

Modify the item prices in this file `utils/chargebee.ts`
README 原文

Chargebee Checkout
README 原文

https://github.com/bharathvaj-ganesan/chargebee-nextjs-static/blob/main/LICENSE https://github.com/bharathvaj-ganesan/chargebee-nextjs-static/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 77 / 100
技术栈: Next.js · React
网站类型: SaaS · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2023-01-01
截图检查日期: 2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: e5f686e6c4081173165d78eb606901b9d8afb6001c9a3a54dfc581861229c32b

2026-10-03T16:57:32.872Z

来源文件 / 仓库

# Next.js Subscription Pricing Page Starter

A free Next.js TypeScript subscription page template for SaaS products, online services and more.

## Features

- ⚡ **Next.js** — The React Framework
- 🤑 **Chargebee Checkout** - Subscription Management
- 💡 **Twind** — The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
- 📏 **ESLint** — Pluggable JavaScript linter
- 🐶 **Husky** — Use git hooks with ease
- 💖 **Prettier** — Opinionated Code Formatter
- 🐶 **Husky** — Use git hooks with ease
- 📄 **Commitizen** — Conventional commit messages CLI
- 🚓 **Commitlint** — Lint commit messages
- 🖌 **Renovate** — Dependency update tool
- 🚫 **lint-staged** — Run linters against staged git files
- 🗂 **Absolute import** — Import folders and files using the `@` prefix

## Demo

[https://chargebee-nextjs-static.vercel.app/](https://chargebee-nextjs-static.vercel.app/)

[![Screenshot of demo](./public/demo.png)](https://chargebee-nextjs-static.vercel.app/)

## 🚀 Getting started

Easiest way to get started is by clicking the "Deploy with Vercel" button below.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbharathvaj-ganesan%2Fchargebee-nextjs-static&demo-title=Chargebee%20Subscription%20Pricing%20Page%20Starter)

If you do not want to deploy, [click here](https://github.com/jkytoela/next-startd/generate) to create a new repository with this template.

You might need to do the following steps to customize,

* Update the env variable `NEXT_PUBLIC_CHARGEBEE_SITE_ID` with your site id.
* Modify the item prices in this file `utils/chargebee.ts`

**Local Development**

Run the following commands inside the project folder:

1. `yarn`
2. `yarn dev`

To view the project open `http://localhost:3000`

## 🤝 Contributing

1. Fork this repository
2. Create your branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Raise PR against [the original repository](https://github.com/bharathvaj-ganesan/chargebee-nextjs-static).

**After your pull request is merged**, you can safely delete your branch.

## 📝 License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for more information.

## Resources

* https://www.chargebee.com/checkout-portal-docs/dropIn-overview.html

* https://apidocs.chargebee.com/docs/api/hosted_pages#hosted_page_attributes

## Credits

Inspired from [Vercel Subscription Template](https://github.com/vercel/nextjs-subscription-payments)

反馈内容错误