common-mistakes

# Neon Auth - 常见错误 使用 `@neondatabase/auth` 或 `@neondatabase/neon-js` 时的常见错误参考指南。 ## 导入错误 ### BetterAuthReactAdapter 子路径要求 `BetterAuthReactAdapter` **不会**从主包入口导出。你必须从子路径导入它。 **错误写法：** typescript // 这些无法工作 import { BetterAuthReactAdapter } from "@neondatabase/neon-js"; import { BetterAuthReactAdapter } from "@neondatabase/auth"; **正确写法：** typescript // 针对 @neondatabase/neon-js import { BetterAuthReactAdapter } from "@neondatabase/neon-js/auth/react/adapters"; // 针对 @neondatabase/auth import { BetterAuthReactAdapter } from "@neondatabase/auth/react/adapters"; **原因：** React 适配器具有 React 特定的依赖项，并已从主包中剔除（Tree-shaken）。使用子路径导出可以保持非 React 环境下主包的体积更小。 ### 适配器工厂函数 所有适配器都是**工厂函数**，必须使用 `()` 调用。 **错误写法：** typescript const client = createClient({ auth: { adapter: BetterAuthReactAdapter, // 缺少 () url: process.env.NEON_AUTH_URL!, }, dataApi: { url: process.env.NEON_DATA_API_URL! }, }); **正确写法：** typescript const client = createClient({ auth: { adapter: BetterAuthReactAdapter(), // 作为函数调用 url: process.env.NEON_AUTH_URL!, }, dataApi: { url: process.env.NEON_DATA_API_URL! }, }); 这适用于所有适配器： - `BetterAuthReactAdapter()` - `BetterAuthVanillaAdapter()` - `SupabaseAuthAdapter()` --- ## CSS 导入错误 Auth UI 组件需要 CSS。请根据你的项目选择**一种**方法。 ### 使用 Tailwind v4 css /* 在 app/globals.css 中 */ @import "tailwindcss"; @import "@neondatabase/neon-js/ui/tailwind"; /* 或者: @import '@neondatabase/auth/ui/tailwind'; */ ### 不使用 Tailwind typescript // 在 app/layout.tsx 中 import "@neondatabase/neon-js/ui/css"; // 或者: import "@neondatabase/auth/ui/css"; ### 切勿同时导入两者 **错误写法：** css /* 会导致约 94KB 的重复样式 */ @import "@neondatabase/neon-js/ui/css"; @import "@neondatabase/neon-js/ui/tailwind"; **原因：** `ui/css` 导入包含预构建的 CSS (约 47KB)。`ui/tailwind` 导入提供生成类似样式的 Tailwind 令牌 (约 2KB)。同时使用两者会使 CSS 包体积翻倍。 --- ## 配置错误 ### 错误的 createAuthClient 签名 `createAuthClient` 函数将 URL 作为...