Fullstack Next.js Builder

Обзор

Next.js Builder — это надежное и интуитивно понятное приложение, предназначенное для оптимизации процесса создания и управления веб-приложениями, созданными с помощью Next.js. Этот инструмент позволяет пользователям создавать страницы, API и схемы баз данных в интерактивном режиме через многоэтапный интерфейс. Кроме того, он легко интегрируется с внутренним сервером развертывания для автоматического развертывания проектов в Vercel и управления базами данных с помощью Supabase.

Предварительные условия

Перед использованием этого приложения убедитесь, что у вас установлены и настроены следующие необходимые компоненты:

Node.js (v14.x или выше) и npm/yarn.
Аккаунты в Vercel и Supabase.
Учетная запись ngrok для туннелирования (для сервера развертывания).
Ключ API Spark , который вы можете получить, зарегистрировавшись в 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 login
```
- Разверните приложение:
```
vercel --prod
```
После развертывания обязательно обновите NGROK_DEPLOYER_URL в конфигурации Vercel, указав URL-адрес, предоставленный ngrok (как описано в разделе «Важные примечания» ниже).
Настройте переменные среды:
Перейдите к созданному проекту в Vercel и настройте следующие переменные среды:
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

Использование

Создание проекта

Начните новый проект. Используйте многошаговую форму, чтобы ввести сведения о своем проекте, включая его название, тип (одна или несколько страниц), цвета, логотипы и цель.
Создание страниц и компонентов. Определите страницы и их компоненты. Настройте стиль по мере необходимости.
Создавайте API-интерфейсы и управляйте ими. Автоматически создавайте бессерверные API-интерфейсы и управляйте ими на основе спецификаций вашего проекта.
Определить схему базы данных: просмотрите и измените схему базы данных, созданную приложением, чтобы убедиться, что она соответствует требованиям вашего проекта.

Развертывание

Как только ваш проект будет готов, вы сможете развернуть его напрямую с помощью встроенного сервера развертывания. Сервер управляет процессом развертывания, интегрируется с Vercel, а также обрабатывает переменные среды и настройку базы данных в Supabase.

Переменные среды

SPARK_API_KEY: ваш ключ API Spark для генерации кода.
NGROK_DEPLOYER_URL: URL-адрес сервера развертывания, управляемого через ngrok.

Убедитесь, что эти переменные установлены в 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 обновите NGROK_DEPLOYER_URL в конфигурации Vercel Next.js Builder, указав URL-адрес, предоставленный ngrok.
Требования к развертыванию Frontend Next.js Builder: для правильной работы клиентское приложение Next.js Builder должно быть развернуто в Vercel. Это связано с тем, что приложение использует инфраструктуру Vercel для динамического создания API и размещения. Следуйте приведенным выше инструкциям по развертыванию, чтобы убедиться, что приложение размещено правильно.