全端 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 生成和託管。請按照上面提供的部署說明進行操作，以確保正確託管應用程式。