Skip to content

Frontend Setup

Install the Clerk package

pnpm add @clerk/nextjs

Add the Public and Secret Key to Environment

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk...
CLERK_SECRET_KEY=sk...

Create a Proxy.ts File

  • Create a proxy.ts file on the root of the project or in the src folder
  • Add the following code to the file:
import { clerkMiddleware } from '@clerk/nextjs/server';

export default clerkMiddleware();

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)(.*)',
  ],
};

Update layout.tsx with Clerk Provider Component

```ts import { ClerkProvider, Show, SignInButton, SignUpButton, UserButton } from '@clerk/nextjs'

export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( ${geistSans.variable} ${geistMono.variable} antialiased}>

{children} ) }