fullstack nextjs app generator

ตัวสร้าง Fullstack Next.js

ภาพรวม

Next.js Builder เป็นแอปพลิเคชันที่แข็งแกร่งและใช้งานง่าย ซึ่งออกแบบมาเพื่อปรับปรุงกระบวนการสร้างและจัดการแอปพลิเคชันเว็บที่สร้างด้วย Next.js เครื่องมือนี้ช่วยให้ผู้ใช้สามารถสร้างเพจ, API และสคีมาฐานข้อมูลแบบโต้ตอบผ่านอินเทอร์เฟซแบบหลายขั้นตอน นอกจากนี้ยังผสานรวมกับเซิร์ฟเวอร์การปรับใช้แบ็กเอนด์ได้อย่างราบรื่นเพื่อปรับใช้โปรเจ็กต์กับ Vercel โดยอัตโนมัติและจัดการฐานข้อมูลโดยใช้ Supabase

สารบัญ

• ข้อกำหนดเบื้องต้น
• การติดตั้ง
• การใช้งาน
• ตัวแปรสภาพแวดล้อม
• เวิร์กโฟลว์การปรับใช้
• หมายเหตุสำคัญ
• ใบอนุญาต
• ลิงค์ที่เกี่ยวข้อง

ข้อกำหนดเบื้องต้น

ก่อนใช้แอปพลิเคชันนี้ ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและกำหนดค่าข้อกำหนดเบื้องต้นต่อไปนี้:

• Node.js (v14.x หรือสูงกว่า) และ npm/yarn
• บัญชีกับ Vercel และ Supabase
• บัญชี ngrok สำหรับการขุดอุโมงค์ (สำหรับเซิร์ฟเวอร์การปรับใช้)
• Spark API Key ซึ่งคุณสามารถรับได้โดยการลงทะเบียนที่ Spark Engine และไปที่ Account > API Keys

การติดตั้ง

หากต้องการตั้งค่าโครงการ ให้ทำตามขั้นตอนเหล่านี้:

1. โคลนพื้นที่เก็บข้อมูล:

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

2. ติดตั้งการพึ่งพา:

   npm install
   # or
   yarn install

3. ปรับใช้แอปพลิเคชันกับ Vercel:

   หมายเหตุ: ต้องปรับใช้แอปพลิเคชัน Next.js Builder บน Vercel เพื่อให้ทำงานได้อย่างถูกต้อง ทำตามขั้นตอนเหล่านี้เพื่อปรับใช้:

   • ติดตั้ง Vercel CLI:

     npm install -g vercel

   • เข้าสู่ระบบ Vercel:

     vercel login

   • ปรับใช้แอปพลิเคชัน:

     vercel --prod

   หลังจากการปรับใช้ ตรวจสอบให้แน่ใจว่าคุณอัปเดต NGROK_DEPLOYER_URL ในการกำหนดค่า Vercel ของคุณด้วย URL ที่ได้รับจาก ngrok (ตามที่อธิบายไว้ในส่วนหมายเหตุสำคัญด้านล่าง)

4. ตั้งค่าตัวแปรสภาพแวดล้อม:

   นำทางไปยังโปรเจ็กต์ที่คุณสร้างขึ้นใน Vercel และกำหนดค่าตัวแปรสภาพแวดล้อมต่อไปนี้:

   SPARK_API_KEY=your-spark-api-key
   NGROK_DEPLOYER_URL=your-ngrok-deployer-url

การใช้งาน

การสร้างโครงการ

1. เริ่มโปรเจ็กต์ใหม่: ใช้แบบฟอร์มหลายขั้นตอนเพื่อป้อนรายละเอียดของโปรเจ็กต์ของคุณ รวมถึงชื่อ ประเภท (หน้าเดียวหรือหลายหน้า) สี โลโก้ และวัตถุประสงค์

2. สร้างเพจและส่วนประกอบ: กำหนดเพจและส่วนประกอบ ปรับแต่งสไตล์ได้ตามต้องการ

