Back to Details

neon-js

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Neon JS SDK Integration

Neon JS SDK 集成

Set up the unified Neon JS SDK for authentication and database queries in one package.
配置集认证与数据库查询于一体的统一Neon JS SDK。

When to Use This Skill

何时使用该Skill

  • Building apps that need both auth and database queries
  • Migrating from Supabase to Neon
  • Using PostgREST-style API for database access
  • Need type-safe database queries with generated types
Package: 
@neondatabase/neon-js
(full SDK with auth + data API)
Need auth only? Use the 
neon-auth
skill instead for 
@neondatabase/auth
with a smaller bundle.
  • 开发同时需要认证和数据库查询功能的应用
  • 从Supabase迁移至Neon
  • 使用PostgREST风格的API进行数据库访问
  • 需要带生成类型的类型安全数据库查询
包名：
@neondatabase/neon-js
（包含认证+数据API的完整SDK）
仅需认证功能？ 请改用
neon-auth
skill，对应
@neondatabase/auth
包，体积更小。

Code Generation Rules

代码生成规则

When generating TypeScript/JavaScript code, follow these rules:
Complete reference: See Code Generation Rules for:
  • Import path handling (path aliases vs relative imports)
  • Neon package imports (subpath exports, adapter patterns)
  • CSS import strategy (Tailwind detection, single import method)
  • File structure patterns
Key points:
  • Check 
    tsconfig.json
    for path aliases before generating imports
  • Use relative imports if unsure or no aliases exist
  • BetterAuthReactAdapter
    MUST be imported from 
    auth/react/adapters
    subpath
  • Adapters are factory functions - call them with 
    ()
  • Choose ONE CSS import method (Tailwind or CSS, not both)
生成TypeScript/JavaScript代码时，请遵循以下规则：
完整参考：查看代码生成规则了解：
  • 导入路径处理（路径别名 vs 相对导入）
  • Neon包导入（子路径导出、适配器模式）
  • CSS导入策略（Tailwind检测、单一导入方式）
  • 文件结构模式
关键点：
  • 生成导入前检查
    tsconfig.json
    中的路径别名
  • 不确定或无别名时使用相对导入
  • BetterAuthReactAdapter
    必须从
    auth/react/adapters
    子路径导入
  • 适配器是工厂函数 - 需调用
    ()
  • 选择一种CSS导入方式（Tailwind或CSS，不可同时使用）

Available Guides

可用指南

Each guide is a complete, self-contained walkthrough with numbered phases:
  • guides/setup.md
     - Complete setup guide for Next.js with auth + data API
I'll automatically detect your context (package manager, framework, existing setup) and select the appropriate guide based on your request.
For troubleshooting, see the Troubleshooting Guide in references.
每个指南都是完整的独立分步教程：
  • guides/setup.md
     - Next.js中认证+数据API的完整配置指南
我会自动检测你的项目环境（包管理器、框架、现有配置），并根据你的请求选择合适的指南。
如需故障排除，请查看参考资料中的故障排除指南。

Quick Examples

快速示例

Tell me what you're building - I'll handle the rest:
  • "Set up Neon JS for my Next.js app" -> Loads full stack guide, configures auth + data
  • "Add database queries to my auth setup" -> Configures data API client
  • "Migrate from Supabase" -> Uses SupabaseAuthAdapter for compatibility
告诉我你正在开发的项目，我会处理其余部分：
  • "为我的Next.js应用配置Neon JS" -> 加载全栈指南，配置认证+数据功能
  • "为我的认证配置添加数据库查询" -> 配置数据API客户端
  • "从Supabase迁移" -> 使用SupabaseAuthAdapter确保兼容性

Reference Documentation

参考文档

Primary Resource: See neon-js.mdc for comprehensive guidelines including:
  • Client setup for all frameworks
  • Database query patterns (PostgREST syntax)
  • Auth adapter options (BetterAuth, Supabase)
  • Type generation
  • Error handling
Auth Details: See neon-auth.mdc for:
  • All authentication methods
  • UI components
  • Session management
Framework-Specific Setup (choose your framework):
Framework-Specific UI (choose your framework):
Data API & Shared References:
主要资源：查看neon-js.mdc获取全面指南，包括：
  • 全框架客户端配置
  • 数据库查询模式（PostgREST语法）
  • 认证适配器选项（BetterAuth、Supabase）
  • 类型生成
  • 错误处理
认证详情：查看neon-auth.mdc了解：
  • 所有认证方法
  • UI组件
  • 会话管理
框架专属配置（选择你的框架）：
框架专属UI（选择你的框架）：
数据API及通用参考：

Templates

模板

  • templates/full-client.ts
    - Unified auth + data client configuration
  • templates/full-client.ts
    - 统一认证+数据客户端配置

Related Skills

相关Skills

  • neon-auth - Auth only (smaller bundle, no data queries)
  • neon-drizzle - Drizzle ORM setup (alternative to PostgREST)
  • neon-serverless - Direct database connections
  • add-neon-docs - Add Neon best practices to your project (run after setup)
  • neon-auth - 仅认证功能（体积更小，无数据查询）
  • neon-drizzle - Drizzle ORM配置（PostgREST的替代方案）
  • neon-serverless - 直接数据库连接
  • add-neon-docs - 为项目添加Neon最佳实践（配置完成后运行）

Workflow

工作流程

I will:
  1. Detect your project context automatically (Next.js, React SPA, Node.js)
  2. Select and load the appropriate guide
  3. Follow the guide's phases sequentially
  4. Track progress using the guide's workflow checklist
  5. Load reference files only when needed
  6. Offer to add Neon best practices to your project docs
Ready to get started? Just describe what you're building!
我会：
  1. 自动检测你的项目环境（Next.js、React SPA、Node.js）
  2. 选择并加载合适的指南
  3. 按指南的步骤顺序执行
  4. 使用指南的工作流程清单跟踪进度
  5. 仅在需要时加载参考文件
  6. 提供为项目文档添加Neon最佳实践的选项
准备好开始了吗？只需描述你正在开发的项目即可！