Supabase & Next.js

1-TanStackQuery설치 1-1-패키지설치 https://tanstack.com/query/latest/docs/framework/react/installation 이동 설치 npm i @tanstack/react-query 1-2-파일생성 next-with-supabasecomponentsquery-provider.tsx 파일생성 QueryPrivider 컴포넌트 작성 'use client'; import {QueryClient,QueryClientProvider} from '@tanstack/react-query'; import React, {ReactNode, useState} from 'react'; const QueryProvider = ({children}: {children: ReactNode}) => { const [queryClient] = useState( () => new QueryClient({ defaultOptions: {queries: {staleTime: Infinity}}, }) ); return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>; }; export default QueryProvider; … 더 읽기

1-Profile.tsx 1-1-UI요소 추가 1-1-1-프로필 이미지가 없을 경우 사용자명 렌더링하기 next-with-supabasecomponentsProfile.tsx Image 컴포넌트를 수정한다 **… **</Link> ) : (** ****<> {data?.image_url ? ( <Image src={data.image_url || ''} alt={data.display_name || ''} width={50} height={50} className="rounded-full" /> ) : ( <div className="h-[50px] w-[50px] flex items-center justify-center"> <h1>{data.email}</h1> </div> )} </>**** …** 테스트 1. 이미지 데이터가 null이면 email 이 렌더링된다. … 더 읽기

1-수파베이스_테이블편집 1-1-테이블생성 수파베이스 대시보드로 이동 테이블이름생성 데이터 타입 지정 – 이미지의 순번대로 수행 컬럼추가-email, display_name, image_url 확인 1-2-함수작성하기 수파베이스 대시보드 아래 이미지와 같이 설정한다 begin insert into public.profiles(id,email,display_name,image_url) values( new.id, new.raw_user_meta_data->>'email', new.raw_user_meta_data->>'user_name', new.raw_user_meta_data->>'avatar_url' ); return new; end 확인 3-트리거작성 Info: 💡 트리거란? 데이터베이스에 미리 지정된 조건이 충족되거나 특정 테이블에 삽입,수정,삭제 등의 변경 이벤트 발생시 DBMS(DataBaseMagamentSystem) … 더 읽기

1-Supabase_project_생성 https://supabase.com/dashboard/projects 2-nextJs .env.local 파일 생성 Next.js에서 서버측 인증설정 – 아래 링크에서 단계별 안내를 따라한다 🔗https://supabase.com/docs/guides/auth/server-side/nextjs 🔗https://supabase.com/docs/guides/auth/social-login/auth-github 수파베이스 패키지 설치 npm install @supabase/supabase-js @supabase/ssr 환경변수 설정 – .env.local NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url> NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key> 각 변수의 값은 가이드 문서에서 확인할 수 있다. 자신의 환경변수에 맞는 값을 확인하여 수정한다 lib/supabase/server.ts 생성 import { createServerClient } from '@supabase/ssr' import { cookies … 더 읽기

1-Next 설치 npx create-next-app@latest . 2-shadcn 설치 공식홈 shadcn(샤드씨엔) 이란? ShadCN은 미리 제작된 UI컴포넌트를 제공하는 라이브러리이다. Next와 연동이 간편하고 Tailwind CSS와의 통합을 지원하여 스타일링을 쉽게 할 수 있다. https://ui.shadcn.com/docs https://ui.shadcn.com/docs/installation/next npx shadcn@latest init 3-다크모드 테마 설치 https://ui.shadcn.com/docs/dark-mode/next npm install next-themes 2단계의 파일생성후 코드를 복사붙여넣기 //chatcomponentstheme-provider.tsx "use client" import * as React from "react" import { … 더 읽기

1-Supabase Supabase는 오픈 소스 백엔드 서비스 플랫폼으로, Firebase의 대안으로 자주 사용됩니다. 주로 프론트엔드 개발자들에게 빠르고 효율적인 백엔드 구축을 가능하게 해줍니다. 1-1-주요 기능 PostgreSQL 데이터베이스 Supabase는 PostgreSQL을 기반으로 하며, 관계형 데이터베이스를 쉽게 설정하고 관리할 수 있습니다. SQL 쿼리를 활용해 복잡한 데이터 작업도 처리 가능. 실시간 기능 데이터베이스에 변화가 생기면 이를 실시간으로 클라이언트에 반영할 수 있습니다. 예: … 더 읽기