หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

ดูการปรับใช้

นี่คือ next.js project bootstrapped ด้วย create-next-app

เริ่มต้น

ก่อนอื่นให้เรียกใช้เซิร์ฟเวอร์การพัฒนา: 

npm run dev
# or
yarn dev
# or
pnpm dev

เปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์

คุณสามารถเริ่มแก้ไขหน้าโดยการแก้ไข app/page.js การอัปเดตหน้าอัตโนมัติเมื่อคุณแก้ไขไฟล์

โครงการนี้ใช้ next/font เพื่อเพิ่มประสิทธิภาพและโหลด Inter โดยอัตโนมัติซึ่งเป็นแบบอักษร Google ที่กำหนดเอง

เรียนรู้เพิ่มเติม

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ next.js ลองดูแหล่งข้อมูลต่อไปนี้:

  • Next.js Documentation - เรียนรู้เกี่ยวกับคุณสมบัติ Next.js และ API
  • เรียนรู้ next.js - การสอนแบบโต้ตอบ next.js

คุณสามารถตรวจสอบพื้นที่เก็บข้อมูล next.js GitHub - ยินดีต้อนรับข้อเสนอแนะและการมีส่วนร่วมของคุณ!

ปรับใช้บน vercel

วิธีที่ง่ายที่สุดในการปรับใช้แอป Next.js ของคุณคือการใช้แพลตฟอร์ม vercel จากผู้สร้างของ Next.js

ตรวจสอบเอกสารการปรับใช้ next.js ของเราสำหรับรายละเอียดเพิ่มเติม


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

  • /app/ - แอปถัดไปที่มีหน้าตามลำดับในโฟลเดอร์ที่เกี่ยวข้อง (NextJS มีการกำหนดเส้นทางตามโฟลเดอร์ชื่อพา ธ ใน URL จะเป็นชื่อโฟลเดอร์และหน้าจะแสดงผล)
    • /app/api/ - เส้นทาง next.js API/backend
    • /app/folder/ - การกำหนดเส้นทางตามโฟลเดอร์หน้าสำหรับเส้นทางที่เกี่ยวข้อง (ชื่อโฟลเดอร์)
  • /components/ - ส่วนประกอบ UI ที่ใช้ซ้ำได้พร้อมตรรกะบางอย่าง
  • '/models/` - รุ่นสคีมาสำหรับฐานข้อมูล
  • /public/ - ไดเรกทอรีสาธารณะ next.js
  • /styles/ - ไดเรกทอรีสไตล์ next.js
  • /utils/ - เพียงแค่ฟังก์ชั่นยูทิลิตี้บางอย่างเช่น ConnectToDB เพื่อโทรไปเชื่อมต่อกับฐานข้อมูล MongoDB

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

  • สร้าง. ENV ในรูทด้วยตัวแปรต่อไปนี้: 
 GOOGLE_ID=
GOOGLE_CLIENT_SECRET=
MONGODB_URI=
NEXTAUTH_URL=
NEXTAUTH_URL_INTERNAL=
NEXTAUTH_SECRET=

แพ็คเกจที่ใช้:

  • next - เฟรมเวิร์ก next.js
  • next-auth - ไลบรารีการรับรองความถูกต้องของ JS Next.js
  • mongodb - ไดรเวอร์ MongoDB
  • mongoose - MongoDB ODM
  • react - The React.js Framework
  • react-dom - React.js Dom Renderer
  • tailwindcss - สำหรับสไตล์

ปรับใช้บน vercel

  • ดูการปรับใช้

เครดิต: JavaScript Mastery - Adrian Hajdin

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด