如果快速搭建一个可以用于全球收款的web应用？

其实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

在命令执行过程中，会自动做如下几个操作：

1. 克隆 Saasfly 的仓库到你的本地文件夹。
2. 删除git 的 history
3. 安装相关以来
4. 生成 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留下星星哦～

   github.com/saasfly/saa…