从零搭建基于 AI GitHub 分析平台 (2) 引入Clerk

2025-03-19

Word count: 249 | Reading time≈ 1 min

Clerk 注册项目

首先在 Clerk 注册一个新的项目，然后安装依赖：

1	bun add @clerk/nextjs

设置环境变量：

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pxxxxx
CLERK_SECRET_KEY=sk_test_xxxxx

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

更新 middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isPublicRoute = createRouteMatcher(['/sign-in(.*)','/sign-up(.*)'])

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect()
  }
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

更新 Layout

import { ClerkProvider } from "@clerk/nextjs";
...
<ClerkProvider>
  <html lang="en" className={`${GeistSans.variable}`}>
    <body>
      <TRPCReactProvider>{children}</TRPCReactProvider>
    </body>
  </html>
</ClerkProvider>

作者：Bearalise
出处：从零搭建基于 AI GitHub 分析平台 (1) 搭建框架
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。