inst-setup-clerk-next

编写使用 Clerk 身份验证的 Next.js 应用的指南 1. **安装依赖** 在项目中安装 `@clerk/nextjs`： ```bash npm install @clerk/nextjs ``` 2. **配置环境变量** 在 `.env.local` 文件中添加 Clerk 的公钥和私钥： ``` NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key CLERK_SECRET_KEY=your_secret_key ``` 3. **设置 ClerkProvider** 在 `app/layout.tsx`（App Router）或 `_app.tsx`（Pages Router）中包裹应用： ```tsx import { ClerkProvider } from '@clerk/nextjs' export default function RootLayout({ children }) { return ( <ClerkProvider> {children} </ClerkProvider> ) } ``` 4. **保护路由** 使用 `middleware.ts` 文件自动保护需要身份验证的路由： ```ts import { authMiddleware } from '@clerk/nextjs' export default authMiddleware({ publicRoutes: ['/', '/api/public'] }) export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], } ``` 5. **使用身份验证组件** 在页面中使用 Clerk 提供的组件，例如登录、注册和用户按钮： ```tsx import { SignInButton, UserButton } from '@clerk/nextjs' export default function Home() { return ( <div> <SignInButton /> <UserButton afterSignOutUrl="/" /> </div> ) } ``` 6. **获取当前用户信息** 使用 `useUser` 钩子获取已登录用户的信息： ```tsx import { useUser } from '@clerk/nextjs' export default function Profile() { const { user, isLoaded } = useUser() if (!isLoaded) return <div>加载中...</div> return <div>欢迎，{user?.firstName}！</div> } ``` 7. **API 路由中的身份验证** 在 API 路由中使用 `auth()` 函数验证请求： ```ts import { auth } from '@clerk/nextjs' export default function handler(req, res) { const { userId } = auth() if (!userId) { return res.status(401).json({ error: '未授权' }) } // 处理受保护的逻辑 res.json({ message: '访问成功' }) } ``` 8. **自定义登录页面（可选）** 可通过创建 `/sign-in` 和 `/sign-up` 页面来自定义登录流程。 9. **部署注意事项** 确保生产环境中正确配置了 Clerk 的环境变量，并检查域名白名单设置。 遵循以上步骤，即可在 Next.js 应用中高效集成 Clerk 身份验证功能。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本