Supabase stoargeでOGP表示

publicURLを取得する関数を作る

storage.ts
import { supabase } from "@/libs/supabaseClient";

interface Props {
  bucketName: string;
  fileName: string;
  defaultURL: string;
}

export async function fetchPublicURL({
  bucketName,
  fileName,
  defaultURL,
}: Props): Promise<string> {
  if (!fileName) {
    return defaultURL;
  }
  const { data, error } = supabase.storage
    .from(bucketName)
    .getPublicUrl(fileName);

  if (error) {
    return defaultURL;
  }
  return data?.publicURL ?? defaultURL;
}

呼び出し

  const ogpImage = await fetchPublicURL({
    bucketName: "gears",
    fileName: gear?.image || "",
    defaultURL: "/images/ogp.png",
  });

確認