Clerk 集成

npx create-next-app@latest
# or
yarn create next-app

# npm
npm install @clerk/nextjs
# yarn
yarn add @clerk/nextjs
# pnpm
pnpm add @clerk/nextjs

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_
CLERK_SECRET_KEY=sk_

// pages/dashboard.jsx
import { useAuth } from "@clerk/nextjs";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Dashboard() {
  const { isLoaded, userId, isSignedIn } = useAuth();
  const router = useRouter();

  useEffect(() => {
    // 等待Auth状态加载完成
    if (isLoaded && !isSignedIn) {
      router.replace(/sign-in?redirect_url=${encodeURIComponent(router.asPath)});
    }
  }, [isLoaded, isSignedIn, router]);

  // 显示加载状态或未授权状态
  if (!isLoaded || !isSignedIn) {
    return <div>Loading...</div>;
  }

  // 用户已验证，显示内容
  return (
    <div></div>
  );
}

// pages/_app.tsx

import '@/styles/globals.css'
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <Component {...pageProps} />
    </ClerkProvider>
  )
}

export default MyApp

# Push your code to your git repository (e.g. GitHub, Gitee).

git init
git add .
git commit -m "First commit"
git remote add origin "your Git address"
git push -u origin master