[supabase 번역] Supabase와 Next.js 함께 사용하기 (Use Supabase with Next.js)

출처: https://supabase.com/docs/guides/getting-started/quickstarts/nextjs

Supabase와 Next.js를 함께 사용하는 방법을 알아봅니다. Supabase 프로젝트를 생성하고, 샘플 데이터를 추가한 뒤, Next.js 앱에서 쿼리하는 방법을 안내합니다.

1. Supabase 프로젝트 생성하기

database.new에 접속하여 새로운 Supabase 프로젝트를 생성하세요.

프로젝트가 준비되면 Table Editor로 이동하여 새 테이블을 만들고 데이터를 삽입합니다.

또는, 아래 SQL 스니펫을 프로젝트의 SQL Editor에서 실행할 수 있습니다. 이 코드는 instruments 테이블을 생성하고 샘플 데이터를 추가합니다.

-- 테이블 생성
create table instruments (
  id bigint primary key generated always as identity,
  name text not null
);

-- 샘플 데이터 삽입
insert into instruments (name)
values  ('violin'),
        ('viola'),
        ('cello');

alter table instruments enable row level security;

테이블 데이터를 공개적으로 읽을 수 있도록 RLS 정책 추가

create policy "public can read instruments"
on public.instruments
for select to anon
using (true);

2. Next.js 앱 생성하기

create-next-app 명령어와 with-supabase 템플릿을 사용하여, Supabase가 사전 구성된 Next.js 앱을 생성하세요.

쿠키 기반 인증
TypeScript
Tailwind CSS

npx create-next-app -e with-supabase

3. Supabase 환경 변수 선언하기

.env.example 파일명을 .env.local로 변경한 뒤, Supabase 연결 변수를 입력하세요.

.env.local 예시:

NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

4. Next.js에서 Supabase 데이터 쿼리하기

app/instruments/page.tsx 파일을 새로 만들고 아래와 같이 작성하세요.

이 코드는 Supabase의 instruments 테이블에서 모든 행을 선택하여 페이지에 렌더링합니다.

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

export default async function Instruments() {
  const supabase = await createClient();
  const { data: instruments } = await supabase.from("instruments").select();
  return <pre>{JSON.stringify(instruments, null, 2)}</pre>;
}