全栈 Next.js 构建器

概述

Next.js Builder 是一款强大而直观的应用程序，旨在简化使用 Next.js 构建的 Web 应用程序的创建和管理过程。该工具使用户能够通过多步骤界面交互地生成页面、API 和数据库模式。此外，它还与后端部署服务器无缝集成，以自动将项目部署到 Vercel 并使用 Supabase 管理数据库。

先决条件

在使用此应用程序之前，请确保您已安装并配置以下先决条件：

Node.js （v14.x 或更高版本）和 npm/yarn。
Vercel 和 Supabase 帐户。
用于隧道的 ngrok 帐户（用于部署服务器）。
Spark API 密钥，您可以通过在 Spark Engine 上注册并导航到Account > API Keys来获取。

安装

要设置项目，请按照下列步骤操作：

克隆存储库：

git clone https://github.com/spark-engine-opensource-projects/fullstack-nextjs-app-generator.git
cd fullstack-nextjs-app-generator

安装依赖项：
```
npm install
# or
yarn install
```
将应用程序部署到 Vercel：
注意： Next.js Builder 应用程序必须部署在 Vercel 上才能正常运行。请按照以下步骤进行部署：
- 安装 Vercel CLI：
```
npm install -g vercel
```
- 登录 Vercel：
```
vercel login
```
- 部署应用程序：
```
vercel --prod
```
部署后，请确保使用 ngrok 提供的 URL 更新 Vercel 配置中的NGROK_DEPLOYER_URL （如下面的重要说明部分所述）。
设置环境变量：
导航到您在 Vercel 中创建的项目并配置以下环境变量：
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

用法

项目创建

启动新项目：使用多步骤表单输入项目的详细信息，包括其名称、类型（单页或多页）、颜色、徽标和用途。
生成页面和组件：定义页面及其组件。根据需要自定义样式。
创建和管理 API：根据项目规范自动生成和管理无服务器 API。
定义数据库架构：查看并修改应用程序生成的数据库架构，以确保其符合您的项目要求。

部署

项目准备就绪后，您可以使用集成部署服务器直接部署它。服务器管理部署过程，与 Vercel 集成，并处理 Supabase 上的环境变量和数据库设置。

环境变量

SPARK_API_KEY：用于代码生成的 Spark API 密钥。
NGROK_DEPLOYER_URL：通过 ngrok 管理的部署服务器的 URL。

确保在 Vercel 中设置这些变量以使应用程序正常运行。

部署工作流程

创建和自定义您的项目：按照应用程序中的分步过程来创建和自定义您的 Next.js 项目。
使用后端服务器部署：项目准备就绪后，使用后端服务器的/deploy端点将项目部署到 Vercel 并管理 Supabase 数据库。后端服务器处理部署过程，包括管理环境变量和执行 SQL 脚本。
监控和更新：使用应用程序的仪表板根据需要监控和更新您的项目，并提供重新生成组件和重新部署的选项。

重要提示

克隆后端部署服务器：如果您希望将项目自动部署到 Vercel 并使用 Supabase 管理数据库，则需要克隆并设置后端部署服务器。请按照下列步骤操作：
- 克隆后端部署服务器存储库：
```
git clone https://github.com/spark-engine-opensource-projects/Automated-NextJS-deployer-to-vercel-and-supabase.git
cd Automated-NextJS-deployer-to-vercel-and-supabase
```
- 设置并启动服务器：按照后端服务器的 README 中的说明安装依赖项、设置环境变量并启动服务器。
- 更新 NGROK_DEPLOYER_URL：后端服务器运行且 ngrok 建立隧道后，请使用 ngrok 提供的 URL 更新 Next.js Builder Vercel 配置中的NGROK_DEPLOYER_URL 。
前端 Next.js Builder 的部署要求：前端 Next.js Builder 应用程序必须部署到 Vercel 才能正常运行。这是因为该应用程序依赖于 Vercel 的基础设施来进行动态 API 生成和托管。请按照上面提供的部署说明进行操作，以确保正确托管应用程序。