[Next.js] Supabase 사용하기

1. Superbase 설정

1.1 Supabase 프로젝트 생성

① superbase 공식 문서에 접속한 후 로그인

② New Project를 클릭하여 새 프로젝트를 생성

③ 생성이 완료되면 API Key를 확인할 수 있다.

1.2 프로젝트 설정

① JavaScript Docs로 이동하고, 스크롤을 내려 JavaScript Docs를 클릭

② VS Code에서 Supabase 패키지를 설치

yarn add @supabase/supabase-js

③ Dashboard로 이동하여, 생성한 프로젝트를 클릭

④ 상단의 Connect를 클릭

⑤ App Framworks 섹션에서 .evn.local 설정 코드를 복사

1.3 환경 변수 설정

① 프로젝트의 최상단 디렉토리에 .env.local 파일을 생성하고, 복사한 코드를 붙여넣기

② Supabase service_role 키를 추가로 설정

• setting > API 에 접속 후, service_role 를 복사
• .env.local에NEXT_PUBLIC_SUPABASE_ANON_KEY의 key를 변경
  
  

1.4 Supabase 클라이언트 설정

① utils/supabase.ts 클릭 후 복사

② src/utils/supabase.ts 파일을 생성 하고 붙여넣기

코드를 붙여 넣으면 타입 오류가 생기는데, 각각의 키 뒤에 as string를 붙여주면 된다.

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseKey);

1.5 데이터베이스 테이블 생성

① table 아이콘 클릭 후, Table Editor에서 Create a new table 클릭

② 테이블 이름을 todos로 지정하고, 아래와 같이 컬럼을 추가한 뒤 Save를 클릭하여 DB 테이블 생성

① 생성한 todos 테이블의 오른쪽 상단에서 Add RLS policy를 클릭

② Create policy를 클릭한 뒤 아래와 같이 설정

• Policy Command: INSERT
• Templates: INSERT
• Target Roles: service_role

설정 후, Save policy를 클릭

③ 정책이 생성되었으면, Table Editor에서 todos 테이블을 확인

이제 Supabase 설정이 완료!

2. 데이터 Insert

2.1 API Docs 확인

① Supabase 대시보드에서 우측 상단의 API Docs를 클릭

그 후, Insert rows 섹션을 찾아 필요한 코드를 복사하여 내 프로젝트에 붙여넣기

2.2 데이터 삽입 코드 작성

복사한 코드를 프로젝트에 적용하여 데이터를 삽입하는 함수를 작성

import { supabase } from "@/app/utils/supabase";
...

  // superbase에 저장
  const onSubmit = async () => {
    console.log("함수 호출");

    if (!title || !content) {
      toast({
        title: "기입되지 않은 데이터(값)이 있습니다.",
        description: "제목, 날짜 혹은 콘텐츠 값을 모두 작성해주세요.",
      });
      return;
    } else {
      // Superbase 데이터베이스에 연동

      const { data, error, status } = await supabase
        .from("todos")
        .insert([{ title: title, content: content }])
        .select();

      if (error) {
        console.log(error);
        toast({
          title: "에러가 발생했습니다.",
          description: "콘솔 창에 출력된 에러를 확인하세요.",
        });
      }
      if (status === 201) {
        toast({
          title: "생성 완료!",
          description: "작성한 글이 Supabase에 올바르게 저장되었습니다.",
        });
      }
    }
  };

2.3 결과 확인

데이터를 삽입한 후, Supabase 대시보드에서 todos 테이블을 확인하면 데이터가 올바르게 저장된 것을 확인할 수 있다.