supabase
CHAPTER 20 / 34
읽기 약 2분
FUNCTION
Next.js + Supabase 완전 연동
핵심 개념
Next.js 14 App Router와 Supabase를 완전히 통합합니다. SSR, CSR, 미들웨어 인증을 설정합니다.
코드 분석
// npm install @supabase/ssr
// utils/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export function createClient() {
const cookieStore = cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{ cookies: {
get(name) { return cookieStore.get(name)?.value },
set(name, value, opts) { cookieStore.set(name, value, opts) },
remove(name, opts) { cookieStore.set(name, '', opts) }
}}
)
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Supabase 'Next.js + Supabase 완전 연동' RLS 정책에서 보안 구멍·우회 가능한 케이스·과도한 권한을 찾고 안전한 정책 코드를 작성해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Next.js + Supabase 완전 연동'를 Next.js + Supabase로 구현한 실전 풀스택 코드(Auth/RLS/Realtime 포함)를 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Supabase 'Next.js + Supabase 완전 연동' 관련 테이블·RLS 정책 전체를 분석해서 보안 취약점·N+1 쿼리·인덱스 누락을 우선순위 리포트로 만들어줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Supabase 'Next.js + Supabase 완전 연동' vs Firebase의 동일 기능 구현을 2026년 기준 비용·성능·DX로 솔직히 비교해줘.
⭐ 이것만 기억하세요
Next.js + Supabase 완전 연동은 이 3가지만 확실히 잡으세요
1.Supabase 클라이언트를 매 컴포넌트에서 새로 생성하면 연결이 중복되고 설정이 일관되지 않습니다
2.클라이언트를 유틸 파일에서 싱글톤으로 생성하고, Server/Client 컴포넌트용을 분리해서 export합니다
3.다음 챕터에서 Server Component에서 Supabase를 사용합니다
공유하기
진행도 20 / 34