Générateur Fullstack Next.js

Aperçu

Next.js Builder est une application robuste et intuitive conçue pour rationaliser le processus de création et de gestion d'applications Web créées avec Next.js. Cet outil permet aux utilisateurs de générer des pages, des API et des schémas de base de données de manière interactive via une interface en plusieurs étapes. De plus, il s'intègre de manière transparente à un serveur de déploiement back-end pour déployer automatiquement des projets sur Vercel et gérer des bases de données à l'aide de Supabase.

Table des matières

Conditions préalables
Installation
Usage
Variables d'environnement
Flux de travail de déploiement
Remarques importantes
Licence
Liens connexes

Conditions préalables

Avant d'utiliser cette application, assurez-vous que les conditions préalables suivantes sont installées et configurées :

Node.js (v14.x ou supérieur) et npm/yarn.
Comptes avec Vercel et Supabase.
Un compte ngrok pour le tunneling (pour le serveur de déploiement).
Une clé API Spark que vous pouvez obtenir en vous inscrivant sur Spark Engine et en accédant à Account > API Keys .

Installation

Pour configurer le projet, suivez ces étapes :

Clonez le référentiel :

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

Installer les dépendances :
```
npm install
# or
yarn install
```
Déployer l'application sur Vercel :
Remarque : L'application Next.js Builder doit être déployée sur Vercel pour fonctionner correctement. Suivez ces étapes pour le déployer :
- Installez la CLI Vercel :
```
npm install -g vercel
```
- Connectez-vous à Vercel :
```
vercel login
```
- Déployez l'application :
```
vercel --prod
```
Après le déploiement, assurez-vous de mettre à jour NGROK_DEPLOYER_URL dans votre configuration Vercel avec l'URL fournie par ngrok (comme décrit dans la section Notes importantes ci-dessous).
Configurer les variables d'environnement :
Accédez à votre projet créé dans Vercel et configurez les variables d'environnement suivantes :
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

Usage

Création de projet

Démarrer un nouveau projet : utilisez le formulaire en plusieurs étapes pour saisir les détails de votre projet, notamment son nom, son type (une ou plusieurs pages), ses couleurs, ses logos et son objectif.
Générer des pages et des composants : définissez les pages et leurs composants. Personnalisez le style selon vos besoins.
Créez et gérez des API : générez et gérez automatiquement des API sans serveur en fonction des spécifications de votre projet.
Définir le schéma de base de données : examinez et modifiez le schéma de base de données généré par l'application pour vous assurer qu'il correspond aux exigences de votre projet.

Déploiement

Une fois votre projet prêt, vous pouvez le déployer directement à l'aide du serveur de déploiement intégré. Le serveur gère le processus de déploiement, s'intègre à Vercel et gère les variables d'environnement et la configuration de la base de données sur Supabase.

Variables d'environnement

SPARK_API_KEY : votre clé API Spark pour la génération de code.
NGROK_DEPLOYER_URL : L'URL du serveur de déploiement géré via ngrok.

Assurez-vous que ces variables sont définies dans Vercel pour que l'application fonctionne correctement.

Flux de travail de déploiement

Créez et personnalisez votre projet : suivez le processus étape par étape dans l'application pour créer et personnaliser votre projet Next.js.
Déployer à l'aide du serveur backend : une fois le projet prêt, utilisez le point de terminaison /deploy du serveur backend pour déployer le projet sur Vercel et gérer la base de données Supabase. Le serveur backend gère le processus de déploiement, y compris la gestion des variables d'environnement et l'exécution de scripts SQL.
Surveiller et mettre à jour : utilisez le tableau de bord de l'application pour surveiller et mettre à jour votre projet selon vos besoins, avec des options pour régénérer les composants et les redéployer.

Remarques importantes

Clonage du serveur de déploiement backend : Si vous souhaitez déployer automatiquement vos projets sur Vercel et gérer les bases de données avec Supabase, vous devrez cloner et configurer le serveur de déploiement backend. Suivez ces étapes :
- Clonez le référentiel du serveur de déploiement backend :
```
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
```
- Configurer et démarrer le serveur : suivez les instructions du fichier README du serveur principal pour installer les dépendances, définir les variables d'environnement et démarrer le serveur.
- Mettez à jour le NGROK_DEPLOYER_URL : une fois que le serveur backend est en cours d'exécution et que ngrok effectue le tunneling, mettez à jour le NGROK_DEPLOYER_URL dans votre configuration Next.js Builder Vercel avec l'URL fournie par ngrok.
Exigence de déploiement pour Frontend Next.js Builder : L'application frontend Next.js Builder doit être déployée sur Vercel pour fonctionner correctement. En effet, l'application s'appuie sur l'infrastructure de Vercel pour la génération et l'hébergement dynamiques d'API. Suivez les instructions de déploiement fournies ci-dessus pour vous assurer que l'application est correctement hébergée.