1、 安装依赖
首先,需要安装@clerk/nextjs
包:
npm install @clerk/nextjs
或使用 yarn:
yarn add @clerk/nextjs
2、配置 ClerkProvider
在 pages/_app.js
或 pages/_app.tsx
文件中,配置 ClerkProvider
:
// pages/_app.js
import { ClerkProvider } from '@clerk/nextjs';
export default function MyApp({ Component, pageProps }) {
return (
<ClerkProvider>
<Component {...pageProps} />
</ClerkProvider>
);
}
3、使用 useClerk 和 useUser 钩子
在需要的组件中使用 useClerk 和 useUser 钩子来实现用户登录和登出功能:
// pages/index.js
import React from 'react';
import { useClerk, useUser } from '@clerk/nextjs';
const HomePage = () => {
const { user, isLoaded } = useUser();
const { signIn, signOut } = useClerk();
return (
<div>
<h1>Welcome to the Clerk App</h1>
{isLoaded && user ? (
<div>
<p>Welcome, {user.firstName}!</p>
<button onClick={signOut}>Sign Out</button>
</div>
) : (
<button onClick={() => signIn()}>Sign In</button>
)}
</div>
);
};
export default HomePage;
4、Clerk 配置
确保已在 Clerk 的仪表板上设置并配置好应用的 API 密钥和其他必要的设置。