Constructor Fullstack Next.js

Descripción general

Next.js Builder es una aplicación robusta e intuitiva diseñada para agilizar el proceso de creación y administración de aplicaciones web creadas con Next.js. Esta herramienta permite a los usuarios generar páginas, API y esquemas de bases de datos de forma interactiva a través de una interfaz de varios pasos. Además, se integra perfectamente con un servidor de implementación backend para implementar proyectos automáticamente en Vercel y administrar bases de datos utilizando Supabase.

Tabla de contenido

Requisitos previos
Instalación
Uso
Variables de entorno
Flujo de trabajo de implementación
Notas importantes
Licencia
Enlaces relacionados

Requisitos previos

Antes de utilizar esta aplicación, asegúrese de tener instalados y configurados los siguientes requisitos previos:

Node.js (v14.x o superior) y npm/yarn.
Cuentas con Vercel y Supabase.
Una cuenta ngrok para hacer túneles (para el servidor de implementación).
Una clave API de Spark que puede obtener registrándose en Spark Engine y navegando a Account > API Keys .

Instalación

Para configurar el proyecto, siga estos pasos:

Clonar el repositorio:

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

Instalar dependencias:
```
npm install
# or
yarn install
```
Implementar la aplicación en Vercel:
Nota: La aplicación Next.js Builder debe implementarse en Vercel para funcionar correctamente. Siga estos pasos para implementarlo:
- Instale la CLI de Vercel:
```
npm install -g vercel
```
- Inicie sesión en Vercel:
```
vercel login
```
- Implementar la aplicación:
```
vercel --prod
```
Después de la implementación, asegúrese de actualizar NGROK_DEPLOYER_URL en su configuración de Vercel con la URL proporcionada por ngrok (como se describe en la sección Notas importantes a continuación).
Configurar variables de entorno:
Navegue hasta su proyecto creado en Vercel y configure las siguientes variables de entorno:
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

Uso

Creación de proyectos

Inicie un nuevo proyecto: utilice el formulario de varios pasos para ingresar los detalles de su proyecto, incluido su nombre, tipo (páginas únicas o múltiples), colores, logotipos y propósito.
Generar páginas y componentes: define las páginas y sus componentes. Personaliza el estilo según sea necesario.
Cree y administre API: genere y administre automáticamente API sin servidor según las especificaciones de su proyecto.
Defina el esquema de la base de datos: revise y modifique el esquema de la base de datos generado por la aplicación para asegurarse de que se ajuste a los requisitos de su proyecto.

Despliegue

Una vez que su proyecto esté listo, puede implementarlo directamente utilizando el servidor de implementación integrado. El servidor gestiona el proceso de implementación, se integra con Vercel y maneja las variables de entorno y la configuración de la base de datos en Supabase.

Variables de entorno

SPARK_API_KEY: Su clave Spark API para la generación de código.
NGROK_DEPLOYER_URL: la URL del servidor de implementación administrado a través de ngrok.

Asegúrese de que estas variables estén configuradas en Vercel para que la aplicación funcione correctamente.

Flujo de trabajo de implementación

Cree y personalice su proyecto: siga el proceso paso a paso en la aplicación para crear y personalizar su proyecto Next.js.
Implementar usando el servidor backend: una vez que el proyecto esté listo, use el punto final /deploy del servidor backend para implementar el proyecto en Vercel y administrar la base de datos Supabase. El servidor backend maneja el proceso de implementación, incluida la administración de variables de entorno y la ejecución de scripts SQL.
Monitorear y actualizar: use el panel de la aplicación para monitorear y actualizar su proyecto según sea necesario, con opciones para regenerar componentes y volver a implementarlos.

Notas importantes

Clonación del servidor de implementación backend: si desea implementar automáticamente sus proyectos en Vercel y administrar bases de datos con Supabase, deberá clonar y configurar el servidor de implementación backend. Siga estos pasos:
- Clonar el repositorio del servidor de implementación 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
```
- Configure e inicie el servidor: siga las instrucciones en el archivo README del servidor backend para instalar dependencias, configurar variables de entorno e iniciar el servidor.
- Actualice NGROK_DEPLOYER_URL: una vez que el servidor backend se esté ejecutando y ngrok esté haciendo un túnel, actualice NGROK_DEPLOYER_URL en su configuración de Next.js Builder Vercel con la URL proporcionada por ngrok.
Requisito de implementación para Frontend Next.js Builder: la aplicación frontend Next.js Builder debe implementarse en Vercel para que funcione correctamente. Esto se debe a que la aplicación depende de la infraestructura de Vercel para la generación y el alojamiento de API dinámicas. Siga las instrucciones de implementación proporcionadas anteriormente para asegurarse de que la aplicación esté alojada correctamente.