Pembuat Fullstack Next.js

Ringkasan

Next.js Builder adalah aplikasi tangguh dan intuitif yang dirancang untuk menyederhanakan proses pembuatan dan pengelolaan aplikasi web yang dibangun dengan Next.js. Alat ini memberdayakan pengguna untuk menghasilkan halaman, API, dan skema database secara interaktif melalui antarmuka multi-langkah. Selain itu, ini terintegrasi secara mulus dengan server penerapan backend untuk menyebarkan proyek secara otomatis ke Vercel dan mengelola database menggunakan Supabase.

Daftar isi

Prasyarat
Instalasi
Penggunaan
Variabel Lingkungan
Alur Kerja Penerapan
Catatan Penting
Lisensi
Tautan Terkait

Prasyarat

Sebelum menggunakan aplikasi ini, pastikan Anda telah menginstal dan mengkonfigurasi prasyarat berikut:

Node.js (v14.x atau lebih tinggi) dan npm/yarn.
Akun dengan Vercel dan Supabase.
Akun ngrok untuk tunneling (untuk server penerapan).
Kunci API Spark yang dapat Anda peroleh dengan mendaftar di Spark Engine dan membuka Account > API Keys .

Instalasi

Untuk menyiapkan proyek, ikuti langkah-langkah berikut:

Kloning Repositori:

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

Instal Ketergantungan:
```
npm install
# or
yarn install
```
Terapkan Aplikasi ke Vercel:
Catatan: Aplikasi Next.js Builder harus diterapkan di Vercel agar berfungsi dengan benar. Ikuti langkah-langkah berikut untuk menerapkannya:
- Instal Vercel CLI:
```
npm install -g vercel
```
- Masuk ke Vercel:
```
vercel login
```
- Terapkan aplikasi:
```
vercel --prod
```
Setelah penerapan, pastikan Anda memperbarui NGROK_DEPLOYER_URL di konfigurasi Vercel Anda dengan URL yang disediakan oleh ngrok (seperti dijelaskan di bagian Catatan Penting di bawah).
Siapkan Variabel Lingkungan:
Navigasikan ke proyek yang Anda buat di Vercel dan konfigurasikan variabel lingkungan berikut:
```
SPARK_API_KEY=your-spark-api-key
NGROK_DEPLOYER_URL=your-ngrok-deployer-url
```

Penggunaan

Pembuatan Proyek

Memulai Proyek Baru: Gunakan formulir multi-langkah untuk memasukkan detail proyek Anda, termasuk nama, jenis (satu atau beberapa halaman), warna, logo, dan tujuannya.
Hasilkan Halaman dan Komponen: Tentukan halaman dan komponennya. Sesuaikan gaya sesuai kebutuhan.
Membuat dan Mengelola API: Secara otomatis membuat dan mengelola API tanpa server berdasarkan spesifikasi proyek Anda.
Tentukan Skema Basis Data: Tinjau dan modifikasi skema basis data yang dihasilkan oleh aplikasi untuk memastikan skema tersebut selaras dengan kebutuhan proyek Anda.

Penyebaran

Setelah proyek Anda siap, Anda dapat menerapkannya secara langsung menggunakan server penerapan terintegrasi. Server mengelola proses penerapan, terintegrasi dengan Vercel, dan menangani variabel lingkungan dan pengaturan database di Supabase.

Variabel Lingkungan

SPARK_API_KEY: Kunci Spark API Anda untuk pembuatan kode.
NGROK_DEPLOYER_URL: URL server penerapan yang dikelola melalui ngrok.

Pastikan variabel-variabel ini diatur di Vercel agar aplikasi berfungsi dengan benar.

Alur Kerja Penerapan

Buat dan Sesuaikan Proyek Anda: Ikuti proses langkah demi langkah dalam aplikasi untuk membuat dan menyesuaikan proyek Next.js Anda.
Deploy Menggunakan Server Backend: Setelah proyek siap, gunakan titik akhir /deploy dari server backend untuk menyebarkan proyek ke Vercel dan mengelola database Supabase. Server backend menangani proses penerapan, termasuk mengelola variabel lingkungan dan menjalankan skrip SQL.
Pantau dan Perbarui: Gunakan dasbor aplikasi untuk memantau dan memperbarui proyek Anda sesuai kebutuhan, dengan opsi untuk membuat ulang komponen dan menerapkan ulang.

Catatan Penting

Mengkloning Server Penerapan Backend: Jika Anda ingin menyebarkan proyek Anda secara otomatis ke Vercel dan mengelola database dengan Supabase, Anda perlu mengkloning dan menyiapkan server penerapan backend. Ikuti langkah-langkah berikut:
- Mengkloning Repositori Server Penerapan 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
```
- Menyiapkan dan Memulai Server: Ikuti petunjuk di README server backend untuk menginstal dependensi, mengatur variabel lingkungan, dan memulai server.
- Perbarui NGROK_DEPLOYER_URL: Setelah server backend berjalan dan ngrok melakukan tunneling, perbarui NGROK_DEPLOYER_URL dalam konfigurasi Next.js Builder Vercel Anda dengan URL yang disediakan oleh ngrok.
Persyaratan Penerapan untuk Frontend Next.js Builder: Aplikasi frontend Next.js Builder harus diterapkan ke Vercel agar berfungsi dengan baik. Hal ini karena aplikasi bergantung pada infrastruktur Vercel untuk pembuatan API dinamis dan hosting. Ikuti petunjuk penerapan yang diberikan di atas untuk memastikan aplikasi dihosting dengan benar.