서버 컴포넌트에서 Supabase

핵심 개념

Next.js Server Components에서 Supabase로 데이터를 페칭합니다. 세션 확인과 보호된 페이지를 구현합니다.

코드 분석

SUPABASE📋 코드 (18줄)

// app/dashboard/page.tsx (Server Component)
import { createClient } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

export default async function DashboardPage() {
  const supabase = createClient()

  // 인증 확인
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/login')

  // 데이터 페칭
  const { data: posts } = await supabase
    .from('posts').select('*')
    .eq('user_id', user.id)

  return <PostList posts={posts} />
}

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Supabase '서버 컴포넌트에서 Supabase' RLS 정책에서
보안 구멍·우회 가능한 케이스·과도한 권한을 찾고
안전한 정책 코드를 작성해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'서버 컴포넌트에서 Supabase'를 Next.js + Supabase로 구현한
실전 풀스택 코드(Auth/RLS/Realtime 포함)를 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Supabase '서버 컴포넌트에서 Supabase' 관련 테이블·RLS 정책 전체를 분석해서
보안 취약점·N+1 쿼리·인덱스 누락을
우선순위 리포트로 만들어줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Supabase '서버 컴포넌트에서 Supabase' vs Firebase의
동일 기능 구현을 2026년 기준
비용·성능·DX로 솔직히 비교해줘.

⭐ 이것만 기억하세요

서버 컴포넌트에서 Supabase는 이 3가지만 확실히 잡으세요

1.Server Component에서 클라이언트용 Supabase를 쓰면 쿠키 기반 인증이 작동하지 않습니다

2.createServerClient(URL, KEY, {cookies})로 서버 전용 클라이언트를 생성하면 쿠키에서 세션을 자동으로 읽습니다

3.다음 챕터에서 Client Component에서 Supabase를 사용합니다

💬 이 챕터 질문 보기

SUPABASE · CH.21 — 질문하거나 답변을 확인하세요

→

진행도 21 / 34

← 커리큘럼으로 ← 목록으로 (Supabase)