next15 filterlist

Next.js 15 รายการตัวกรอง

ตัวจัดการงานโครงการแบบโต้ตอบที่ปรับปรุงอย่างต่อเนื่องด้วยการกรองโดยใช้ next.js 15 กับ Tailwind CSS และ PRISMA มันชะลอตัวลงอย่างจงใจเพื่อแสดงการจัดการสถานะการโหลด

ดูสาขา filter-provider สำหรับรุ่นบริบท API ซึ่งแบทช์ตัวกรองทั้งหมดเป็นสถานะเดียวแก้ไขปัญหาของพวกเขาที่ถูกทิ้งเมื่อสลับไปทั่วหลาย ๆ

ดูสาขา nuqs สำหรับเวอร์ชันโดยใช้ NUQS เพื่อทำสิ่งเดียวกันให้สำเร็จ น่าจะดีกว่าที่จะใช้ห้องสมุดใช่ไหม

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

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

เริ่มต้น

ขั้นแรกให้ติดตั้งการพึ่งพา:

npm install

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

npm run dev

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

การตั้งค่า Prisma

คุณต้องตัดสินใจระหว่างการพัฒนาท้องถิ่นของ PRISMA ด้วย sqlite หรือฐานข้อมูลจริงที่มีตัวอย่างเช่น sqlserver กำหนดไว้ในไฟล์ schema.prisma

พิจารณาเพิ่มไฟล์ .env ลงในรูทของโครงการและใช้สิ่งเหล่านี้ภายใน schema.prisma ด้วย env("DATABASE_URL") , อ้างถึง .env.sample

หลังจากสลับแล้วให้ลบโฟลเดอร์ prisma/migrations ก่อนที่จะเรียกใช้คำสั่งการย้ายถิ่น

เมื่อใช้ SQLServer คุณจะต้องโยกย้ายสคีมาฐานข้อมูลด้วย:

npm run prisma.migrate

เมื่อใช้ sqlite เริ่มต้นด้วย:

npm run prisma.push

Seed Prisma/seed.ts สำหรับข้อมูลเริ่มต้น:

npm run prisma.seed

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

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

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

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

ปรับใช้บน vercel

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

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