[Next.js] Supabase 타입 Type 설정과 적용

 

➜ Supabase를 사용할 때 자동으로 타입 생성하는 방법

 

최소 필수 버전 v1.8.1.

 

npm i supabase@">=1.8.1" --save-dev

 

supabase 로그인

 

npx supabase login

 

로그인하면 아래와 같이 인증 번호 페이지로 이동하고, 이 번호를 복붙 해준다.

 

supabase 초기화

 

npx supabase init

 

원하는 경로에 database.type.ts 파일 생성

 

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > src/types/supabase/database.types.ts

 

Project ID는 supabase 페이지 내 해당 프로젝트의 Project Settings - General 에서 볼 수 있다.

 

 

그럼 이렇게 자동으로 타입이 생성된다.

 

 

import { createBrowserClient } from '@supabase/ssr';
import { Database } from '@/types/supabase/database.type';

export function createClient() {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  );
}

 

이후 이런 식으로 <Database> 타입을 적용해 준다.

 

 

---

참고

Generating TypeScript Types | Supabase Docs