Fullstack Next.js Builder

Überblick

Next.js Builder ist eine robuste und intuitive Anwendung, die den Prozess der Erstellung und Verwaltung von mit Next.js erstellten Webanwendungen rationalisieren soll. Mit diesem Tool können Benutzer Seiten, APIs und Datenbankschemata interaktiv über eine mehrstufige Schnittstelle generieren. Darüber hinaus lässt es sich nahtlos in einen Backend-Bereitstellungsserver integrieren, um Projekte automatisch in Vercel bereitzustellen und Datenbanken mit Supabase zu verwalten.

Inhaltsverzeichnis

Voraussetzungen
Installation
Verwendung
Umgebungsvariablen
Bereitstellungsworkflow
Wichtige Hinweise
Lizenz
Verwandte Links

Voraussetzungen

Stellen Sie vor der Verwendung dieser Anwendung sicher, dass die folgenden Voraussetzungen installiert und konfiguriert sind:

Node.js (v14.x oder höher) und npm/yarn.
Konten bei Vercel und Supabase.
Ein ngrok-Konto für Tunneling (für den Bereitstellungsserver).
Ein Spark-API-Schlüssel , den Sie erhalten können, indem Sie sich bei Spark Engine anmelden und zu Account > API Keys navigieren.

Installation

Um das Projekt einzurichten, gehen Sie folgendermaßen vor:

Klonen Sie das Repository:

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

Abhängigkeiten installieren:
```
npm install
# or
yarn install
```
Stellen Sie die Anwendung in Vercel bereit:
Hinweis: Die Next.js Builder-Anwendung muss auf Vercel bereitgestellt werden, um ordnungsgemäß zu funktionieren. Befolgen Sie diese Schritte, um es bereitzustellen:
- Installieren Sie die Vercel-CLI:
```
npm install -g vercel
```
- Melden Sie sich bei Vercel an:
```
vercel login
```
- Stellen Sie die Anwendung bereit:
```
vercel --prod
```
Stellen Sie nach der Bereitstellung sicher, dass Sie die NGROK_DEPLOYER_URL in Ihrer Vercel-Konfiguration mit der von ngrok bereitgestellten URL aktualisieren (wie im Abschnitt „Wichtige Hinweise“ unten beschrieben).
Umgebungsvariablen einrichten:
Navigieren Sie zu Ihrem erstellten Projekt in Vercel und konfigurieren Sie die folgenden Umgebungsvariablen:
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

Verwendung

Projekterstellung

Starten Sie ein neues Projekt: Geben Sie über das mehrstufige Formular die Details Ihres Projekts ein, einschließlich Name, Typ (einzelne oder mehrere Seiten), Farben, Logos und Zweck.
Seiten und Komponenten generieren: Definieren Sie die Seiten und ihre Komponenten. Passen Sie das Styling nach Bedarf an.
APIs erstellen und verwalten: Erstellen und verwalten Sie serverlose APIs automatisch basierend auf den Spezifikationen Ihres Projekts.
Datenbankschema definieren: Überprüfen und ändern Sie das von der Anwendung generierte Datenbankschema, um sicherzustellen, dass es Ihren Projektanforderungen entspricht.

Einsatz

Sobald Ihr Projekt fertig ist, können Sie es direkt über den integrierten Bereitstellungsserver bereitstellen. Der Server verwaltet den Bereitstellungsprozess, integriert sich in Vercel und verwaltet Umgebungsvariablen und die Datenbankeinrichtung auf Supabase.

Umgebungsvariablen

SPARK_API_KEY: Ihr Spark-API-Schlüssel für die Codegenerierung.
NGROK_DEPLOYER_URL: Die URL des über ngrok verwalteten Bereitstellungsservers.

Stellen Sie sicher, dass diese Variablen in Vercel festgelegt sind, damit die Anwendung ordnungsgemäß funktioniert.

Bereitstellungsworkflow

Erstellen und anpassen Sie Ihr Projekt: Befolgen Sie die Schritt-für-Schritt-Anleitung in der Anwendung, um Ihr Next.js-Projekt zu erstellen und anzupassen.
Bereitstellen mit dem Backend-Server: Sobald das Projekt fertig ist, verwenden Sie den /deploy Endpunkt des Backend-Servers, um das Projekt auf Vercel bereitzustellen und die Supabase-Datenbank zu verwalten. Der Backend-Server übernimmt den Bereitstellungsprozess, einschließlich der Verwaltung von Umgebungsvariablen und der Ausführung von SQL-Skripts.
Überwachen und aktualisieren: Verwenden Sie das Dashboard der Anwendung, um Ihr Projekt bei Bedarf zu überwachen und zu aktualisieren, mit Optionen zum Neugenerieren von Komponenten und erneuten Bereitstellen.

Wichtige Hinweise

Klonen des Backend-Bereitstellungsservers: Wenn Sie Ihre Projekte automatisch auf Vercel bereitstellen und Datenbanken mit Supabase verwalten möchten, müssen Sie den Backend-Bereitstellungsserver klonen und einrichten. Befolgen Sie diese Schritte:
- Klonen Sie das Backend-Bereitstellungsserver-Repository:
```
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
```
- Einrichten und Starten des Servers: Befolgen Sie die Anweisungen in der README-Datei des Backend-Servers, um Abhängigkeiten zu installieren, Umgebungsvariablen festzulegen und den Server zu starten.
- Aktualisieren Sie die NGROK_DEPLOYER_URL: Sobald der Backend-Server läuft und ngrok tunnelt, aktualisieren Sie die NGROK_DEPLOYER_URL in Ihrer Next.js Builder Vercel-Konfiguration mit der von ngrok bereitgestellten URL.
Bereitstellungsvoraussetzung für Frontend Next.js Builder: Die Frontend Next.js Builder-Anwendung muss in Vercel bereitgestellt werden, um ordnungsgemäß zu funktionieren. Dies liegt daran, dass die Anwendung für die dynamische API-Generierung und das Hosting auf die Infrastruktur von Vercel angewiesen ist. Befolgen Sie die oben bereitgestellten Bereitstellungsanweisungen, um sicherzustellen, dass die Anwendung ordnungsgemäß gehostet wird.