Does this skill support the Next.js App Router?

Yes, it includes specific patterns for the App Router, including Server Components, Middleware, and Client Components using the @supabase/ssr package.

Does it support social login providers?

Yes, the skill provides ready-to-use code snippets for implementing OAuth providers like Google and GitHub, including the necessary callback handlers.

How does it handle user sessions?

It provides a middleware implementation that automatically refreshes and manages user sessions via cookies to ensure the user stays logged in across server and client boundaries.

Can I use this for TypeScript projects?

Absolutely, it includes instructions for generating types from your Supabase schema and using them to create a fully typed Supabase client.

Supabase Next.js Integration

Name: Supabase Next.js Integration
Author: AmplifyAutomation

byAmplifyAutomation

データベース管理

Streamlines the integration of Supabase backend services into React and Next.js applications using modern App Router patterns and SSR.

概要

This skill provides comprehensive implementation patterns for connecting Supabase to modern web applications. It automates the setup of server and client clients, configures session-handling middleware for Next.js, and offers production-ready code snippets for authentication flows, database operations with TypeScript safety, and real-time data synchronization. By following these established patterns, developers can ensure their application's backend integration is secure, performant, and follows the latest architectural best practices for server-side rendering.

主な機能

Full-stack Authentication with Email, OAuth, and Middleware
Robust session management and cookie handling
Next.js App Router and SSR-compatible client configuration
Real-time database subscription hooks for live updates
0 GitHub stars
Type-safe Database CRUD operations using generated schemas

ユースケース

Building a SaaS application with secure user authentication and protected dashboard routes
Developing real-time collaborative tools or live data dashboards
Implementing server-side rendered data fetching in modern Next.js environments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add amplifyautomation/amplify-plugin-marketplace supabase-integration

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要