Construtor Fullstack Next.js

Visão geral

Next.js Builder é um aplicativo robusto e intuitivo projetado para agilizar o processo de criação e gerenciamento de aplicativos web construídos com Next.js. Esta ferramenta permite que os usuários gerem páginas, APIs e esquemas de banco de dados de forma interativa por meio de uma interface de várias etapas. Além disso, ele se integra perfeitamente a um servidor de implantação backend para implantar projetos automaticamente no Vercel e gerenciar bancos de dados usando Supabase.

Índice

Pré-requisitos
Instalação
Uso
Variáveis de ambiente
Fluxo de trabalho de implantação
Notas importantes
Licença
Links relacionados

Pré-requisitos

Antes de usar este aplicativo, certifique-se de ter os seguintes pré-requisitos instalados e configurados:

Node.js (v14.x ou superior) e npm/yarn.
Contas com Vercel e Supabase.
Uma conta ngrok para tunelamento (para o servidor de implantação).
Uma chave de API Spark que você pode obter inscrevendo-se no Spark Engine e navegando até Account > API Keys .

Instalação

Para configurar o projeto, siga estas etapas:

Clone o repositório:

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

Instalar dependências:
```
npm install
# or
yarn install
```
Implante o aplicativo no Vercel:
Nota: O aplicativo Next.js Builder deve ser implantado no Vercel para funcionar corretamente. Siga estas etapas para implantá-lo:
- Instale a CLI do Vercel:
```
npm install -g vercel
```
- Faça login no Vercel:
```
vercel login
```
- Implante o aplicativo:
```
vercel --prod
```
Após a implantação, certifique-se de atualizar o NGROK_DEPLOYER_URL na configuração do Vercel com o URL fornecido pelo ngrok (conforme descrito na seção Notas importantes abaixo).
Configurar variáveis de ambiente:
Navegue até o projeto criado no Vercel e configure as seguintes variáveis de ambiente:
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

Uso

Criação de Projeto

Iniciar um novo projeto: Use o formulário de várias etapas para inserir os detalhes do seu projeto, incluindo nome, tipo (página única ou múltiplas), cores, logotipos e finalidade.
Gerar páginas e componentes: Defina as páginas e seus componentes. Personalize o estilo conforme necessário.
Crie e gerencie APIs: gere e gerencie automaticamente APIs sem servidor com base nas especificações do seu projeto.
Definir esquema de banco de dados: revise e modifique o esquema de banco de dados gerado pelo aplicativo para garantir que ele esteja alinhado com os requisitos do seu projeto.

Implantação

Quando seu projeto estiver pronto, você poderá implementá-lo diretamente usando o servidor de implementação integrado. O servidor gerencia o processo de implantação, integra-se ao Vercel e trata das variáveis de ambiente e configuração do banco de dados no Supabase.

Variáveis de ambiente

SPARK_API_KEY: sua chave da API Spark para geração de código.
NGROK_DEPLOYER_URL: A URL do servidor de implantação gerenciado via ngrok.

Certifique-se de que essas variáveis estejam definidas no Vercel para que o aplicativo funcione corretamente.

Fluxo de trabalho de implantação

Crie e personalize seu projeto: Siga o processo passo a passo no aplicativo para criar e personalizar seu projeto Next.js.
Implantar usando o servidor backend: Assim que o projeto estiver pronto, use o endpoint /deploy do servidor backend para implantar o projeto no Vercel e gerenciar o banco de dados Supabase. O servidor back-end cuida do processo de implantação, incluindo o gerenciamento de variáveis de ambiente e a execução de scripts SQL.
Monitorar e atualizar: use o painel do aplicativo para monitorar e atualizar seu projeto conforme necessário, com opções para regenerar componentes e reimplantar.

Notas importantes

Clonando o servidor de implantação de backend: Se quiser implantar automaticamente seus projetos no Vercel e gerenciar bancos de dados com Supabase, você precisará clonar e configurar o servidor de implantação de backend. Siga estas etapas:
- Clone o repositório do servidor de implantação de back-end:
```
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
```
- Configurar e iniciar o servidor: siga as instruções no README do servidor back-end para instalar dependências, definir variáveis de ambiente e iniciar o servidor.
- Atualize o NGROK_DEPLOYER_URL: Assim que o servidor back-end estiver em execução e o ngrok estiver tunelando, atualize o NGROK_DEPLOYER_URL na configuração do Next.js Builder Vercel com o URL fornecido pelo ngrok.
Requisito de implantação para Frontend Next.js Builder: O aplicativo frontend Next.js Builder deve ser implantado no Vercel para funcionar corretamente. Isso ocorre porque o aplicativo depende da infraestrutura da Vercel para geração e hospedagem dinâmica de APIs. Siga as instruções de implantação fornecidas acima para garantir que o aplicativo esteja hospedado corretamente.