next cloudinary

เมฆถัดไป

ไม่ได้กำหนด

การส่งมอบภาพที่มีประสิทธิภาพสูงและการอัปโหลดในระดับใน Next.js ขับเคลื่อนโดย Cloudinary

คุณสมบัติ•การเริ่มต้น•ชุมชนและการสนับสนุน•การสนับสนุน

นี่คือห้องสมุดชุมชนที่ได้รับการสนับสนุนจากทีมงาน Experience Cloudinary Developer

คุณสมบัติ

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

เริ่มต้น

การติดตั้ง

• ติดตั้ง 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 ในเอกสาร Cloudinary ถัดไป

การสร้างการ์ดโซเชียลมีเดีย (เปิดกราฟ)

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

หมายเหตุ: ไม่จำเป็นต้องใช้ความกว้างและความสูง (หรือแนะนำ) เพื่อให้สอดคล้องกับการปรับขนาดบัตรโซเชียลมีเดียที่ได้มาตรฐานของอัตราส่วน 2: 1

เรียนรู้เพิ่มเติมเกี่ยวกับ cldogimage ในเอกสารเมฆถัดไป

กรณีการใช้งานอื่น ๆ

• การกำจัดพื้นหลัง
• ภาพซ้อนทับ
• ภาพรองรับ
• การ์ดโซเชียลมีเดีย
• ข้อความซ้อนทับ

❤ชุมชนและการสนับสนุน

• GitHub: สร้างปัญหา
• Twitter: @colbyfayock

- การบริจาค

โปรดอ่านส่วนที่มีส่วนร่วมก่อนที่จะมีส่วนร่วม

ทำงานในพื้นที่

การติดตั้ง

โครงการนี้ใช้ 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>"

หมายเหตุ: บัญชี Cloudinary สามารถฟรี แต่คุณสมบัติบางอย่างอาจไม่ทำงานเกินระดับฟรีเช่นการลบพื้นหลัง

ชื่อคลาวด์เป็นสิ่งจำเป็นสำหรับการใช้งานทั้งหมดโดยที่คีย์ API และความลับในปัจจุบันใช้สำหรับการใช้วิดเจ็ตอัปโหลดเท่านั้น การอัปโหลดที่ตั้งไว้ล่วงหน้าจะถูกใช้เพิ่มเติมสำหรับวิดเจ็ตอัปโหลด

อัพโหลดตัวอย่างภาพ

ในการเรียกใช้โครงการ DOCS คุณจะต้องมีรูปภาพที่อ้างอิงภายในบัญชีคลาวด์ของคุณ

ในการทำเช่นนี้นำทางไปยังไดเรกทอรี 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

ผู้มีส่วนร่วม

Colby Fayock	Daniel Olavio	Ramadevsign -	Karey Higuera	Azanul Haque -	3T8	John Agbanusi
Joan León	ทิมเบนนิก	Csgochan	CODINGIS4NOOBS2	Michizhou	ลีคอนลิน	Ryan Smith
Michael Liendo	แจ็ค	Matheus cabral	Jose Morales	Eric Pfister	Joshua Olorunnipa	ฮาริ
Shoaib Asgar	Adeyanju Adeyemi	ไซม่อน	Richard Oliver Bray	เซคก้า	Harshit Vashisht	Sahil silare
Yash Mathur	Abdul Samad	Rishav Chattopadhyay	Prathamesh Gawas	ชัยชนะของ Nwani	Pratyay Banerjee	Saai Syvendra