🔐 Clerk + Next.js: How to Add Beautiful, Full-Featured Authentication in Minutes

If you’re building a Next.js app and want to add authentication without writing it all from scratch, you’re going to love Clerk.

Clerk is a complete user management solution that comes with everything you need:

• Sign-in / Sign-up pages
• Social logins (Google, GitHub, etc.)
• Multi-factor authentication
• User profiles and settings
• Passwordless logins and more

The best part? It’s designed to work seamlessly with React and Next.js, and you can customize the look to match your app.

In this post, we’ll walk you through how to set up Clerk in your Next.js + TypeScript project from scratch 🚀

---

🛠️ Step 1: Set Up Your Clerk Project

1. Head over to https://clerk.com and sign up.
2. Create a new application.
3. Copy your Frontend API and API Keys — you’ll need them soon.

---

⚙️ Step 2: Install Clerk in Your Next.js App

If you don’t already have a Next.js app, create one:

npx create-next-app@latest my-app --typescript
cd my-app

Install Clerk:

npm install @clerk/nextjs

---

📁 Step 3: Configure Clerk in _app.tsx

Update your pages/_app.tsx file:

import { ClerkProvider } from '@clerk/nextjs';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

---

🔐 Step 4: Add Environment Variables

Create a .env.local file and add:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
CLERK_SECRET_KEY=your-secret-key

You can find both keys in your Clerk dashboard.

---

🧪 Step 5: Add Middleware for Auth Protection (Optional)

Create a middleware.ts file in the root of your project:

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware();

export const config = {
  matcher: ["/dashboard/:path*"], // Only protect /dashboard route and subroutes
};

---

💻 Step 6: Add Sign-In and Sign-Up Pages

Clerk provides pre-built components so you don’t have to code them from scratch:

// pages/sign-in/[[...index]].tsx
import { SignIn } from "@clerk/nextjs";

export default function SignInPage() {
  return <SignIn />;
}

// pages/sign-up/[[...index]].tsx
import { SignUp } from "@clerk/nextjs";

export default function SignUpPage() {
  return <SignUp />;
}

These are customizable and responsive out of the box!

---

🧑‍💻 Step 7: Use Auth Hooks in Your App

You can use Clerk’s hooks to access user data:

import { useUser } from "@clerk/nextjs";

const Dashboard = () => {
  const { user } = useUser();

  return (
    <div>
      <h1>Welcome, {user?.firstName} 👋</h1>
    </div>
  );
};

export default Dashboard;

---

🎯 Protecting Routes

To make sure a page is accessible only when the user is logged in, wrap it with withServerSideAuth:

// pages/dashboard.tsx
import { withServerSideAuth } from "@clerk/nextjs/ssr";
import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = withServerSideAuth();

export default function Dashboard() {
  return <div>Private content here 🔒</div>;
}

---

✅ Final Thoughts

Clerk makes it incredibly easy to add a powerful, production-ready authentication system to your Next.js app without having to reinvent the wheel.

Whether you’re building a SaaS, side project, or internal dashboard, Clerk gives you:

• Prebuilt UIs
• Powerful hooks and helpers
• Full access to user data
• Flexibility to scale

---

💡 What’s Next?

• Customize Clerk UI to match your brand
• Add user profile settings
• Add role-based access control (RBAC)
• Add social logins with one click