supabase-nextjs

Integrate Next.js with Supabase and Drizzle ORM for full-stack development.

1|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/MarcoAvendano/ecommerce --skill supabase-nextjs-marcoavendano
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: supabase-nextjs
Source: https://github.com/MarcoAvendano/ecommerce/tree/main/.agents/skills/supabase-nextjs
Command: npx skills add https://github.com/MarcoAvendano/ecommerce --skill supabase-nextjs-marcoavendano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @supabase/supabase-js, @supabase/ssr, drizzle-orm, postgres, drizzle-kit, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the development of full-stack web applications by integrating Next.js with Supabase for authentication, database, and storage, alongside Drizzle ORM for type-safe database interactions.

Core Features & Use Cases

  • Authentication: Handles user sign-up, login, and session management using Supabase Auth.
  • Database Operations: Provides type-safe database queries and mutations with Drizzle ORM.
  • File Storage: Integrates Supabase Storage for managing user uploads like avatars.
  • Realtime Features: Enables live updates for data changes using Supabase Realtime subscriptions.
  • Use Case: Build a social blogging platform where users can sign up, create posts, upload profile pictures, and see new posts appear in real-time.

Quick Start

Use the supabase-nextjs skill to set up a new Next.js project with Supabase authentication and Drizzle ORM.

Frequently Asked Questions about supabase-nextjs

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

FAQPage Schema
How do I add Supabase authentication to a Next.js application?

Supabase authentication in Next.js handles user sign-up, login, and session management. This integration uses Supabase Auth to securely manage user identities alongside database and storage features within a full-stack web application.

Can I use Drizzle ORM with Supabase and Next.js for type-safe database queries?

Yes, Drizzle ORM integrates with Supabase and Next.js to provide type-safe database operations. This setup allows developers to execute queries and mutations with end-to-end type safety, ensuring data integrity across the full-stack application.

What is the best way to implement realtime data synchronization in Next.js using Supabase?

Realtime data synchronization in Next.js is implemented using Supabase Realtime subscriptions. This feature enables live updates for data changes, allowing applications like social blogging platforms to display new content instantly without polling.

Does Supabase storage support file uploads like user avatars in a Next.js project?

Supabase Storage supports file uploads including user avatars in Next.js projects. This integration manages user uploads directly within the application, handling file persistence and retrieval alongside authentication and database operations.

How do I set up a full-stack Next.js project with Supabase authentication and Drizzle ORM?

Setting up a full-stack Next.js project with Supabase and Drizzle ORM involves configuring authentication, database, and storage integrations. This setup streamlines development by combining user management, type-safe queries, and file storage into a unified workflow.