SuperAPI AI 工具集

nextjs-integration

前端与建站

查看项目

更新于 10-16 05:47

技能介绍

用途:在 Next.js 应用中完成 Clerk 身份认证集成,同时支持 App Router(Next.js 13.4+)与 Pages Router(12.x 及更早)。

主要能力:安装配置 @clerk/nextjs;通过环境变量配置发布密钥、密钥与登录/注册跳转地址;生成 middleware.ts 实现边缘路由保护(含 publicRoutes、ignoredRoutes 与 matcher 配置);提供 App Router 的 ClerkProvider 布局、登录/注册页面与受保护路由模板;提供 Pages Router 的 _app.tsx、API 认证回调路由与登录注册页;服务端使用 auth()、currentUser()、redirectToSignIn()、clerkClient,客户端使用 useAuth()、useUser()、useClerk()、useSignIn()、useSignUp();支持组织/多租户认证(orgId、角色权限、组织切换)。

使用方式:先执行 bash ./skills/nextjs-integration/scripts/install-clerk.sh 或 npm install @clerk/nextjs,创建 .env.local 填入 Clerk 凭据;App Router 运行 setup-app-router.sh 与 configure-middleware.sh,Pages Router 运行 setup-pages-router.sh;也可直接复制 templates 下对应模板文件,再按需复制 examples 中的受保护路由与服务端组件示例。

适用场景:新建 Next.js 13.4+ 应用、维护旧版 Pages Router 项目、需要边缘中间件保护、多租户与组织级访问控制,以及与 Supabase、tRPC、Prisma、Vercel 的集成。

限制:需自备 Clerk 账号与有效密钥(资料提及免费层级);需 Next.js 12.0+ 或 13.4+、React 18+、Node 18.17+ 或 20+;密钥不得硬编码,需放入环境变量并在部署平台配置;具体收费与价格暂未提供。