Next JS - Resimler İçin Cloudinary Kullanma

Next Js platform olarak son zamanların en popüler frameworklerinden biri. Özellikle routing kısımlarını basit bir şekilde halletmesi, backend için çok fazla karmaşıklık gerektirmeyen işlerde tek başına kullanılabilmesi Next Js'i öne çıkarıyor. Next Js uygulamalarında kullanılacak frontend resimlerini saklamak için cloudinary platformu da oldukça iyi ve basit bir seçenek olarak duruyor. Kurulumu ve kullanımı son derece basit. Bu tarz bir kullanım için hem next js kısmında hemde cloudinary kısmında yapılacak düzenlemeleri ve kodlamaları kısaca anlatalım.

1. Adım - Cloudinary Hesabı Oluşturun ve Ayarlarını Yapın

Cloudinary web sitesinde hesap oluşturduktan sonra ayarlar kısmına girip upload kısmına girin.

Upload kısmında "Add upload preset" a basarak yeni bir upload hesabı oluşuturun. Burada dikkat etmeniz konu signing modu "unsigned" seçmeniz. Bunun dışında yapmanız gereken farklı  bir olay yok.

Sonraki aşamada bize yazılımla bağlantıyı sağlamak için bize aşağıdaki bilgiler lazım.

   - CLOUD_NAME, 

   - CLOUDINARY_API_KEY, 

   - CLOUDINARY_API_SECRET,

Bu bilgileri de cloudinary hesabınızın ayarlar kısmında API KEYS bölümünden almamız gerekiyor.

Böylece Cloudinary kısmındaki ayarlamaları bitirmiş olduk. Şimdi yazılım tarafında yapacağımız ayarlamalara geçebiliriz.

2. Adım - .ENV dosyanızda tanımlamaları yapın

Projenizin kök dizinizde kullandığınız .env dosyasında 1. adımda aldığımız bilgileri tanımlıyoruz.

3. Adım -  React NPM paketlerini yükleyin

Claudinary'e resim yükleme ve sitemizde resim gösterme için ben 2 adet eklenti paketi kullanıyorum.

Bunlar "caludinary" ve "next-cloudinary" paketleri.

4. Adım -  Client tarafında resim upload inputu oluşturun

Resim yüklemesi yapacağımız sayfanın kod örneği aşağıda verilmiştir. Kapak fotoğrafı yükleyeceğimiz varsayalım. react jsx formatında input ve label oluşturuyoruz. inputun onChange event "handleFile Upload" fonksiyonunu yazıyoruz. handleFileUpload fonksiyonuda yine aşağıdaki kodda gösterilmiştir. bu fonksiyon ile yüklenecek resmi axios kullanarak server api dosyasına gönderiyoruz. Geri dönüşünde ise claudinary'nin bize vereceği Id geliyor. Bu Id ile daha sonra resmi göstereceğiz.

5. Adım -  Server Tarafında Resim Upload API'nı Oluşturun

Bu aşamada NextJs app klasöründe api klasörü onun içerisinde image-upload klasörü - onun içinde de route dosyası oluşturuyoruz.

Bu dosyada API'ya gelen resim dosyalarını cloudinary hesabımıza yükleyeceğiz. Yükledikten sonra cloudinary bize resim için oluşturduğu ID'yi dönecek. Bizde bu ID'yi client tarafına yollayacağız.

Bu aşamadan sonra resmimiz Cloudinary'e yüklenmiş oldu. Resim Id'si de client tarafına gönderildi. Clodinary hesabınıza girip yükleme yerini kontrol edebilirsiniz.

6. Adım -  Yüklenen resmi sitede gösterin

Bunun için "next-cloudinary" paketinden yararlanacağız. Normalde next-image ile de yapabilirsiniz ama biraz kod karmaşası yaşanıyor. Bu paket de zaten arka planda next-image kullanıyor. Resmi göstermek için öncelikle resmin cloudinary Id'si veya direk embedded url'si gerekiyor.

Ben direk serverdan gelen Id ile göstereceğim. Dilerseniz resmin url'si ile veya dinamik olarak da çalışabilirsiniz. Hiç bir sıkıntı olmuyor.

Burada CldImage componentin ayarlarından resmin boyutunu belirleyebilirsiniz. Resim tamamen responsive bir durumda çalışıyor.

Bu aşamadan sonra işlemimiz tamamlanmış oluyor. Ben burada en basit haliyle anlatmaya çalıştım. Client tarafında istediğiniz şekilde çeşitlendirebilirsiniz.

Konu ile ilgili katkınız, sorunuz, görüşünüz olursa aşağıya yorum yazabilir veya iletişim kısmında bana ulaşabilirsiniz. İyi çalışmalar diliyorum.