其实github和网上有很多开源或者付费的模版,可以用户全球化页面的搭建。
但是这些基本都是外国人开发的,中文生态很不友好。小编今天就推荐一个GitHub上的由国人开源的新项目。该项目3月26日开源以来,已收获230+star,增长势头很猛,口碑也是不错。
今天我就用这个项目,来教大家快速搭建一个可以用与全球收款的web应用。
先上地址:github.com/saasfly/saa…。
demo展示:saasfly
这是一款易用的、企业级就绪的Nextjs模版。说到这里了解Nextjs的小伙伴就应该立即明白了,该项目从开发到上线,完全不用写后端代码哦~
下面我就手把手教你,用Saasfly,快速交付!
1. 环境需要
- Node.js – 18.17 或更高版本。
- Bun – 1.0 或更高版本。 bun安装教程。
- OS – macOS, Windows (包括 WSL), 和 Linux。
- PostgreSQL – 推荐大家用docker安装一个,或者去vercel申请一个免费的。
顺便说一下,我推荐你使用 NVM (Node Version Manager) 去管理你本地的node环境。
2. 执行命令行
bun create saasfly
在命令执行过程中,会自动做如下几个操作:
- 克隆 Saasfly 的仓库到你的本地文件夹。
- 删除git 的 history
- 安装相关以来
- 生成 prisma type
3. 启动 Saasfly
3.1 设置环境变量
进入saasfly 文件夹, 复制 .env.example
文件,并将新文件重命名为 .env.local,
然后输入你的变量值。
cd saasfly
cp .env.example .env.local
请确保您已经搭建好了postgreSQL。
`POSTGRES_URL`
必须在你的 .env.local
文件中已经填写好。
# Format Example
# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"
POSTGRES_URL="postgres://postgres:123456@127.0.0.1:5432/saasfly"
运行如下命令:
bun db:push
输出:
🚀 Your database is now in sync with your Prisma schema. Done in 151ms
┌─────────────────────────────────────────────────────────┐
│ Update available 5.9.1 -> 5.10.2 │
│ Run the following to update │
│ npm i --save-dev prisma@latest │
│ npm i @prisma/client@latest │
└─────────────────────────────────────────────────────────┘
3.2 运行 Run Build
bun run build
3.3 启动server
bun run dev:web
输出:
@saasfly/nextjs:dev: cache bypass, force executing ad8bea47f156e113
@saasfly/nextjs:dev: $ bun with-env next dev
@saasfly/nextjs:dev: $ dotenv -e ../../.env.local -- next dev
@saasfly/nextjs:dev: ▲ Next.js 14.1.0
@saasfly/nextjs:dev: - Local: http://localhost:3000
@saasfly/nextjs:dev:
@saasfly/nextjs:dev: automatically enabled Fast Refresh for 1 custom loader
@saasfly/nextjs:dev: ✓ Ready in 12.1s
在浏览器输入: http://localhost:3000。如果一切顺利,你将看到如下页面
编辑
那么恭喜你,成功了!
如果你想使用支付功能,Saasfly集成了Stripe。只需你申请好Stripe账户,将密钥填入 .env.local
就可以啦~
更多操作可以查看:Welcome to Saasfly | Saasfly Docs
如果满意,大家可以去GitHub留下星星哦~
原文链接:https://juejin.cn/post/7352762468845174823 作者:Nextify