nextjs postgres nextauth tailwindcss template

Next.js 14 เทมเพลตแดชบอร์ดผู้ดูแลระบบ

สร้างขึ้นด้วยเราเตอร์แอป next.js

การสาธิต · โคลน & ปรับใช้

ภาพรวม

นี่คือแม่แบบเริ่มต้นโดยใช้สแต็กต่อไปนี้:

• Framework - next.js (เราเตอร์แอป)
• ภาษา - typescript
• auth - auth.js
• ฐานข้อมูล - postgres
• การปรับใช้ - vercel
• สไตล์ - Tailwind CSS
• ส่วนประกอบ - Shadcn UI
• Analytics - Vercel Analytics
• การจัดรูปแบบ - สวยกว่า

เทมเพลตนี้ใช้เราเตอร์แอป Next.js ใหม่ ซึ่งรวมถึงการสนับสนุนเลย์เอาต์ที่ได้รับการปรับปรุงการจัดตำแหน่งส่วนประกอบการทดสอบและรูปแบบการดึงข้อมูลระดับส่วนประกอบและอื่น ๆ

เริ่มต้น

ในระหว่างการปรับใช้ Vercel จะแจ้งให้คุณสร้างฐานข้อมูล Postgres ใหม่ สิ่งนี้จะเพิ่มตัวแปรสภาพแวดล้อมที่จำเป็นในโครงการของคุณ

ภายในแผงควบคุม Vercel Postgres สร้างตารางตามสคีมาที่กำหนดไว้ในที่เก็บนี้

 CREATE TYPE status AS ENUM ('active', 'inactive', 'archived');

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  image_url TEXT NOT NULL,
  name TEXT NOT NULL,
  status status NOT NULL,
  price NUMERIC(10, 2) NOT NULL,
  stock INTEGER NOT NULL,
  available_at TIMESTAMP NOT NULL
);

จากนั้นแอพพลิเคชั่นที่ไม่เกี่ยวกับ app/api/seed.ts และกด http://localhost:3000/api/seed เพื่อเมล็ดฐานข้อมูลด้วยผลิตภัณฑ์

ถัดไปคัดลอกไฟล์ .env.example ไปยัง .env และอัปเดตค่า ทำตามคำแนะนำในไฟล์ .env.example เพื่อตั้งค่าแอปพลิเคชัน GitHub OAuth ของคุณ

npm i -g vercel
vercel link
vercel env pull

สุดท้ายเรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์การพัฒนา:

 pnpm install
pnpm dev

ตอนนี้คุณควรเข้าถึงแอปพลิเคชันได้ที่ http: // localhost: 3000