supabase-nextjs

supabase-nextjs 스킬 개요

이 스킬이 하는 일

supabase-nextjs 스킬은 Next.js App Router 앱을 Supabase로 인증, 스토리지, realtime까지 연결하면서, 데이터 조회에는 Drizzle ORM을 사용하도록 돕습니다. 모든 것을 한 번에 연결하라는 식의 범용 프롬프트보다, 서버 렌더링 앱 로직과 백엔드 서비스를 분리해서 다루고 싶은 팀에 더 잘 맞습니다.

가장 잘 맞는 사용자

로그인, 회원가입, 보호된 라우트, 서버 측 세션 처리, 타입 안전한 DB 접근이 필요한 Next.js 앱을 새로 만들거나 확장 중이라면 supabase-nextjs 스킬을 쓰는 것이 좋습니다. 특히 supabase-nextjs for Backend Development 워크플로처럼 인증은 한 방식으로, SQL 쿼리는 다른 방식으로 일관되게 나누고 싶을 때 유용합니다.

핵심 판단 기준

supabase-nextjs 스킬의 가장 큰 차별점은 아키텍처 선택입니다. 데이터 접근은 Drizzle, 인증과 스토리지는 Supabase, 기본 렌더링은 server components로 두는 구조입니다. 덕분에 코드가 어디에 있어야 하는지, 세션이 어떤 흐름으로 전달돼야 하는지, 언제 client components를 써야 하는지 결정할 때 모호함이 줄어듭니다.

supabase-nextjs 스킬 사용 방법

설치하고 활성화하기

skill manager에서 supabase-nextjs install 단계를 실행한 뒤, 이 스택에 맞는 repo context를 에이전트에 지정하세요. 환경이 지원한다면 npx skills add alinaqi/claude-bootstrap --skill supabase-nextjs로 설치하고, 코드 변경을 요청하기 전에 스킬이 정상적으로 연결됐는지 확인하는 것이 좋습니다.

스킬에 맞는 시작 브리프를 주기

좋은 supabase-nextjs usage는 “Supabase 설정해줘” 같은 추상적인 요청이 아니라, 구체적인 앱 목표에서 시작합니다. 무엇을 만들고 있는지, 무엇을 인증해야 하는지, 어떤 데이터를 읽거나 써야 하는지 분명히 말하세요. 예를 들면: “email/password auth를 추가하고, /dashboard를 보호하며, projects 테이블을 만들고, 로그인한 사용자의 row를 서버에서 가져와줘.”

먼저 읽어야 할 파일

SKILL.md부터 시작한 다음, 프로젝트에 있다면 src/app/**, src/db/**, supabase/**를 확인하세요. 이 스킬에서 가장 중요한 구현 단서는 server/client 분리, auth route 처리, Drizzle 스키마 형태, 그리고 세션 상태를 제어하는 middleware나 helper 파일입니다.

거친 요청을 바로 쓸 수 있는 프롬프트로 바꾸기

“auth가 되게 해줘”처럼 뭉뚱그린 요청은 범위가 너무 넓습니다. 더 나은 프롬프트는 라우트, 인증 방식, 데이터 모델, 렌더링 경계를 함께 명시합니다. 예를 들어: “src/app/(auth)/callback/route.ts에서 Supabase OAuth callback 처리를 구현하고, dashboard는 server-rendered로 유지한 뒤, 로그인 후 현재 사용자 profile은 Drizzle로 불러와줘.” 이렇게 구체적으로 적어야 supabase-nextjs guide가 repo에 맞는 코드를 만들고, 쓸데없는 scaffolding을 덧붙이지 않습니다.

supabase-nextjs 스킬 FAQ

새 프로젝트에서만 쓸 수 있나요?

아닙니다. supabase-nextjs 스킬은 greenfield 설정에도, 기존 Next.js 앱에 Supabase auth나 Drizzle 기반 쿼리를 추가할 때도 사용할 수 있습니다. 특히 repo가 이미 App Router를 쓰고 있거나, 그 방향으로 마이그레이션 중일 때 가장 가치가 큽니다.

왜 일반 프롬프트보다 이 스킬을 써야 하나요?

일반 프롬프트는 client components, server components, Supabase client 사용, DB 쿼리의 책임 경계를 흐리기 쉽습니다. supabase-nextjs 스킬은 더 명확한 패턴을 담고 있어서, auth 흐름이 깨질 가능성이 줄고, 세션 혼선이 적어지며, 데이터 접근 판단도 더 깔끔해지는 편입니다.

Supabase 경험이 꼭 필요한가요?

반드시 그렇지는 않습니다. 원하는 흐름을 설명할 수 있고, repo의 규칙을 따를 수 있다면 초보자도 supabase-nextjs skill을 사용할 수 있습니다. 핵심 위험은 Supabase 자체보다, 데이터가 어디에 있는지와 어떤 라우트를 보호해야 하는지를 너무 대충 지정하는 데 있습니다.

언제는 쓰지 않는 게 좋나요?

앱이 Next.js를 쓰지 않거나, Supabase 서비스를 사용하지 않거나, server-side auth나 DB 로직이 전혀 없는 frontend-only scaffold를 원한다면 이 스킬은 건너뛰는 것이 좋습니다. Prisma만 쓰고 싶거나, 완전히 client-side 중심의 Supabase 통합을 원할 때도 잘 맞지 않습니다.

supabase-nextjs 스킬 개선 방법

정확한 인증 및 데이터 흐름을 지정하기

가장 좋은 결과는 누가 로그인하는지, 무엇을 볼 수 있는지, 데이터는 어디서 가져오는지를 명확히 적은 입력에서 나옵니다. 예를 들면: “비로그인 사용자는 마케팅 페이지를 볼 수 있고, 로그인한 사용자는 /dashboard를 보며, 모든 project 읽기는 Drizzle로 서버에서 처리해야 한다.” 이렇게 해야 supabase-nextjs 스킬이 공개 로직과 보호된 로직을 섞지 않습니다.

스택 경계를 처음부터 분명히 말하기

이미 Supabase tables, Drizzle migrations, middleware, environment variables, auth routes가 있는지 에이전트에게 알려주세요. 하나라도 없으면 그것도 명시해야 합니다. 그렇지 않으면 스킬이 앱이 일부만 설정돼 있다고 가정하고, 실제로는 바로 실행되지 않는 코드를 만들 수 있습니다.

흔한 실패 패턴을 경계하기

자주 생기는 실수는 Drizzle가 해야 할 쿼리를 Supabase로 처리하거나, server-only 코드를 client components로 옮기거나, callback과 middleware 동작을 정의하지 않는 것입니다. 첫 결과가 너무 일반적으로 느껴진다면 더 좁게 요청하세요. route handling만, schema만, auth wiring만 따로 달라고 하면 됩니다.

구체적인 repo 제약으로 반복 개선하기

첫 출력 이후에는 file path, naming convention, RSC 사용 여부, route handlers나 client components를 원하는지 같은 제약을 추가해 결과를 더 좋게 만들 수 있습니다. supabase-nextjs skill은 한 번에 하나의 완결된 vertical slice를 요청할 때 가장 잘 반응하며, 그다음에 다음 route, table, session rule을 이어 붙이는 방식이 효과적입니다.