supabase-nextjs

Configure Next.js App Router projects with Supabase authentication and Drizzle ORM.

1|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/aberrantCode/llm_skills --skill supabase-nextjs-aberrantcode
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: supabase-nextjs
Source: https://github.com/aberrantCode/llm_skills/tree/main/claude/skills/supabase-nextjs
Command: npx skills add https://github.com/aberrantCode/llm_skills --skill supabase-nextjs-aberrantcode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Setting up a Next.js App Router project with Supabase authentication, storage, realtime features, and a type‑safe PostgreSQL layer using Drizzle ORM involves many moving parts and repetitive configuration.

Core Features & Use Cases

  • Unified Auth: Browser and server Supabase clients for secure session handling via middleware.
  • Type‑Safe DB: Drizzle ORM schema, migrations, and queries for PostgreSQL.
  • Server‑Side Logic: Server actions for creating, updating, and deleting posts with automatic cache revalidation.
  • Realtime: Client‑side subscriptions to keep the UI in sync with database changes.
  • Example Project: Ready‑to‑copy directory structure for a full‑stack blog or dashboard application.

Quick Start

Create a new Next.js project, install the Supabase and Drizzle packages, copy the provided src files, and run the development server to have authentication and database functionality out of the box.

Frequently Asked Questions about supabase-nextjs

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

FAQPage Schema
How do I set up Next.js App Router with Supabase authentication and Drizzle ORM?

To set up Next.js App Router with Supabase authentication and Drizzle ORM, you configure browser and server Supabase clients, implement middleware for secure session handling, and define Drizzle schema and migrations for type-safe PostgreSQL queries.

What is the best way to handle server-side Supabase auth sessions in Next.js?

The best way to handle server-side Supabase auth sessions in Next.js is by using middleware to intercept requests and refresh tokens, combined with dedicated server clients to securely manage user sessions across server actions and App Router layouts.

Can I use Drizzle ORM for type-safe database queries with Supabase PostgreSQL?

Yes, you can use Drizzle ORM for type-safe database queries with Supabase PostgreSQL by defining your schema and running migrations, allowing you to execute fully typed mutations and queries directly within Next.js server actions.

How do I implement realtime subscriptions for PostgreSQL data changes in a Next.js client?

To implement realtime subscriptions for PostgreSQL data changes in a Next.js client, you establish client-side Supabase subscriptions that listen to database events, automatically keeping your application UI in sync with backend data modifications.

Does this Next.js and Supabase setup support server actions for data mutations and cache revalidation?

Yes, this Next.js and Supabase setup supports server actions for data mutations, enabling you to create, update, and delete records via Drizzle ORM while automatically revalidating the Next.js cache to reflect changes immediately.