Authentication NextJs 13 with Clerk

Easy guide to authenticate NextJs 13 with Clerk

1. Install Nextjs

npx create-next-app@latest

2. Install Clerk

npm install @clerk/nextjs

3. Dashboard Clerk — Create New

Create new account on clerk and visit this to create new app

4. Dashboard Clerk — Setting

Go to Dashboard App — User & Authentication — Email, Phone, Username and enable Name on Personal Information

5. Setup .env

Open code editor and create new file .env.local, copy Clerk Public and Secret key from Dashboard to env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<YOUR_CLERK_PUBLIC_KEY>
CLERK_SECRET_KEY=<YOUR_CLERK_SECRET_KEY> 

6. Implement Code

• Add <ClerkProvider> to layout file /app/layout.tsx