什麼是 Supabase Storage

Supabase Storage 是 Supabase 平台提供的物件儲存服務（類似於 AWS S3），讓你能儲存圖片、影片、PDF 等任意檔案，並通過 URL 存取它們。

對 Next.js 應用的好處：

  • 免費方案包含 1GB 儲存空間（一般品牌官網的媒體用量足夠）
  • 整合 Supabase Auth，可以使用行級安全政策（RLS）控制誰能上傳或讀取
  • 全球 CDN 加速靜態資源的傳遞
  • 可以直接用 Supabase JavaScript SDK 操作，不需要額外的 AWS SDK

設定 Supabase Storage

在 Supabase 控制台建立一個 Bucket：

進入 Storage → New Bucket，設定：

  • Bucket 名稱（例如 media）
  • Public 或 Private：Public Bucket 的檔案可以直接通過 URL 存取（適合公開的圖片）；Private Bucket 需要有效的訪問 token

對品牌官網中的公開圖片（封面圖、Open Graph 圖片、作品集圖片），使用 Public Bucket 最方便。

設定 Bucket 政策（Storage Policies）

即使是 Public Bucket，你通常也需要設定「誰有權限上傳、刪除檔案」，避免任何人都能上傳到你的儲存空間。

在 Supabase 控制台的 Storage Policies 中，為 objects 表設定 INSERT 政策：

限制只有已驗證的特定角色（例如 service_role）能上傳。這意味著只有你的 Next.js API Route（使用 service role key）能上傳，前端用戶無法直接上傳。

在 Next.js API Route 中實作上傳

建立 app/api/admin/upload/route.ts：

接收 FormData 格式的請求，讀取 file 欄位，使用 Supabase service role client 呼叫 storage.from('media').upload() 上傳檔案，回傳上傳後的公開 URL。

上傳流程：

  1. 接收到前端送來的 multipart/form-data 請求
  2. 驗證是否有管理員權限（Authentication 檢查）
  3. 驗證檔案類型（只允許 image/jpeg, image/png, image/webp）
  4. 生成唯一的檔案名稱（避免覆蓋），例如使用 crypto.randomUUID() + 原始副檔名
  5. 使用 supabaseAdmin.storage.from('media').upload(fileName, buffer) 上傳
  6. 使用 supabaseAdmin.storage.from('media').getPublicUrl(fileName) 取得公開 URL
  7. 回傳 URL

安全注意事項：API Route 要驗證請求者的身份（使用你的 admin auth 系統），不能讓未授權的請求上傳檔案。

在前端實作上傳表單

在管理後台的文章編輯或圖片上傳頁面，建立一個 input type="file" 表單：

選取檔案後，建立 FormData 物件，append 選取的 File，然後 POST 到 /api/admin/upload。

接收到回傳的 URL 後，更新 state 顯示預覽，並把 URL 存入文章的 coverImage 欄位。

使用 Supabase URL 搭配 next/image

Supabase Storage 的 URL 格式是：

https://[project-id].supabase.co/storage/v1/object/public/[bucket]/[filename]

要在 Next.js Image 組件中使用外部 URL，需要在 next.config.ts 的 images.remotePatterns 中設定允許的 hostname（你的 Supabase project 的 hostname）。

設定後，就可以把 Supabase Storage URL 當作 next/image 的 src，享受自動 WebP 轉換和尺寸優化。

刪除和替換檔案

使用 supabaseAdmin.storage.from('media').remove([fileName]) 刪除特定檔案。

當文章被刪除時，同步刪除對應的媒體檔案。

成本控制

Supabase 免費方案包含：

  • 1 GB 儲存空間
  • 2 GB 頻寬 / 月

對品牌官網：一張優化後的博客封面圖約 200–500 KB，1 GB 能放 2,000–5,000 張圖片，免費方案對大多數中小型官網足夠應付多年。

如果未來需要擴展，Supabase Pro 方案 $25 / 月包含 100 GB 儲存和 200 GB 頻寬。