supabase-nextjs

Build Next.js App Router apps with Supabase auth and Drizzle ORM.

Updated Jun 19, 2026
One-click install
npx skills add https://github.com/lciacci/tessera --skill supabase-nextjs-lciacci
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: supabase-nextjs
Source: https://github.com/lciacci/tessera/tree/main/skills/supabase-nextjs
Command: npx skills add https://github.com/lciacci/tessera --skill supabase-nextjs-lciacci

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers build full-stack Next.js applications without having to separately design authentication, database access, storage, realtime updates, and server-side data workflows.

Core Features & Use Cases

  • Supabase Authentication: Implement browser and server clients, session-refresh middleware, protected routes, OAuth providers, sign-in, and sign-out flows.
  • Drizzle Database Integration: Define PostgreSQL schemas, configure migrations, build type-safe queries, and use server actions for authenticated mutations.
  • Storage and Realtime: Add file uploads, public asset URLs, and client-side subscriptions for live database changes.
  • Use Case: Build a dashboard where authenticated users can create and manage posts, upload avatars, and see updates reflected in realtime while keeping database access on the server.

Quick Start

Use the supabase-nextjs skill to scaffold authentication, Drizzle schema and queries, protected routes, storage uploads, and realtime updates for my Next.js App Router application.

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 Supabase authentication in Next.js App Router?

Implement Supabase authentication in Next.js App Router by configuring browser and server clients, adding session-refresh middleware for protected routes, and building OAuth, sign-in, and sign-out flows.

What is the best way to use Drizzle ORM with Supabase and Next.js server actions?

The best way to use Drizzle ORM with Supabase and Next.js is to define PostgreSQL schemas, configure migrations, and build type-safe queries executed through authenticated server actions that revalidate cache after mutations.

Can I add realtime subscriptions and file storage to a Next.js Supabase app?

Yes, you can add realtime subscriptions and file storage to a Next.js Supabase app by implementing client-side subscriptions for live database changes and configuring file uploads with public asset URLs.

Do I need server and browser Supabase clients for protected routes in Next.js?

Yes, you need both server and browser Supabase clients to manage protected routes in Next.js. The server client handles secure database access while the browser client manages user-facing authentication flows.

How do I revalidate cache after database mutations in Next.js server actions?

Revalidate cache after database mutations in Next.js server actions by executing your Drizzle ORM PostgreSQL queries on the server and triggering cache revalidation immediately following the successful mutation.