skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

supabase_patterns

Implements Next.js 15 App Router features with Supabase SSR clients and security patterns.

Updated Jan 14, 2026
Search Tags:#authentication#full-stack#rls#supabase#next.js#server actions#server components
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill supabase-patterns-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: supabase_patterns
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/supabase_patterns
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill supabase-patterns-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building Next.js 15 applications with Supabase often struggle to choose between Server and Client Components, pick the correct Supabase client for each environment, and avoid security mistakes like leaking the Service Role Key or passing full user objects to the client. ## Core Features & Use Cases - Component Decision Tree: A step-by-step guide to decide between Server Components and Client Components based on interactivity and data-fetching needs. - Implementation Patterns: Ready-to-use templates for Server Component data fetching, Client Component interactivity, Server Actions for mutations, and Route Handlers. - Security Checklist: Enforces correct Supabase client selection, getUser() over getSession(), minimal data passing, and RLS policy verification. - Use Case: When building a recipe dashboard page, use this Skill to fetch data in a Server Component with @/lib/supabase/server, pass only required fields to an interactive Client Component, and handle form submissions through a secure Server Action with revalidatePath. ## Quick Start Ask the agent to implement a Next.js page that fetches data from Supabase and includes an interactive save button following the supabase_patterns guidelines.

Frequently Asked Questions about supabase_patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between Server and Client Components in Next.js with Supabase?▼

Choose a Client Component when you need onClick handlers, useState, useEffect, or browser APIs. Choose a Server Component when fetching data from Supabase or rendering static content, since it can query the database directly with the server client.

Which Supabase client should I use in Next.js App Router?▼

Use @/lib/supabase/server for Server Components, Server Actions, and Route Handlers, and @/lib/supabase/client for Client Components. Middleware uses @/lib/supabase/middleware. The server client is async and must be awaited.

Should I use getSession or getUser for Supabase auth validation?▼

Always use getUser() for auth validation because it verifies the token with the Supabase server. getSession() reads from local storage without server verification, making it unsafe for protecting Server Actions or data mutations.

How do I handle form submissions with Supabase in Next.js 15?▼

Use a Server Action marked with 'use server' that validates the user with getUser(), performs the mutation with the server client, and calls revalidatePath to refresh cached data. Return error objects instead of throwing for client handling.

Why is passing the full user object to Client Components a security risk?▼

Passing the full user object exposes sensitive fields like tokens and metadata to the browser. Instead, pass only the specific fields the component needs, such as userId, email, or name, as individual props from the Server Component.

Related Skills

Explore More Software Engineering Skills→
WannaCry081WannaCry081

nextjs-supabase-auth

Integrate Supabase authentication into Next.js App Router projects.

Community
Advanced
Randi-AgentRandi-Agent
1

supabase-expert

Guide developers through Supabase authentication, Postgres, realtime, edge functions, and storage.

Official
Advanced
edheltzeledheltzel
2

react-flow-code-review

Reviews React Flow code for anti-patterns, performance issues, and best practices.

Community
Intermediate
prismaprisma
47.5k

prisma-next-supabase

Integrate Prisma Next with Supabase for role-bound database access and row-level security.

Official
Advanced