Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

App Directory beta

Install <ClerkProvider>

Update your root layout (/app/layout.tsx) to include the <ClerkProvider> wrapper. Please note that your layout must be configured as a server component, so there cannot be a "use client" directive at the top.

/app/layout.tsx

New Server Component Helpers

auth()

We have introduced a new auth() helper that returns the same Authentication Object as getAuth(req) in middleware, getServerSideProps, and API routes.

Since request data like headers() and cookies() is now available in the global scope for Next.js, you no longer need to explicitly pass a Request object to Clerk.

page.jsx

currentUser()

Current user loads the User object for the authenticated user from Clerk's backend API. This is helpful if you want to render information like their first and last name directly from the server.

Under the hood, this calls fetch() so it is automatically deduped per request.

page.jsx

Other changes

<SignedIn> and <SignedOut>

There are currently two versions of <SignedIn> and <SignedOut>, and it is up to the developer to choose the correct one.

If you are in a server component, import from @clerk/nextjs/app-beta. This ensures that the helpers do not add unnecessary Javascript to your bundle.

If you are in a client component, import from @clerk/nextjs/app-beta/client. This depends on React.Context instead:

Embedding <SignUp/>, <SignIn>, and <UserProfile/>

The /app directory currently does not support fast "path" routing between the different pages of these components, so you should use the default "hash" routing instead:

/app/sign-in/page.tsx

We know this is undesirable and have submitted feedback to request support.

If you are unhappy with hash routing, you can still embed these components in the /pages directory, where "path" routing is supported.

Support

If you have any questions or feedback, please reach out on Discord to @ClerkDev on Twitter

Was this helpful?

Clerk © 2022