next cloudinary

تافهة القادمة

غير محدد

تسليم الصور عالي الأداء وتحميله على نطاق واسع في Next.js مدعوم من CleeDinary.

الميزات • البدء • المجتمع والدعم • المساهمة

هذه مكتبة مجتمعية تدعمها فريق تجربة المطورين الثابتة.

سمات

• تحسين الصور تلقائيًا وتسليم التنسيقات الحديثة
• إزالة الخلفيات من الصور
• إضافة تراكبات الصورة والنص ديناميكيًا إلى الصور
• المحاصيل القائمة على الذكاء الاصطناعي وتغيير حجمها
• تحويل الصور باستخدام اللون والتأثيرات
• قم بإنشاء بطاقات التواصل الاجتماعي المفتوحة الرسم البياني أثناء الطيران
• أداة تحميل أداة تحميل
• ... كل ذلك على نطاق واسع مع Cloberinary

ابدء

تثبيت

• قم بتثبيت next-cloudinary مع:

 npm install next-cloudinary

• أضف متغير بيئة مع اسم السحابة الخاص بك:

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

إضافة صورة

 import { CldImage } from 'next-cloudinary';

<CldImage width="600" height="600" src="<Public ID or Cloudinary URL>" alt="<Alt Text>" />

تعرف على المزيد حول Cldimage على المستندات المائلة التالية

إنشاء بطاقة وسائط اجتماعية (رسم بياني مفتوح)

 <CldOgImage src="<Public ID or Cloudinary URL>" text="Next Cloudinary" />

ملاحظة: لا يلزم العرض والارتفاع (أو الموصى بهما) للامتثال لتغيير حجم بطاقات الوسائط الاجتماعية الموحدة بنسبة عرض إلى ارتفاع 2: 1.

تعرف على المزيد حول cldogimage على المستندات السحابية التالية

حالات الاستخدام الأخرى

• إزالة الخلفية
• تراكب الصورة
• أسس الصورة
• بطاقة التواصل الاجتماعي
• تراكب النص

❤ المجتمع والدعم

• جيثب: إنشاء مشكلة
• Twitter: colbyfayock

؟ المساهمة

يرجى قراءة المساهمة. md قبل المساهمة.

العمل محليا

تثبيت

يستخدم هذا المشروع PNPM كوسيلة لإدارة التبعيات ومساحات العمل.

مع استنساخ المشروع ، قم بتثبيت التبعيات من جذر المشروع مع:

 pnpm install

إعدادات

للعمل في المشروع ، يجب أن يكون لديك حساب تافهة نشط. مع الحساب ، قم بتكوين ملف .env.local داخل docs مع:

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your Cloudinary API Key>"
CLOUDINARY_API_SECRET="<Your Cloudinary API Secret>"

ملاحظة: يمكن أن يكون الحساب المركب مجانيًا ، ولكن قد لا تعمل بعض الميزات إلى ما هو خارج الطبقة المجانية مثل إزالة الخلفية

اسم السحابة مطلوب لجميع الاستخدامات ، حيث يتم استخدام مفتاح API و Secret حاليًا فقط لاستخدام عنصر واجهة المستخدم. يتم استخدام إعداد التحميل المسبق بالإضافة إلى ذلك لعناصر التحميل.

تحميل الصور مثال

من أجل تشغيل مشروع المستندات ، تحتاج إلى الإشارة إلى الصور المتاحة داخل حسابك المائل.

للقيام بذلك ، انتقل إلى دليل scripts وقم أولاً بإنشاء ملف .env جديد مع:

 CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"

ثم قم بتشغيل برنامج التحميل مع:

 pnpm upload

افتراضيًا ، سيتم تحميل الصور الموجودة داخل scripts/images.json . لتغيير الموقع ، أضف متغير بيئة CLOUDINARY_IMAGES_DIRECTORY مع الدليل المفضل لديك:

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

تشغيل المشروع

بمجرد تثبيته وتكوينه ، افتح علامات تبويب طرفية اثنين ، وتنقل واحدة إلى next-cloudinary إلى docs ، وتشغيل الأمر التالي في كل:

 pnpm dev

سيكون المشروع الآن متاحًا في https: // localhost: 3000 أو المنفذ المحلي المكون.

إجراء اختبارات

توجد جميع الاختبارات داخل next-cloudinary/tests مع بنية دليل يجب أن تعكس next-cloudinary/src .

بينما داخل next-cloudinary ، قم بإجراء اختبارات مع:

 pnpm test

المساهمين

كولبي فايوك	دانييل أولافيو	Ramadevsign ؟	كاري هيغويرا ️	أزانول الحق ؟	3T8	جون أغبانوسي
جوان ليون	تيم بينكس	csgochan	CODINGIS4NOOBS2 ️	ميشوو	لي كونلين	ريان سميث
مايكل لييندو	جاك	Matheus Cabral	خوسيه موراليس	إريك بفيستر	جوشوا أولورونيبا	هاري
شويب أسار	أديانجو أديمي	سيمون	ريتشارد أوليفر براي	زيكا	هارشيت فاشيشت	Sahil Silare
ياش ماتور	عبد صمد	ريشاف تشاتوبادهياي	Prathamesh Gawas	النصر النوياني	براتياي بانيرجي	ساي سيفيندرا