next cloudinary

Cloudinary berikutnya

belum diartikan

Pengiriman dan pengunggahan gambar berkinerja tinggi pada skala di Next.js ditenagai oleh cloudinary.

Fitur • Memulai • Komunitas & Dukungan • Kontribusi

Ini adalah perpustakaan komunitas yang didukung oleh Tim Pengalaman Pengembang Cloudinary.

Fitur

• Secara otomatis mengoptimalkan gambar dan mengirimkan dalam format modern
• Hapus latar belakang dari gambar
• Tambahkan overlay gambar dan teks secara dinamis ke dalam gambar
• Perpangkasan dan ukuran berbasis AI
• Mengubah gambar menggunakan warna dan efek
• Hasilkan Kartu Media Sosial Grafik Terbuka dengan cepat
• Widget unggah drop-in
• ... semuanya dalam skala dengan cloudinary

Memulai

Instalasi

• Instal next-cloudinary dengan:

 npm install next-cloudinary

• Tambahkan variabel lingkungan dengan nama cloud Anda:

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Menambahkan gambar

 import { CldImage } from 'next-cloudinary';

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

Pelajari lebih lanjut tentang cldimage pada dokumen cloudinary berikutnya

Menghasilkan kartu media sosial (grafik terbuka)

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

Catatan: Lebar dan tinggi tidak diperlukan (atau disarankan) untuk mematuhi ukuran kartu media sosial standar dari rasio aspek 2: 1.

Pelajari lebih lanjut tentang Cldogimage pada dokumen cloudinary berikutnya

Kasus penggunaan lainnya

• Penghapusan latar belakang
• Overlay gambar
• Underlay gambar
• Kartu Media Sosial
• Overlay teks

❤️ Komunitas & Dukungan

• GitHub: Buat masalah
• Twitter: @colbyfayock

? Berkontribusi

Harap baca Contributing.md sebelum berkontribusi.

Bekerja secara lokal

Instalasi

Proyek ini menggunakan PNPM sebagai cara untuk mengelola dependensi dan ruang kerja.

Dengan proyek yang dikloning, instal dependensi dari akar proyek dengan:

 pnpm install

Konfigurasi

Untuk mengerjakan proyek, Anda harus memiliki akun cloudinary yang aktif. Dengan akun, konfigurasikan file .env.local di dalam docs dengan:

 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>"

Catatan: Akun cloudinary bisa gratis, tetapi beberapa fitur mungkin tidak berfungsi di luar tingkat gratis seperti penghapusan latar belakang

Nama cloud diperlukan untuk semua penggunaan, di mana kunci dan rahasia API saat ini hanya digunakan untuk mengunggah penggunaan widget. Preset unggahan juga digunakan untuk widget unggahan.

Mengunggah contoh gambar

Untuk menjalankan proyek Documents, Anda harus memiliki gambar yang direferensikan tersedia di dalam akun cloudinary Anda.

Untuk melakukan ini, navigasikan ke direktori scripts dan pertama -tama buat file .env baru dengan:

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

Kemudian jalankan skrip unggah dengan:

 pnpm upload

Secara default, gambar di dalam scripts/images.json akan diunggah ke direktori "gambar" di dalam akun cloudinary Anda. Untuk mengubah lokasi, tambahkan variabel lingkungan CLOUDINARY_IMAGES_DIRECTORY dengan direktori pilihan Anda:

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

Menjalankan proyek

Setelah diinstal dan dikonfigurasi, buka dua tab Terminal, menavigasi satu ke next-cloudinary dan satu ke docs , menjalankan perintah berikut di masing-masing:

 pnpm dev

Proyek ini sekarang akan tersedia di https: // localhost: 3000 atau port lokal yang dikonfigurasi.

Menjalankan tes

Semua tes terletak di dalam next-cloudinary/tests dengan struktur direktori yang harus mencerminkan next-cloudinary/src .

Saat berada di dalam next-cloudinary , jalankan tes dengan:

 pnpm test

Kontributor

Colby Fayock	Daniel Olavio	Ramadevsign ?	Karey Higuera ️	Azanul Haque ?	3T8	John Agbanusi
Joan León	Tim Bennik	CSGOCHAN	codingis4noobs2 ️	Michizhou	Lee Conlin	Ryan Smith
Michael Liendo	Mendongkrak	Matheus Cabral	Jose Morales	Eric Pfister	Joshua Olorunnipa	Hari
Shoaib Asgar	Adeyanju Adeyemi	Simon	Richard Oliver Bray	Zecka	Harshit Vashisht	Sahil SilaRe
MATHUR YASH	Abdul Samad	Rishav Chattopadhyay	Prathamesh Gawas	Kemenangan Nwani	Pratyay Banerjee	Saai Syvendra