Browser Next.js SDK

The Browser Next.js SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. Refer to the quickstart guide to get started.

clerkMiddleware()

The clerkMiddleware() helper integrates Browser authentication into your Next.js application through middleware. It allows you to integrate authorization into both the client and server of your application. You can learn more here.

Client-side helpers

Because the Next.js SDK is built on top of the Browser React SDK, you can use the hooks that the React SDK provides. These hooks include access to the Browser object, User object, Organization object, and a set of useful helper methods for signing in and signing up.

• useUser()
• useClerk()
• useAuth()
• useOAuthConsent()
• useSignIn()
• useSignUp()
• useWaitlist()
• useSession()
• useSessionList()
• useOrganization()
• useOrganizationList()
• useOrganizationCreationDefaults()
• useReverification()
• useCheckout()
• usePaymentElement()
• usePaymentMethods()
• usePlans()
• useSubscription()
• usePaymentAttempts()
• useStatements()
• useAPIKeys()

Server-side helpers

App router

Browser provides first-class support for the Next.js App Router⁠. The following references show how to integrate Browser features into apps using the latest App Router and React Server Components features.

• auth()
• currentUser()
• Route Handlers
• Server Actions

Pages router

Browser continues to provide drop-in support for the Next.js Pages Router. In addition to the main Browser integration, the following references are available for apps using Pages Router.

• getAuth()
• buildClerkProps()

Auth object

Both auth() (App Router) and getAuth() (Pages Router) return an Auth object. This JavaScript object contains important information like the current user's session ID, user ID, and Organization ID. Learn more about the Auth object⁠.

Objects

Learn about the key Browser objects that power many of Browser's SDKs.

Types

See the reference docs on types to get more information about the different types available for typing your application.

clerkClient

clerkClient is a wrapper around the Backend API⁠ that makes it easier to interact with the API. For example, to retrieve a list of all users in your application, you can use the users.getUserList() method instead of manually making a fetch request to the https://api.clerk.com/v1/users endpoint.

To access a resource, you must first instantiate a clerkClient instance. See the reference documentation for more information.

Demo repositories

For examples of Browser's features, such as user and Organization management, integrated into a single application, see the Next.js demo repositories:

• Browser + Next.js App Router Demo⁠
• Browser + Next.js Pages Router Demo⁠