"Lemari Es" Digital Buat Asetmu: Kenalan Sama Supabase Storage!

Aplikasi Toko Kue kita (atau aplikasi web lainnya) pasti butuh tempat buat nyimpen file-file penting, kan? Terutama gambar-gambar produk kue yang menggoda selera! Selain itu, mungkin ada file lain kayak PDF menu, atau aset digital lainnya.

Naruh semua gambar langsung di folder public/ proyek Next.js itu gampang buat mulai, tapi kalau jumlahnya banyak atau ukurannya gede, bisa bikin ukuran build proyek jadi bengkak. Plus, ngelolanya jadi kurang fleksibel.

Nah, Supabase punya solusi keren buat ini: Supabase Storage!

Apa Itu Supabase Storage?

Supabase Storage adalah layanan penyimpanan file berbasis objek yang aman dan skalabel, udah terintegrasi langsung sama proyek Supabase-mu. Bayangin ini kayak Google Drive atau Dropbox, tapi khusus buat aset aplikasimu, dan bisa kamu atur hak aksesnya dengan detail.

Dengan Supabase Storage, kamu bisa:

• Mengunggah (Upload) berbagai jenis file (gambar, video, audio, PDF, dll.).
• Menyimpan file di "bucket" (kayak folder) yang bisa kamu atur.
• Mengatur hak akses ke file dan bucket (siapa aja yang boleh liat, download, atau upload).
• Mendapatkan URL publik (atau privat) buat ngakses file-file itu dari aplikasimu.
• Integrasi gampang sama Supabase JS Client buat operasi file dari frontend atau backend.

Buat Toko Kue kita, Supabase Storage ini cocok banget buat nyimpen semua foto produk kue berkualitas tinggi.

Langkah 1: Membuat Bucket di Supabase Storage

"Bucket" di Supabase Storage itu kayak folder utama atau kontainer paling atas buat nyimpen file-filemu. Kamu bisa bikin beberapa bucket buat ngorganisir file berdasarkan jenis atau keperluannya.

1. Buka Dashboard Supabase Proyekmu.

2. Di sidebar kiri, klik ikon Storage (biasanya ikon folder 📁 atau awan ☁️).

3. Kalau ini pertama kalinya, kamu mungkin bakal liat halaman sambutan. Klik tombol Create a new bucket (atau sejenisnya).

   

4. Isi Detail Bucket:

   • Name (Nama Bucket): Kasih nama bucket-mu. Nama ini harus unik, biasanya huruf kecil, angka, dan tanda hubung. Misalnya, buat Toko Kue kita, kita bisa kasih nama gambar-produk-kue.
   • Public Bucket? (Bucket Publik?): Ini penting!
     • Kalau kamu centang This bucket is public: Semua file di dalem bucket ini bakal bisa diakses langsung lewat URL publik tanpa perlu autentikasi atau token khusus, ASALKAN kamu juga ngeset Row Level Security (RLS) yang sesuai di tabel storage.objects dan storage.buckets (Supabase biasanya ngasih snippet SQL buat bikin policy RLS publik yang umum). Ini cocok buat gambar produk yang emang mau diliat semua orang.
     • Kalau kamu gak centang (bucket privat): File di dalemnya cuma bisa diakses pake URL yang udah ditandatangani (signed URL) atau lewat Supabase Client dengan hak akses yang bener. Cocok buat file sensitif atau yang aksesnya terbatas. Buat gambar produk Toko Kue kita, bikin bucket publik biasanya lebih gampang.
   • (Opsional) Allowed MIME types: Kamu bisa batasin jenis file apa aja yang boleh diupload ke bucket ini (misal, image/jpeg, image/png). Kosongin aja buat ngebolehin semua jenis file.
   • (Opsional) Max file size: Batasan ukuran file maksimal yang boleh diupload.

   

   (Catatan: Placeholder gambar).

5. Klik Create bucket (atau Save).

