인프런 커뮤니티 질문&답변

Supabase의 getPublicUrl을 Next.js 14에서 사용하는 방법을 간단히 설명해드릴게요.

1. getPublicUrl 사용법

Supabase Storage에 저장된 파일의 공용 URL을 생성하려면, 아래처럼 getPublicUrl을 사용하면 됩니다.

export async function getPublicImageUrl(path) {

  const { data } = supabase
    .storage
    .from('your-bucket-name')  // 버킷 이름
    .getPublicUrl(path);       // 파일의 경로

  return data.publicUrl;
}

이 함수는 주어진 경로에 해당하는 파일의 공용 URL을 반환합니다. 예를 들어, images/example.png 파일의 URL을 가져올 수 있습니다.

2. Next.js에서 활용하기

- 서버 컴포넌트에서 이미지 URL을 미리 생성하고 렌더링할 수 있습니다:

  // app/page.js
  import { getPublicImageUrl } from './supabase-client';
  export default async function Page() {
    const imageUrl = await getPublicImageUrl('images/example.png');
    return (
      <div>
        <img src={imageUrl} alt="Example" />
      </div>
    );
  }

- 클라이언트 컴포넌트에서 동적으로 URL을 가져와 렌더링할 수도 있습니다:

  import { useEffect, useState } from 'react';
  import { getPublicImageUrl } from './supabase-client';
  export default function ImageComponent() {
    const [imageUrl, setImageUrl] = useState('');
    useEffect(() => {
      async function fetchImageUrl() {
        const url = await getPublicImageUrl('images/example.png');
        setImageUrl(url);
      }

      fetchImageUrl();
    }, []);

    return (
      <div>
        {imageUrl && <img src={imageUrl} alt="Example" />}
      </div>
    );
  }

요약

- getPublicUrl을 사용해 Supabase Storage에서 파일의 공용 URL을 가져올 수 있습니다.

- 서버 또는 클라이언트 컴포넌트에서 이 URL을 활용해 이미지를 렌더링할 수 있습니다.

더 궁금한 점이 있으면 편하게 말씀주세요!