[Next.js 14 + Supabase ] Supabase 프로젝트 생성

https://supabase.com/

Supabase | The Open Source Firebase Alternative

 

회원가입 진행해야함

 

 

나는 github로 인증함

 

 

 

 

new Project

 

 

 

 

 

비밀번호는 Generate a password를 사용해서 랜덤으로 만들어줬고 

copy하여 따로 보관

 

 

 

생성되는데 로딩 시간이 조금 소요된다.

 

 

 

 

완료가 되면 아래와 같이 화면이 변한다.

 

 

 

 

 

1. 테이블 생성 기능 -> Table Editor

 

 

2..sql 을 database에 날릴 수 있는 기능 

 

 

Assistant를 사용해서 chat gpt 처럼 원하는 기능을 말하면 sql문으로 만들어줌

 

 

 

 

 

3.Database 

생성된 테이블 관리 

 

 

 

 

4. 로그인이나 유저관리도 가능

 

 

 

 

5. Storage 기능으로 파일 업로드 및 관리 가능

 

 

 

 

6. Realtime -. 실시간 채팅 기능을 사용할 때 

 

 

 

 

 

 

 

Table Editor -> Crete a new table

 

 

 

 

 

 

 

 

 

 

 

 

 

insert row 기능으로 행 추가 가능   

 

 

 

 

 

추가된 것이 확인된다. 

 

 

 

이제 실제 프로젝트에 supabase를 적용할 건데 

 

 

. env파일은 만든뒤 환경변수를 넣어준다. 

NEXT_PUBLIC_SUPABASE_URL=https://[project_id].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_SUPABASE_SERVICE_ROLE=
NEXT_SUPABASE_DB_PASSWORD=

 

 

 

 

 

 

 

 

 

을 확인하여 환경변수의  key들을 채워준다. 

 

 

 

 

package.json

 

아래 코드 추가

 "generate-types": "npx supabase gen types typescript --project-id [project_id] --schema public > types_db.ts"

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "lint": "next lint",

    "generate-types": "npx supabase gen types typescript --project-id [project_id] --schema public > types_db.ts"

  },

 

[project_id] 부분에는 여기 URL에 표기되어 있는 ID를 넣으면됨

 

 

이제

 

npm run generate-types

명령어를 실행하면됨 -> 엔터 입력 

 

그러면  실패를 하게되는데

 

 Supabase 로그인을 컴퓨터에서 안해서 그럼

 

 

아래의 커맨드를 입력해주면 됨

npx supabase login

 

 

 

로그인이 된다.

 

그 뒤 다시 

 

npm run generate-types

를 실행하면

 

정상적으로 넘어간다.

 

 

완료가 되면 

Types_db.ts를 보면 아래와 같이 정의된것이 확인가