Sekarang kamu udah punya "lemari" (bucket) buat nyimpen gambar-gambar kuemu!

Langkah 2: Mengunggah File (Gambar Produk) ke Bucket

Ada beberapa cara buat masukin file ke bucket-mu:

a. Upload Manual Lewat Dashboard Supabase

Ini cara paling gampang buat nyoba-nyoba atau kalau filenya gak terlalu banyak.

1. Di halaman Storage, klik nama bucket yang udah kamu buat (misal, gambar-produk-kue).
2. Kamu bakal liat isi bucket itu (awalnya kosong).
3. Klik tombol Upload file.
4. Pilih file gambar dari komputermu. Kamu juga bisa bikin folder di dalem bucket ini buat organisasi.
5. File-nya bakal ke-upload.

b. Upload Programatik Pake Supabase JS Client

Ini cara yang bakal kita pake kalau mau bikin fitur upload gambar dari aplikasi kita sendiri (misal, admin Toko Kue mau nambahin produk baru beserta gambarnya).

• Sintaks Dasar (di Frontend pake Supabase JS Client):

  // Asumsikan 'supabase' adalah instance Supabase Client-mu
  // dan 'fileGambar' adalah objek File dari input <input type="file">
   
  async function unggahGambarProduk(namaBucket: string, namaFileDiStorage: string, fileGambar: File) {
    try {
      const { data, error } = await supabase
        .storage
        .from(namaBucket) // Nama bucket tujuan
        .upload(namaFileDiStorage, fileGambar, { // Path/nama file di storage, dan objek File-nya
          cacheControl: '3600', // Opsional: berapa lama file di-cache browser (detik)
          upsert: false // Opsional: false = error kalau file udah ada, true = timpa kalau udah ada
        });
   
      if (error) {
        console.error("Error unggah gambar:", error);
        return null;
      }
   
      console.log("Gambar berhasil diunggah:", data);
      // 'data.path' berisi path lengkap ke file di storage (bukan URL publik)
      return data; 
    } catch (err: any) {
      console.error("Kesalahan tak terduga saat unggah:", err.message);
      return null;
    }
  }
   
  // Contoh cara manggilnya dari event handler input file:
  // const inputUpload = document.getElementById('inputGambarProduk') as HTMLInputElement;
  // inputUpload.addEventListener('change', async (event) => {
  //   const files = (event.target as HTMLInputElement).files;
  //   if (files && files.length > 0) {
  //     const file = files[0];
  //     const namaFileUnik = `${Date.now()}-${file.name}`; // Bikin nama file unik
  //     await unggahGambarProduk('gambar-produk-kue', namaFileUnik, file);
  //   }
  // });

  • namaFileDiStorage: Ini bakal jadi path dan nama file di dalem bucket-mu. Kamu bisa bikin struktur folder juga di sini, misal kategori-cake/kue-coklat.jpg.
  • Biasanya kamu mau nama filenya unik biar gak nimpa file lama. Bisa dengan nambahin timestamp atau UUID ke nama filenya.

Langkah 3: Mendapatkan URL Publik Gambar

Setelah file ke-upload, gimana cara nampilinnya di website kita pake tag <img>? Kita butuh URL publiknya.

• Cara Dapetin URL Publik (Pake Supabase JS Client):

  function dapatkanUrlPublikGambar(namaBucket: string, pathKeFileDiStorage: string) {
    const { data } = supabase
      .storage
      .from(namaBucket)
      .getPublicUrl(pathKeFileDiStorage); // Ini yang penting!
   
    if (data) {
      console.log("URL Publik:", data.publicUrl);
      return data.publicUrl;
    }
    return null;
  }
   
  // Contoh:
  // const urlGambarKueCoklat = dapatkanUrlPublikGambar('gambar-produk-kue', 'kue-coklat-klasik.jpg');
  // if (urlGambarKueCoklat) {
  //   // <img src={urlGambarKueCoklat} alt="Kue Coklat" />
  // }

  • getPublicUrl() bakal ngembaliin objek yang punya properti publicUrl.
  • PENTING: Ini cuma bakal ngasih URL yang bisa diakses publik kalau bucket-mu diset sebagai publik ATAU kalau kamu udah ngatur Row Level Security Policies yang bener di tabel storage.objects yang ngebolehin akses baca ke file itu.

