[Next.js] Supabase 연동ㅣ데이터 가져오기

 

supabase 연동을 위한 기본적인 준비

 

설치

 

npm install @supabase/supabase-js

 

npm install @supabase/ssr

 

supabase 클라이언트 라이브러리와 Next.js를 위한 패키지를 설치한다.

 

.env.local 설정

 

// .env.local

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

 

.env.local 파일에 SUPABASE_URL, SUPABASE_ANON_KEY 환경변수를 저장한다.

 

이 키들은 vercel 내 프로젝트 - Project Settings - Environment Variables 에서 볼 수 있다.

 

utils/supabase 위치에 client.ts, server.ts 생성

 

client-side Supabase and server-side Supabase를 위한 client.ts와 server.ts를 생성한다.

 

// utils/supabase/client.ts

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  // Create a supabase client on the browser with project's credentials
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

 

➭ 클라이언트 환경(CSR)에서 Supabase 인스턴스를 생성

 

// utils/supabase/server.ts

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()

  // Create a server's supabase client with newly configured cookie,
  // which could be used to maintain user's session
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  )
}

 

➭ 서버 환경(SSR)에서 Supabase 인스턴스를 생성

➭ cookies를 활용한 세션 유지 가능

 

데이터 가져오기

 

// page.tsx

import { createClient } from '@/utils/supabase/server';

export default async function Home() {
  const supabase = await createClient();
  const { data: regions } = await supabase.from('regions').select();

  return (
    <div className="m-10">
      <pre>{JSON.stringify(regions, null, 2)}</pre>
    </div>
  );
}

 

➭ regions 테이블에서 모든 데이터 조회

➭ data에 해당 결과 저장

 

결과 화면

 

 

데이터가 제대로 출력되는 걸 볼 수 있다.

 

 

 

⬇ 이 과정에서 발생한 에러 (빈 배열 출력)

[Next.js + supabase 연동] 데이터 가져오기 에러 - 빈 데이터

 

 

---

참고

Build a User Management App with Next.js | Supabase Docs