Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Görüntülerin bir veritabanında saklanması genellikle önerilmez. Bunu yapmak, gereken depolama miktarı ve işlem gücü nedeniyle hızla pahalı hale gelebilir. Supabase depolama gibi uygun maliyetli ve ölçeklenebilir bir depolama hizmeti kullanmak daha iyidir.

Aşağıda, Supabase JavaScript istemci kitaplığını kullanarak görüntüleri bir depolama grubuna nasıl yükleyeceğinizi ve görüntüleri bir Next.js uygulamasında nasıl sunacağınızı öğreneceksiniz.

Supabase Projesi Oluşturma

Halihazırda hazır bir Next.js uygulamanız yoksa, resmi takip edin Next.js başlangıç ​​kılavuzu uygulamanızı oluşturmak için.

Bunu yaptıktan sonra, bir Supabase veritabanı oluşturmak için şu adımları izleyin:

  1. Supabase web sitesine gidin ve yeni bir hesap oluşturun. Zaten bir hesabınız varsa, giriş yapın.
  2. Supabase kontrol panelinden, Yeni bir proje oluştur düğme.
  3. Projenize bir isim verin ve tıklayın. proje oluştur düğme. Supabase projeyi oluşturduğunda, sizi proje kontrol paneline yönlendirecektir.

Projeyi oluşturduktan sonra bir depolama kovası oluşturun.

Bir Supabase Depolama Paketi Oluşturma

Bir depolama kovası, resimler ve videolar gibi medya dosyalarını saklamanıza olanak tanır. Supabase'de panoda bir depolama kovası oluşturabilir veya istemci kitaplığını kullanabilirsiniz.

Panoyu kullanmak için şu adımları izleyin:

  1. Gitmek Supabase Depolama Panodaki sayfa.
  2. Tıklamak Yeni Kova ve grup için bir ad girin. Görüntüleri içinde saklayacağınız için görüntüler olarak adlandırabilirsiniz.
  3. Tıklamak Paket Oluştur.

Ardından, uygulamanızda grupla etkileşim kurmak için bir Supabase istemcisi kuracaksınız.

Supabase İstemcisini Kurma

Terminal aracılığıyla supabase-js istemci kitaplığını yükleyerek başlayın:

npm kurulumu @supabase/supabase-js

Ardından, uygulamanızın kök dizininde veya kullanıyorsanız src klasöründe lib adlı yeni bir klasör oluşturun. Bu klasöre, adlı yeni bir dosya ekleyin. supabase.js ve Supabase istemcisini başlatmak için aşağıdaki kodu kullanın.

içe aktarmak {istemci oluştur} itibaren"@supabase/supabase-js"
ihracatsabit supabase = createClient('', '')

Proje URL'sini ve anon anahtarını, içinde bulabileceğiniz kendi bilgilerinizle değiştirin. Supabase proje ayarları. Ayrıntıları .env dosyasına kopyalayabilir ve oradan başvurabilirsiniz.

SUPABASE_PROJECT_URL="your_project_url"
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

Şimdi, supabase.js'de şunlara sahip olmalısınız:

