next auth roles template

قالب أدوار المصادقة التالي

ابدأ بأقصى سرعة باستخدام قالب Next.js هذا!

التثبيت · Tech Stack + الميزات · المؤلف

تثبيت

استنساخ وإنشاء هذا الريبو محليًا باستخدام الأمر التالي:

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 ). يضمن ذلك إزالة جميع المستندات المرتبطة بشكل صحيح، حيث قد لا يتم حذف/تحديث بعض المستندات إذا قمت بإزالة كلمة "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 لإنشاء تطبيقات عالية الأداء مع أفضل تجربة للمطورين
• Auth.js – يمكنك التعامل مع مصادقة المستخدم بسهولة مع مقدمي خدمات مثل Google، وTwitter، وGitHub، وما إلى ذلك.
• Prisma – ORM من النوع الأول لـ Node.js
• React Email – إطار بريد إلكتروني متعدد الاستخدامات لتطوير البريد الإلكتروني بكفاءة ومرونة

المنصات

• Vercel – معاينة التغييرات ونشرها بسهولة باستخدام git
• إعادة الإرسال – إطار بريد إلكتروني قوي لتطوير البريد الإلكتروني بشكل مبسط
• نيون – Postgres بدون خادم مع إمكانية التوسع التلقائي والتفريع والتخزين بلا قاعدة وطبقة مجانية سخية.

واجهة المستخدم

• Tailwind CSS – إطار عمل CSS للأداة المساعدة للتطوير السريع لواجهة المستخدم
• Shadcn/ui – مكونات قابلة لإعادة الاستخدام تم إنشاؤها باستخدام Radix UI وTailwind CSS
• Lucide – أيقونات بسيطة وجميلة ومثالية للبكسل
• next/font - تحسين الخطوط المخصصة وإزالة طلبات الشبكة الخارجية لتحسين الأداء
• ImageResponse – إنشاء صور رسم بياني مفتوح ديناميكية على الحافة

السنانير والمرافق

• useIntersectionObserver - خطاف التفاعل لملاحظة دخول عنصر ما إلى إطار العرض أو خروجه منه
• useLocalStorage – الاحتفاظ بالبيانات في وحدة التخزين المحلية للمتصفح
• useScroll - خطاف التفاعل لمراقبة موضع التمرير (مثال)
• nFormatter – تنسيق الأرقام باستخدام اللواحق مثل 1.2k أو 1.2M
• capitalize - تكبير الحرف الأول من السلسلة
• truncate - اقتطاع سلسلة إلى طول محدد
• use-debounce - رفض استدعاء دالة/تحديث الحالة

جودة الكود

• TypeScript – مدقق النوع الثابت لضمان أمان الكتابة من طرف إلى طرف
• أجمل - منسق الأكواد البرمجي المصمم لنمط الأكواد البرمجية المتسق
• ESLint – جهاز linter قابل للتوصيل لـ Next.js وTypeScript

متنوع

• Vercel Analytics - تتبع الزوار الفريدين ومشاهدات الصفحة والمزيد بطريقة صديقة للخصوصية

مؤلف

يعتمد هذا المشروع على Next SaaS Stripe Starter.

تم إنشاؤه بواسطة @miickasmt في عام 2023، وتم إصداره بموجب ترخيص MIT.

الاعتمادات

شكرًا لحسنى قاسمي على جزء من كود الشريط الجانبي للوحة القيادة.