supabase-nextjs

supabase-nextjs スキルの概要

このスキルでできること

supabase-nextjs スキルは、Next.js App Router アプリを Supabase で構築する際に、認証・ストレージ・リアルタイム機能を扱いながら、データベースクエリには Drizzle ORM を使うためのスキルです。単なる「何でも接続する」ためのプロンプトではなく、サーバー側でレンダリングするアプリロジックとバックエンドサービスを明確に分けたいチームに向いています。

どんな人に向いているか

ログイン、サインアップ、保護されたルート、サーバーサイドのセッション処理、型付きのデータベースアクセスが必要な Next.js アプリを新規作成する場合や拡張する場合に、supabase-nextjs スキルを使ってください。特に、認証は1つのパターン、SQL クエリは別のパターンで扱いたい supabase-nextjs for Backend Development のようなワークフローで役立ちます。

主要な判断ポイント

supabase-nextjs スキルの最大の特徴は、アーキテクチャの選び方にあります。データアクセスは Drizzle、認証とストレージは Supabase、そしてデフォルトはサーバーコンポーネントという構成です。これにより、コードをどこに置くべきか、セッションをどう流すか、いつクライアントコンポーネントを使うかを判断しやすくなります。

supabase-nextjs スキルの使い方

インストールして有効化する

スキルマネージャーから supabase-nextjs install の手順を実行し、このスタックに合うリポジトリ文脈をエージェントに渡してください。環境が対応しているなら、npx skills add alinaqi/claude-bootstrap --skill supabase-nextjs でインストールし、コード変更を依頼する前にスキルが正しく付与されていることを確認します。

最初に渡すブリーフを適切にする

supabase-nextjs usage で最もよい結果が出るのは、「Supabase を設定して」ではなく、具体的なアプリ目標を最初に伝えたときです。何を作るのか、何を認証対象にするのか、どのデータを読み書きするのかを明確にしてください。たとえば、「メール/パスワード認証を追加し、/dashboard を保護し、projects テーブルを作成し、ユーザーの行をサーバー側で取得する」といった指示が有効です。

先に読むべきファイルを見極める

まず SKILL.md を読み、その後にプロジェクト内にあれば src/app/**、src/db/**、supabase/** を確認してください。このスキルでは、実装の手がかりとして特に重要なのは、サーバー/クライアントの分離、認証ルートの処理、Drizzle のスキーマ構成、そしてセッション状態を制御する middleware や helper ファイルです。

曖昧な依頼を実用的なプロンプトに変える

「認証を動くようにして」という曖昧な依頼では広すぎます。よりよいプロンプトでは、ルート、認証方式、データモデル、レンダリング境界まで指定します。たとえば、「src/app/(auth)/callback/route.ts で Supabase OAuth のコールバック処理を実装し、ダッシュボードはサーバーレンダリングのままにして、ログイン後に Drizzle で現在ユーザーのプロフィールを読み込む」と伝えるとよいでしょう。ここまで具体的にすると、supabase-nextjs guide は余計な土台を足さず、リポジトリに合ったコードを生成しやすくなります。

supabase-nextjs スキル FAQ

これは新規プロジェクト専用ですか？

いいえ。supabase-nextjs スキルは、ゼロからのセットアップだけでなく、既存の Next.js アプリに Supabase 認証や Drizzle ベースのクエリを追加する用途にも使えます。すでに App Router を採用している、またはそこへ移行中のリポジトリで特に価値があります。

これを使う理由は、一般的なプロンプトより何が違うのですか？

一般的なプロンプトでは、クライアントコンポーネント、サーバーコンポーネント、Supabase クライアントの使い方、データベースクエリの責務が曖昧になりがちです。supabase-nextjs スキルはより明確なパターンを前提にしているため、認証フローの破綻が減り、セッションまわりの混乱も少なく、データアクセスの判断も整理されやすくなります。

Supabase の事前知識は必要ですか？

必須ではありません。supabase-nextjs skill は、実現したい流れを説明できて、リポジトリ側の規約を受け入れられるなら、初心者でも使えます。主なリスクは Supabase 自体よりも、データの所在と保護すべきルートを十分に指定しないことです。

使わないほうがよいのはどんなときですか？

アプリが Next.js を使っていない場合、Supabase サービスを使わない場合、あるいはサーバーサイドの認証やデータベースロジックを持たないフロントエンド専用の雛形が欲しい場合は、このスキルは避けてください。Prisma だけの構成を望む場合や、完全にクライアントサイドで Supabase を統合したい場合にも向いていません。

supabase-nextjs スキルを改善する方法

認証とデータの流れを正確に指定する

最も質の高い出力は、誰がサインインし、何が見えて、どこでデータを取得するのかを定義した入力から生まれます。たとえば、「匿名ユーザーはマーケティングページを閲覧でき、認証済みユーザーは /dashboard を見ることができる。すべての project の読み取りは Drizzle を使ってサーバー側で行う」と伝えてください。こうすると、supabase-nextjs スキルが公開ロジックと保護ロジックを混ぜずに済みます。

スタックの境界条件を最初に伝える

すでに Supabase のテーブル、Drizzle の migration、middleware、環境変数、認証ルートがあるのかどうかを、先にエージェントへ伝えてください。どれかが未実装なら、そのことも明示します。そうしないと、スキルが「ある程度セットアップ済みのアプリ」と仮定してしまい、そのままでは動かないコードを返すことがあります。

よくある失敗パターンに注意する

ありがちなミスは、Drizzle で問い合わせるべきところを Supabase で処理してしまうこと、サーバー専用コードをクライアントコンポーネントへ移してしまうこと、callback や middleware の挙動を未定義のままにすることです。最初の結果が一般的すぎると感じたら、ルート処理だけ、スキーマだけ、認証接続だけ、のように範囲を絞って再依頼してください。

リポジトリの具体的な制約を加えて反復する

最初の出力のあとに、ファイルパス、命名規則、RSC を使うか、route handlers を使うか、client components を使うかといった制約を追加すると、結果がさらに良くなります。supabase-nextjs skill は、1回で1つの縦断的な実装範囲を完成させる依頼に最もよく反応し、その後に次のルート、テーブル、セッションルールを足していく使い方が効果的です。