clerk+nextjs的使用

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 密钥和其他必要的设置。