neon-js

Neon JS SDK の統合

認証とデータベースクエリを 1 つのパッケージで利用できる、統合型 Neon JS SDK をセットアップします。

このスキルを使用するタイミング

• 認証とデータベースクエリの両方が必要なアプリを構築するとき
• Supabase から Neon に移行するとき
• データベースへのアクセスに PostgREST スタイルの API を使用するとき
• 生成された型を使用して、型安全なデータベースクエリを実行するとき

パッケージ：@neondatabase/neon-js（認証 + データ API を備えた完全な SDK）

認証のみが必要ですか？ より小さなバンドルの @neondatabase/auth を使用するには、代わりに neon-auth スキルを使用してください。

コード生成ルール

TypeScript／JavaScript コードを生成する際は、次のルールに従ってください。

完全なリファレンス： 以下を参照してください：コード生成ルール

• インポートパスの処理（パスエイリアスと相対インポート）
• Neon パッケージのインポート（サブパスエクスポート、アダプターパターン）
• CSS インポート戦略（Tailwind の検出、単一のインポート方法）
• ファイル構成のパターン

要点：

• インポートを生成する前に、tsconfig.json でパスエイリアスを確認してください
• 不明な場合、またはエイリアスがない場合は、相対インポートを使用してください
• BetterAuthReactAdapter は auth/react/adapters サブパスからインポートする必要があります
• アダプターはファクトリー関数です。() を付けて呼び出してください
• CSS のインポート方法は 1 つだけ選んでください（Tailwind または CSS のいずれか。両方は使用しないでください）

利用可能なガイド

各ガイドは、フェーズを番号順に進める、完結した個別の手順です。

• guides/setup.md - 認証 + データ API を備えた Next.js の完全なセットアップガイド

パッケージマネージャー、フレームワーク、既存のセットアップを自動的に検出し、リクエストに応じた適切なガイドを選択します。

トラブルシューティングについては、references のトラブルシューティングガイドを参照してください。

クイック例

構築するものを伝えてください。あとはお任せください。

• 「Next.js アプリ用に Neon JS をセットアップして」-> フルスタックガイドを読み込み、認証 + データを設定します
• 「認証のセットアップにデータベースクエリを追加して」-> データ API クライアントを設定します
• 「Supabase から移行して」-> 互換性のために SupabaseAuthAdapter を使用します

リファレンスドキュメント

主なリソース： 包括的なガイドラインについては、neon-js.mdc を参照してください。内容は次のとおりです。

• すべてのフレームワークに対応したクライアントのセットアップ
• データベースクエリのパターン（PostgREST 構文）
• 認証アダプターのオプション（BetterAuth、Supabase）
• 型生成
• エラー処理

認証の詳細： 次の内容については、neon-auth.mdc を参照してください。

• すべての認証方法
• UI コンポーネント
• セッション管理

フレームワーク別のセットアップ（使用するフレームワークを選択してください）：

• セットアップ - Next.js
• セットアップ - React SPA
• セットアップ - Node.js

フレームワーク別の UI（使用するフレームワークを選択してください）：

• UI - Next.js
• UI - React SPA

Data API と共通リファレンス：

• Data API リファレンス - PostgREST のクエリパターンと例
• よくある間違い - インポートパス、アダプターパターン、CSS
• トラブルシューティングガイド - エラーの解決方法
• コード生成ルール - インポートと CSS の方針
• 認証アダプターガイド - アダプターの比較
• インポートリファレンス - インポートパスの一覧

テンプレート

• templates/full-client.ts - 認証とデータを統合したクライアント設定

関連スキル

• neon-auth - 認証のみ（バンドルが小さく、データクエリはありません）
• neon-drizzle - Drizzle ORM のセットアップ（PostgREST の代替）
• neon-serverless - データベースへの直接接続
• add-neon-docs - Neon のベストプラクティスをプロジェクトに追加します（セットアップ後に実行）

---

ワークフロー

次の手順を実行します。

1. プロジェクトのコンテキスト（Next.js、React SPA、Node.js）を自動的に検出します
2. 適切なガイドを選択して読み込みます
3. ガイドの各フェーズを順番に進めます
4. ガイドのワークフローチェックリストで進捗を管理します
5. 必要な場合にのみリファレンスファイルを読み込みます
6. Neon のベストプラクティスをプロジェクトのドキュメントに追加することを提案します

始める準備はできていますか？作成するものを説明してください！