フルスタック 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
```
デプロイ後、Vercel 構成内のNGROK_DEPLOYER_URLを、ngrok によって提供される 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 がトンネリングしたら、Next.js Builder Vercel 構成内のNGROK_DEPLOYER_URLを、ngrok によって提供された URL で更新します。
フロントエンド Next.js Builder のデプロイ要件:フロントエンド Next.js Builder アプリケーションが正しく機能するには、Vercel にデプロイする必要があります。これは、アプリケーションが動的 API の生成とホスティングのために Vercel のインフラストラクチャに依存しているためです。上記の展開手順に従って、アプリケーションが正しくホストされていることを確認します。