• Format URL Publik Manual (Kalau Bucket Publik dan RLS Ngizinin): URL publik Supabase Storage biasanya punya format: https://<ID_PROYEK_SUPABASE>.supabase.co/storage/v1/object/public/<NAMA_BUCKET>/<PATH_KE_FILE_DI_STORAGE>

  • Kamu bisa nemuin <ID_PROYEK_SUPABASE> di URL dashboard proyekmu atau di Settings > API.
  • Contoh: https://xyzabc.supabase.co/storage/v1/object/public/gambar-produk-kue/kue-enak.jpg

Mengintegrasikan dengan Aplikasi Toko Kue Kita

Di studi kasus Toko Kue, kita bisa:

1. Bikin bucket gambar-produk-kue jadi publik.

2. Upload semua gambar kue dari data dummy kita ke bucket itu (bisa manual dulu dari dashboard).

3. Ganti nilai gambar_url di data dummy daftar-kue.json (atau nanti di database) jadi URL publik dari Supabase Storage.

   • Misalnya, dari "/images/kue/kue-coklat-klasik.jpg" (yang nunjuk ke folder public/ di Next.js) jadi https://xyzabc.supabase.co/storage/v1/object/public/gambar-produk-kue/kue-coklat-klasik.jpg.

4. Komponen <Image> dari next/image bisa kok nerima URL eksternal kayak gini, asal domainnya (xyzabc.supabase.co) udah di-whitelist di next.config.mjs bagian images.remotePatterns.

   // next.config.mjs
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     // ...
     images: {
       remotePatterns: [
         {
           protocol: 'https',
           hostname: 'xyzabc.supabase.co', // GANTI 'xyzabc' dengan ID Proyek Supabase-mu!
           // port: '',
           // pathname: '/storage/v1/object/public/gambar-produk-kue/**', // Bisa lebih spesifik
         },
         // ... (remotePatterns lain kalau ada)
       ],
     },
   };
   export default nextConfig;

   Jangan lupa restart dev server Next.js setelah ngubah next.config.mjs!

Hak Akses dan Keamanan (Row Level Security - RLS)

Ini topik yang agak advance, tapi super penting buat Supabase Storage (dan Database).

• Kalau bucket-mu privat, kamu butuh "signed URL" (URL yang punya token akses sementara) buat ngakses filenya. Supabase JS Client punya metode buat nge-generate ini.
• Kalau bucket-mu publik, secara default semua orang bisa akses semua file di situ lewat URL. Ini mungkin gak masalah buat gambar produk.
• Tapi, kamu bisa bikin RLS Policies di tabel storage.objects (lewat SQL Editor di Supabase) buat ngasih aturan yang lebih detail. Misalnya:
  • "Semua orang boleh SELECT (baca/download) file dari bucket gambar-produk-kue."
  • "Hanya pengguna yang udah login dan punya peran 'admin' yang boleh INSERT (upload) file ke bucket itu."

Supabase punya dokumentasi yang bagus banget soal RLS buat Storage ini.

Supabase Storage ngasih kita solusi yang gampang dan terintegrasi buat ngelola file-file aplikasi kita. Buat Toko Kue kita, ini cara yang bagus buat nyimpen gambar produk secara profesional.

Dengan mindahin gambar produk ke Supabase Storage, proyek Next.js kita jadi lebih ramping (karena gambar gak ikut di-bundle atau di folder public lokal), dan kita dapet manfaat dari infrastruktur cloud Supabase buat nyajiin gambar itu.