supabase-nextjs

Integrate Next.js with Supabase Auth, Database, and Storage using Drizzle ORM.

705|56|Updated Dec 26, 2025
One-click install
npx skills add https://github.com/alinaqi/claude-bootstrap --skill supabase-nextjs-alinaqi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: supabase-nextjs
Source: https://github.com/alinaqi/claude-bootstrap/tree/main/skills/supabase-nextjs
Command: npx skills add https://github.com/alinaqi/claude-bootstrap --skill supabase-nextjs-alinaqi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the development of Next.js applications by providing a robust integration with Supabase for backend services and Drizzle ORM for type-safe database interactions.

Core Features & Use Cases

  • Full-stack Integration: Seamlessly connect Next.js with Supabase Auth, Database, and Storage.
  • Type-Safe Database Access: Utilize Drizzle ORM for secure and efficient data querying and manipulation.
  • Server Components & Actions: Leverage modern Next.js patterns for building performant and scalable applications.
  • Use Case: Build a social media application where users can sign up/log in via Supabase Auth, post content to a database managed by Drizzle, and upload profile pictures to Supabase Storage.

Quick Start

Set up a new Next.js project with Supabase authentication and Drizzle ORM integration.

Frequently Asked Questions about supabase-nextjs

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

FAQPage Schema
How do I integrate Supabase authentication into a Next.js application?

To integrate Supabase authentication in Next.js, use server components, server actions, and middleware. This approach ensures secure user sign-ups and logins while leveraging modern Next.js patterns for optimal performance.

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

Yes, you can use Drizzle ORM with Supabase and Next.js to achieve type-safe database queries. Drizzle ORM integrates directly with your Supabase database, enabling secure and efficient data querying and manipulation within your Next.js application.

What's the best way to set up full-stack Next.js and Supabase development?

The best way to set up full-stack Next.js and Supabase development is by combining Supabase for authentication, database, and storage with Drizzle ORM for type-safe database operations. This configuration supports realtime subscriptions and modern server components.

Does Supabase SSR work with Next.js server components and middleware?

Yes, Supabase SSR works seamlessly with Next.js server components and middleware. This integration allows you to manage authentication sessions securely across server-side rendering and route protection without relying heavily on client-side JavaScript.

How do I handle file uploads to Supabase Storage in a Next.js app?

You handle file uploads to Supabase Storage in a Next.js app by utilizing the integrated Supabase client. This allows you to securely upload files like user profile pictures directly from your Next.js server components or server actions.

When should I not use Drizzle ORM with Supabase in my Next.js project?

You should not use Drizzle ORM with Supabase if your project requires interacting with the database solely through Supabase auto-generated APIs rather than direct SQL connections, as Drizzle requires a direct Postgres connection string to function.