02. Next.js와 Supabase로 미니 노트앱 만들기

🌿 초기설정 - VSCode, Git, nvm, TypeScript

VSCode

설치해야 할 플러그인

• Prettier 포맷터 플러그인
• TailwindCSS 플러그인
• Github Copilot (선택)

TypeScript 설치

npm i -g typescript

🌿 Next.js 프로젝트 생성

Create Next App

npx create-next-app@latest inflearn-supabase-note

 

🌿 UI 구현(with Tailwind CSS)

Tailwind CSS 써보니까 너무 편하다.. 다만 뭐가 있는지 알아야 유용하긴 한데, className 알고 잘 쓰면 너무 편할 것 같다.

🌿 첫 Supabase 프로젝트 생성

Supabase | The Open Source Firebase Alternative

Create a new organization

Create a new Project

프로젝트 생성 후 아래 값들 저장해두기

• DB Password
• Supabase Project URL
• Supabase Anon Key
• Supabase Service Role : 이번 예제에서는 사용 X

•  
• Settings > Configuration > API 탭에 Project URL, Anon Key, Service Role Key 

 

TableEditor 탭에서 Note 테이블 생성 후 테스트용 데이터 하나 넣기

• id
• title → varchar
• content → text
• created_at

🌿 Next.js에 Supabase SDK 적용하기

Supabase 설치

npm i --save @supabase/supabase-js

.env 파일에 supabase url, supabase anon key 넣기

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

package.json에 generate-types 커맨드 추가하기

• supabase의 gen이라는 커맨드를 통해서 typescript로 실제 DB에 있는 note 테이블 타입 생성
• project_id : supabase url에서 앞부분 ( ybagycqyjklicovcxujk )

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

터미널에서 Supabase 로그인 진행 & generate-types 진행

npx supabase login
# 브라우저가 열리면서 Supbase 로그인

npm run generate-types
# 정상로그인 후 처리가 되면 types_db.ts 파일이 새로 생성된다.

Supabase client 생성

• utils/supabase.ts 파일 생성

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

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<Database>(supabaseUrl, supabaseKey);

---

 

Supabase에서 데이터베이스 연동해서 기능 처리하는 것을 실습해 보았는데 생각보다 간편해서 사이드 프로젝트 진행할때 좋을 것 같다. 공식 문서 읽어보면서 다른 기능들을 좀 더 공부해 봐야겠다.