ihracatsabit supabase = createClient(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

Bunu yaptıktan sonra resimleri kabul edecek bir form oluşturun.

Görüntüleri Kabul Eden Bir Form Oluşturma

İçeri Next.js uygulama klasörü adlı bir alt klasör oluşturun. yüklemek ve adında yeni bir dosya ekleyin. sayfa.js. Bu, /upload rotasında mevcut olan yeni bir sayfa yaratacaktır. Next.js 12 kullanıyorsanız, içinde upload.js oluşturun. sayfalar dosya.

Formu oluşturmak için yükleme sayfasında aşağıdaki kodu ekleyin.

"müşteri kullan";
içe aktarmak { kullanımDevlet } itibaren"tepki";
ihracatvarsayılanişlevSayfa() {
sabit [dosya, setfile] = useState([]);


sabit işlemeGönder = zaman uyumsuz (e) => {
 e.preventDefault();
// fotoğraf yükleniyor
 };


sabit handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
geri dönmek (


"dosya" isim="resim" onChange={handleFileSelected} />

Bir dosya seçip gönder düğmesine tıkladığınızda, form, handleSubmit işlevini çağırmalıdır. Resmi bu işlevde yükleyeceksiniz.

Birden çok alana sahip büyük formlar için, daha kolay olabilir. formik gibi bir form kitaplığı kullanın doğrulama ve gönderimi işlemek için.

Bir Görüntü Dosyasını Supabase Depolama Grubuna Yükleme

HandleSubmit işlevinde, aşağıdaki kodu ekleyerek görüntüyü yüklemek için Supabase istemcisini kullanın.

sabit işlemeGönder = zaman uyumsuz (e) => {
 e.preventDefault();
sabit dosya adı = `${uuidv4()}-${dosya.adı}`;
sabit { veri, hata } = beklemek supabase.storage
 .itibaren("Görüntüler")
 .upload (dosya adı, dosya, {
 önbellek Kontrolü: "3600",
 ek: YANLIŞ,
 });
sabit dosya yolu = veri.yol;
// dosya yolunu veritabanına kaydet
 };

Bu işlevde, dosya adını ve uuid npm paketi tarafından oluşturulan bir UUID'yi birleştirerek benzersiz bir dosya adı oluşturuyorsunuz. Bu, aynı adı paylaşan dosyaların üzerine yazılmasını önlemek için önerilir.

uuid paketini npm aracılığıyla kurmanız gerekecek, bu nedenle aşağıdaki komutu terminalde kopyalayıp çalıştırın.

npm uuid'i kur

Ardından, yükleme sayfasının üst kısmında uuid'in 4. sürümünü içe aktarın.

içe aktarmak {v4 gibi uuidv4 } itibaren"uuid";

uuid paketini kullanmak istemiyorsanız, başka paketler de var. benzersiz kimlikler oluşturmak için kullanabileceğiniz yöntemler.

Ardından, dosyayı "görüntüler" adlı depolama grubuna yüklemek için supabase istemcisini kullanın. Supabase istemcisini dosyanızın en üstüne almayı unutmayın.

içe aktarmak { alt taban } itibaren"@/lib/supabase";

Görüntünün yolunu ve görüntünün kendisini geçtiğinize dikkat edin. Bu yol, dosya sisteminde olduğu gibi çalışır. Örneğin, görüntüyü klasördeki public adlı bir klasöre kaydediyor olsaydınız, yolu "/public/filename" olarak belirtirdiniz.

Supabase, verileri ve hata nesnesini içeren bir nesne döndürür. Veri nesnesi, az önce yüklediğiniz görüntünün URL'sini içerir.

Bu yükleme işlevinin çalışması için, aşağıdaki adımları izleyerek uygulamanızın bir Supabase depolama grubuna veri eklemesine ve okumasına izin veren bir erişim ilkesi oluşturmalısınız:

  1. Proje kontrol panelinizde, Depolamak sol kenar çubuğundaki sekme.
  2. Depolama paketinizi seçin ve üzerine tıklayın. Erişim sekme.
  3. Altında Paket politikaları, tıkla Yeni politika düğme.
  4. seçin Tam özelleştirme için sıfırdan bir politika oluşturma seçeneği.
  5. İçinde Politika ekle iletişim kutusunda, politikanız için bir ad girin (ör. "Eklemeye ve Okumaya İzin Ver").
  6. Seçme SOKMAK Ve SEÇME gelen izinler İzin verilen işlemler Aşağıya doğru açılan menü.
  7. Tıkla Gözden geçirmek politikaları gözden geçirmek için düğmesine basın.
  8. Tıkla Kaydetmek İlkeyi eklemek için düğme.

Artık bir erişim hatası oluşturmadan görüntüleri yükleyebilmeniz gerekir.

Yüklenen Resimleri Uygulamanızda Sunma

Görüntüyü sitenizde sunmak için, iki farklı yoldan alabileceğiniz genel bir URL'ye ihtiyacınız vardır.

Supabase istemcisini şu şekilde kullanabilirsiniz:

sabit dosya yolu = "path_to_file_in_buckey"
sabit { veri } = alt taban
 .depolamak
 .itibaren('Görüntüler')
 .getPublicUrl(`${dosyayolu}`)

Veya klasör URL'sini dosya yolu ile manuel olarak birleştirebilirsiniz:

sabit dosya yolu = `${kova_url}/${dosyayolu}`

Hangi yöntemi tercih ederseniz edin. Dosya yoluna sahip olduğunuzda, bunu Next.js resim bileşeninde şu şekilde kullanabilirsiniz:

"" genişlik={200} yükseklik={200}/>

Bu kod, resmi sitenizde gösterecektir.

Supabase ile Sağlam Uygulamalar Oluşturma

Bu kodu kullanarak, bir kullanıcıdan gelen bir dosyayı bir form aracılığıyla kabul edebilir ve onu Supabase deposuna yükleyebilirsiniz. Daha sonra bu görseli alıp sitenizde sunabilirsiniz.

Görüntüleri depolamanın yanı sıra, Supabase'in başka işlevleri de vardır. Bir PostgreSQL veritabanı oluşturabilir, uç işlevleri yazabilir ve kullanıcılarınız için kimlik doğrulama ayarlayabilirsiniz.