next auth roles template

เทมเพลตบทบาทการรับรองความถูกต้องถัดไป

เริ่มต้นอย่างรวดเร็วด้วยเทมเพลต Next.js นี้!

การติดตั้ง · Tech Stack + คุณสมบัติ · ผู้แต่ง

การติดตั้ง

โคลนและสร้าง repo นี้ในเครื่องด้วยคำสั่งต่อไปนี้:

npx create-next-app my-saas-project --example " https://github.com/mickasmt/next-auth-roles-template "

หรือปรับใช้กับ Vercel:

ขั้นตอน

1. ติดตั้งการพึ่งพาโดยใช้ pnpm:

pnpm install

2. คัดลอก .env.example ไปยัง .env.local และอัปเดตตัวแปร

cp .env.example .env.local

3. เริ่มเซิร์ฟเวอร์การพัฒนา:

pnpm run dev

4. ถอดชิ้นส่วนที่คุณไม่ต้องการออก

คุณสามารถใช้คำสั่ง pnpm run remove-content ในเทอร์มินัลของคุณเพื่อลบส่วนใดส่วนหนึ่งของโปรเจ็กต์ของคุณ คำสั่งนี้รองรับพารามิเตอร์ต่อไปนี้:

• --blog : ลบส่วนบล็อกออกจากโครงการของคุณ
• --docs : ลบส่วนเอกสารออกจากโครงการของคุณ

ข้อแนะนำ

• ลบทั้งสองส่วน : ขอแนะนำให้ใช้ pnpm run remove-content โดยไม่ต้องระบุพารามิเตอร์ ( --blog หรือ --docs ) เพื่อให้แน่ใจว่าเอกสารที่เกี่ยวข้องทั้งหมดจะถูกลบออกอย่างถูกต้อง เนื่องจากเอกสารบางอย่างอาจไม่ถูกลบ/อัปเดตหากคุณลบ "บล็อก" หลัง "เอกสาร" หรือในทางกลับกัน

ตัวอย่าง

1. หากต้องการลบทั้งส่วนบล็อกและเอกสารประกอบ:

pnpm run remove-content

2. หากต้องการลบเฉพาะส่วนบล็อก:

pnpm run remove-content --blog

3. หากต้องการลบเฉพาะส่วนเอกสารประกอบ:

pnpm run remove-content --docs

บันทึก

ฉันใช้แพ็คเกจ npm-check-updates เพื่ออัปเดตโปรเจ็กต์นี้

ใช้คำสั่งนี้เพื่ออัพเดตโปรเจ็กต์ของคุณ: ncu -i --format group

เทคสแต็ค + คุณสมบัติ

กรอบงาน

• Next.js – React Framework สำหรับการสร้างแอปที่มีประสิทธิภาพพร้อมประสบการณ์นักพัฒนาที่ดีที่สุด
• Auth.js – จัดการการตรวจสอบสิทธิ์ผู้ใช้อย่างง่ายดายด้วยผู้ให้บริการเช่น Google, Twitter, GitHub เป็นต้น
• Prisma – ORM ตัวแรกของ typescript สำหรับ Node.js
• ตอบกลับอีเมล – กรอบงานอีเมลอเนกประสงค์สำหรับการพัฒนาอีเมลที่มีประสิทธิภาพและยืดหยุ่น

แพลตฟอร์ม

• Vercel – ดูตัวอย่างและปรับใช้การเปลี่ยนแปลงได้อย่างง่ายดายด้วย git
• ส่งอีกครั้ง – กรอบงานอีเมลที่มีประสิทธิภาพสำหรับการพัฒนาอีเมลที่มีประสิทธิภาพ
• Neon – Postgres แบบไร้เซิร์ฟเวอร์พร้อมการปรับขนาดอัตโนมัติ การแยกสาขา พื้นที่เก็บข้อมูลที่ไร้ขอบเขต และระดับฟรีที่กว้างขวาง

UI

• Tailwind CSS – เฟรมเวิร์ก CSS เน้นยูทิลิตี้เป็นหลักสำหรับการพัฒนา UI ที่รวดเร็ว
• Shadcn/ui – ส่วนประกอบที่นำมาใช้ซ้ำได้ซึ่งสร้างขึ้นโดยใช้ Radix UI และ Tailwind CSS
• Lucide – ไอคอนที่เรียบง่ายสวยงามและสมบูรณ์แบบทุกพิกเซล
• next/font – ปรับแต่งแบบอักษรที่กำหนดเองและลบคำขอเครือข่ายภายนอกเพื่อประสิทธิภาพที่ดีขึ้น
• ImageResponse – สร้างภาพ Open Graph แบบไดนามิกที่ขอบ

ตะขอและยูทิลิตี้

• useIntersectionObserver – ตอบสนอง hook เพื่อสังเกตเมื่อองค์ประกอบเข้าหรือออกจากวิวพอร์ต
• useLocalStorage – ยังคงมีข้อมูลอยู่ในที่จัดเก็บในตัวเครื่องของเบราว์เซอร์
• useScroll – ตอบสนอง hook เพื่อสังเกตตำแหน่งการเลื่อน (ตัวอย่าง)
• nFormatter – จัดรูปแบบตัวเลขด้วยส่วนต่อท้าย เช่น 1.2k หรือ 1.2M
• capitalize – ทำให้อักษรตัวแรกของสตริงเป็นตัวพิมพ์ใหญ่
• truncate - ตัดทอนสตริงตามความยาวที่ระบุ
• use-debounce - ดีเด้งการเรียกใช้ฟังก์ชัน / การอัปเดตสถานะ

คุณภาพของรหัส

• TypeScript – ตัวตรวจสอบประเภทคงที่สำหรับความปลอดภัยประเภทตั้งแต่ต้นทางถึงปลายทาง
• Prettier – ตัวจัดรูปแบบโค้ดที่ได้รับความเห็นชอบเพื่อสไตล์โค้ดที่สอดคล้องกัน
• ESLint – linter แบบเสียบได้สำหรับ Next.js และ TypeScript

เบ็ดเตล็ด

• Vercel Analytics – ติดตามผู้เยี่ยมชมที่ไม่ซ้ำ การดูหน้าเว็บ และอื่นๆ ด้วยวิธีที่เป็นมิตรต่อความเป็นส่วนตัว

ผู้เขียน

โปรเจ็กต์นี้อิงจาก Next SaaS Stripe Starter

สร้างโดย @miickasmt ในปี 2023 เผยแพร่ภายใต้ใบอนุญาต MIT

เครดิต

ขอบคุณ Hosna Qasmei สำหรับส่วนหนึ่งของโค้ดแถบด้านข้างแดชบอร์ด