supabase-nextjs

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

Updated Sep 6, 2024
One-click install
npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill supabase-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: supabase-nextjs
Source: https://github.com/Jaylaelike/pm25-interactive-thaipbs-app/tree/main/.claude/skills/supabase-nextjs
Command: npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill supabase-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines building Next.js apps by combining the App Router with robust user authentication via Supabase and a strong, type-safe database layer through Drizzle ORM.

Core Features & Use Cases

  • Auth integration: Implement login, signup, and session management with Supabase.
  • Database access: Use Drizzle ORM for type-safe PostgreSQL queries.
  • Server-first architecture: Prefer server components and minimize client-side data fetching.
  • Use Case: Create a dashboard with protected routes and CRUD for user-generated data.

Quick Start

Set up a new Next.js app, install the required dependencies, configure environment variables for Supabase, and start the dev server. Then open http://localhost:3000 to explore the app.

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 with Drizzle ORM in a Next.js App Router project?

Integrate Supabase authentication with Drizzle ORM in Next.js by configuring Supabase client libraries for login and signup, using Drizzle for type-safe PostgreSQL queries, and relying on server components and server actions for data mutations and session management.

What is the best way to build protected routes with server-side data access in Next.js?

The best way to build protected routes with server-side data access in Next.js is using a server-first architecture that leverages Supabase for session management and Drizzle ORM for type-safe PostgreSQL queries within App Router server components.

Does Drizzle ORM work with Supabase authentication for server-side PostgreSQL queries?

Yes, Drizzle ORM works with Supabase authentication by executing type-safe PostgreSQL queries within Next.js server components, ensuring secure server-side data access while Supabase handles user sessions and authentication state.

How to implement login and signup using Supabase in a Next.js server component?

Implement login and signup using Supabase in a Next.js server component by installing Supabase client libraries, configuring environment variables, and utilizing server actions for mutations to handle user authentication and session management securely.

Can I minimize client-side data fetching when building a CRUD dashboard with Next.js and Supabase?

Yes, you can minimize client-side data fetching when building a CRUD dashboard by adopting a server-first architecture in Next.js App Router, preferring server components by default, and using server actions for user-generated data mutations.

Do I need PostgreSQL to use Drizzle ORM with Supabase authentication in Next.js?

Yes, you need a PostgreSQL-compatible database to use Drizzle ORM with Supabase authentication in Next.js, as Drizzle provides type-safe database queries specifically mapped to your PostgreSQL schema for secure server-side data access.