3. สร้างและจัดการ API: สร้างและจัดการ API แบบไร้เซิร์ฟเวอร์โดยอัตโนมัติตามข้อกำหนดของโปรเจ็กต์ของคุณ

4. กำหนดสคีมาฐานข้อมูล: ตรวจสอบและแก้ไขสคีมาฐานข้อมูลที่สร้างโดยแอปพลิเคชันเพื่อให้แน่ใจว่าสอดคล้องกับข้อกำหนดของโครงการของคุณ

การปรับใช้

เมื่อโปรเจ็กต์ของคุณพร้อม คุณสามารถปรับใช้ได้โดยตรงโดยใช้เซิร์ฟเวอร์การปรับใช้แบบรวม เซิร์ฟเวอร์จัดการกระบวนการปรับใช้ ทำงานร่วมกับ Vercel และจัดการตัวแปรสภาพแวดล้อมและการตั้งค่าฐานข้อมูลบน Supabase

ตัวแปรสภาพแวดล้อม

• SPARK_API_KEY: คีย์ Spark API ของคุณสำหรับการสร้างโค้ด
• NGROK_DEPLOYER_URL: URL ของเซิร์ฟเวอร์การปรับใช้ที่จัดการผ่าน ngrok

ตรวจสอบให้แน่ใจว่าตัวแปรเหล่านี้ได้รับการตั้งค่าใน Vercel เพื่อให้แอปพลิเคชันทำงานได้อย่างถูกต้อง

เวิร์กโฟลว์การปรับใช้

1. สร้างและปรับแต่งโครงการของคุณ: ทำตามขั้นตอนทีละขั้นตอนในแอปพลิเคชันเพื่อสร้างและปรับแต่งโครงการ Next.js ของคุณ
2. ปรับใช้โดยใช้เซิร์ฟเวอร์แบ็คเอนด์: เมื่อโปรเจ็กต์พร้อม ให้ใช้ตำแหน่งข้อมูล /deploy ของเซิร์ฟเวอร์แบ็คเอนด์เพื่อปรับใช้โปรเจ็กต์กับ Vercel และจัดการฐานข้อมูล Supabase เซิร์ฟเวอร์ส่วนหลังจะจัดการกระบวนการปรับใช้ รวมถึงการจัดการตัวแปรสภาพแวดล้อมและการเรียกใช้สคริปต์ SQL
3. ตรวจสอบและอัปเดต: ใช้แดชบอร์ดของแอปพลิเคชันเพื่อตรวจสอบและอัปเดตโครงการของคุณตามต้องการ พร้อมตัวเลือกในการสร้างส่วนประกอบใหม่และปรับใช้ใหม่

หมายเหตุสำคัญ

1. การโคลนเซิร์ฟเวอร์การปรับใช้แบ็กเอนด์: หากคุณต้องการปรับใช้โปรเจ็กต์ของคุณกับ 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 ในการกำหนดค่า Next.js Builder Vercel ของคุณด้วย URL ที่ ngrok ให้มา

2. ข้อกำหนดในการปรับใช้สำหรับ Frontend Next.js Builder: แอปพลิเคชัน Frontend Next.js Builder จะต้องปรับใช้กับ Vercel เพื่อให้ทำงานได้อย่างถูกต้อง เนื่องจากแอปพลิเคชันอาศัยโครงสร้างพื้นฐานของ Vercel ในการสร้างและโฮสต์ API แบบไดนามิก ปฏิบัติตามคำแนะนำในการปรับใช้ที่ให้ไว้ข้างต้นเพื่อให้แน่ใจว่าแอปพลิเคชันได้รับการโฮสต์อย่างถูกต้อง

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับรายละเอียด

ลิงค์ที่เกี่ยวข้อง

• พื้นที่เก็บข้อมูล GitHub ดั้งเดิม: Spark Engine AI
• สำรวจโครงการ Spark Engine: โครงการ Spark Engine