How to Use Clerk with Next.js for Authentication

To use Clerk with Next.js, install the @clerk/nextjs package, wrap your app with ClerkProvider, and use Clerk hooks like useUser for authentication. This setup enables easy user sign-in, sign-up, and session management in your Next.js app.

Syntax

Here is the basic syntax to set up Clerk in a Next.js app:

• ClerkProvider: Wraps your app to provide Clerk context.
• useUser: Hook to get current user info.
• SignIn and SignUp: Components for user authentication UI.

javascript

import { ClerkProvider, SignIn, SignUp, useUser } from '@clerk/nextjs';

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

function UserProfile() {
  const { user } = useUser();
  return <div>Hello, {user?.firstName || 'Guest'}</div>;
}

Example

This example shows a simple Next.js page using Clerk for authentication. It displays a sign-in form if the user is not signed in, and a welcome message if signed in.

javascript

import { ClerkProvider, SignedIn, SignedOut, SignIn, useUser } from '@clerk/nextjs';

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

export function HomePage() {
  const { user } = useUser();

  return (
    <div style={{ padding: '2rem', fontFamily: 'Arial, sans-serif' }}>
      <SignedOut>
        <h2>Please sign in</h2>
        <SignIn />
      </SignedOut>

      <SignedIn>
        <h2>Welcome back, {user.firstName}!</h2>
      </SignedIn>
    </div>
  );
}

Output

When not signed in: Shows a sign-in form with 'Please sign in' heading.
When signed in: Shows 'Welcome back, [User's First Name]!' message.

Common Pitfalls

Common mistakes when using Clerk with Next.js include:

• Not wrapping the app with ClerkProvider, causing hooks to fail.
• Using Clerk hooks outside of ClerkProvider context.
• Forgetting to configure Clerk environment variables like CLERK_FRONTEND_API.
• Not protecting pages that require authentication.

javascript

/* Wrong: Using useUser outside ClerkProvider */
import { useUser } from '@clerk/nextjs';

function Profile() {
  const { user } = useUser(); // This will error if not inside ClerkProvider
  return <div>{user?.firstName}</div>;
}

/* Right: Wrap app with ClerkProvider */
import { ClerkProvider } from '@clerk/nextjs';

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

Quick Reference

Summary tips for using Clerk with Next.js:

• Install with npm install @clerk/nextjs.
• Wrap your app in ClerkProvider in _app.js or _app.tsx.
• Use useUser to access user data.
• Use SignedIn and SignedOut to conditionally render UI.
• Use SignIn and SignUp components for authentication forms.
• Set environment variables CLERK_FRONTEND_API and others as per Clerk docs.

Key Takeaways

Always wrap your Next.js app with ClerkProvider to enable Clerk context.

Use Clerk hooks like useUser inside components to access authentication state.

Use SignedIn and SignedOut components to show UI based on user login status.

Configure Clerk environment variables correctly for your app to connect to Clerk services.

Use Clerk's SignIn and SignUp components for easy user authentication UI.