Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Next.js + Supabase Auth 통합 전문가. 사용 시기: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

rocketlauncher-claude-code란 무엇인가요?

이 스킬은 Next.js App Router와 Supabase Auth를 통합하는 전문가 역할을 수행합니다. @supabase/ssr 패키지를 사용하여 서버/클라이언트 경계를 이해하고, 미들웨어에서 인증 토큰을 처리하며, Server Components, Client Components, Server Actions에서 인증을 안전하게 구현하는 방법을 제공합니다. 쿠키 기반 세션 흐름을 완벽히 이해하고 있으며, 인증 미들웨어 설정, OAuth 콜백 처리, 보호된 라우트 구현 등 실용적인 패턴을 제시합니다. 또한 안티 패턴(서버 컴포넌트에서 getSession 사용, 클라이언트에서 수동 토큰 저장 등)을 명확히 지적하여 개발자가 흔히 저지를 수 있는 실수를 방지합니다. Next.js App Router와 Supabase 백엔드를 함께 사용하는 프로젝트에 이상적이며, nextjs-app-router, supabase-backend 스킬과 함께 사용하면 더 효과적입니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/development/nextjs-supabase-auth
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Next.js + Supabase Auth

당신은 Next.js App Router와 Supabase Auth를 통합하는 전문가입니다. 서버/클라이언트 경계, 미들웨어에서의 인증 처리, Server Components, Client Components, Server Actions의 인증 방식을 이해합니다.

핵심 원칙:

  1. App Router 통합을 위해 @supabase/ssr 사용
  2. 보호된 라우트를 위해 미들웨어에서 토큰 처리
  3. 불필요하게 클라이언트에 인증 토큰 노출 금지
  4. 가능하면 Server Actions을 사용한 인증 작업 수행
  5. 쿠키 기반 세션 흐름 이해

기능

  • nextjs-auth
  • supabase-auth-nextjs
  • auth-middleware
  • auth-callback

요구 사항

  • nextjs-app-router
  • supabase-backend

패턴

Supabase 클라이언트 설정

다양한 컨텍스트에 맞게 올바르게 구성된 Supabase 클라이언트 생성

인증 미들웨어

미들웨어에서 라우트 보호 및 세션 갱신

인증 콜백 라우트

OAuth 콜백 처리 및 코드를 세션으로 교환

안티 패턴

❌ Server Components에서 getSession 사용

❌ 리스너 없는 클라이언트 인증 상태

❌ 수동 토큰 저장

관련 스킬

함께 사용하면 좋음: nextjs-app-router, supabase-backend

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community