supabase-nextjs
by alinaqisupabase-nextjs helps build Next.js App Router apps with Supabase auth, storage, and realtime, while using Drizzle ORM for typed database queries. It fits backend development workflows that need protected routes, server-side session handling, and a clear server/client split.
This skill scores 78/100, which means it is a solid listing candidate for directory users. It gives enough concrete Next.js + Supabase + Drizzle workflow guidance to reduce guesswork, though it is better at architecture patterns than at step-by-step execution details.
- Clear use case and trigger: building a Next.js app with Supabase backend, with paths scoped to src/app, src/db, and supabase
- Substantive workflow content with a large, non-placeholder SKILL.md, including project structure, auth/server/client patterns, and code examples
- Evidence-backed guidance grounded in official Supabase and Drizzle sources, which improves trust for install decisions
- No install command or companion scripts/resources, so agents may still need manual setup judgment
- The repo appears focused on patterns and structure rather than a fully operational, end-to-end task workflow
Overview of supabase-nextjs skill
What this skill does
The supabase-nextjs skill helps you build a Next.js App Router app with Supabase for auth, storage, and realtime, while using Drizzle ORM for database queries. It is best for teams that want a clear split between server-rendered app logic and backend services, not a generic “connect everything” prompt.
Who it fits best
Use the supabase-nextjs skill if you are starting or extending a Next.js app that needs login, signup, protected routes, server-side session handling, and typed database access. It is especially useful for supabase-nextjs for Backend Development workflows where you want one pattern for auth and another for SQL queries.
Main decision point
The key differentiator in the supabase-nextjs skill is the architecture choice: Drizzle for data access, Supabase for auth and storage, and server components by default. That reduces ambiguity when you are deciding where code should live, how sessions should flow, and when to use client components.
How to Use supabase-nextjs skill
Install and activate it
Use the supabase-nextjs install step through your skill manager, then point the agent at the repo context that matches this stack. If your environment supports it, install with npx skills add alinaqi/claude-bootstrap --skill supabase-nextjs and confirm the skill is attached before asking for code changes.
Give the skill the right starting brief
The best supabase-nextjs usage begins with a concrete app goal, not “set up Supabase.” Say what you are building, what must be authenticated, and what data should be read or written. Strong input looks like: “Add email/password auth, protect /dashboard, create a projects table, and fetch the user’s rows on the server.”
Read the right files first
Start with SKILL.md, then inspect src/app/**, src/db/**, and supabase/** if they exist in your project. In this skill, the most useful implementation cues are the server/client split, auth route handling, Drizzle schema shape, and any middleware or helper files that control session state.
Translate a rough request into a usable prompt
A vague request like “make auth work” is too broad. A better prompt names the route, the auth method, the data model, and the rendering boundary: “Implement Supabase OAuth callback handling in src/app/(auth)/callback/route.ts, keep the dashboard server-rendered, and use Drizzle to load the current user’s profile after login.” That level of detail lets the supabase-nextjs guide produce code that fits the repo instead of adding unrelated scaffolding.
supabase-nextjs skill FAQ
Is this only for new projects?
No. The supabase-nextjs skill works for greenfield setup and for adding Supabase auth or Drizzle-backed queries to an existing Next.js app. It is most valuable when the repo already uses App Router or is being migrated toward it.
Why use this instead of a generic prompt?
A generic prompt often blurs responsibilities between client components, server components, Supabase client usage, and database querying. The supabase-nextjs skill encodes a clearer pattern, which usually means fewer broken auth flows, less session confusion, and cleaner data access decisions.
Do I need prior Supabase experience?
Not necessarily. Beginners can use the supabase-nextjs skill if they can describe the desired flow and accept the repo’s conventions. The main risk is not Supabase itself, but under-specifying where data lives and which routes must be protected.
When should I not use it?
Skip this skill if your app does not use Next.js, if you are not using Supabase services, or if you want a frontend-only scaffold with no server-side auth or database logic. It is also a poor fit if you want Prisma-only patterns or a fully client-side Supabase integration.
How to Improve supabase-nextjs skill
Specify the exact auth and data flow
The strongest outputs come from inputs that define who signs in, what they can see, and where the data is fetched. For example: “Anonymous users can browse marketing pages, authenticated users see /dashboard, and all project reads must happen on the server with Drizzle.” This helps the supabase-nextjs skill avoid mixing public and protected logic.
State your stack boundaries up front
Tell the agent whether you already have Supabase tables, Drizzle migrations, middleware, environment variables, or auth routes in place. If any of those are missing, say so explicitly; otherwise the skill may assume a partially configured app and produce code that won’t run cleanly.
Watch for the common failure modes
The usual mistakes are using Supabase where Drizzle should query, moving server-only code into client components, or leaving callback and middleware behavior undefined. If the first result feels generic, ask for a narrower pass: route handling only, schema only, or auth wiring only.
Iterate with concrete repo constraints
After the first output, improve results by adding constraints like file paths, naming conventions, or whether you want RSC, route handlers, or client components. The supabase-nextjs skill responds best when you ask for one complete vertical slice at a time, then extend it with the next route, table, or session rule.