Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<ClerkLoaded>

The <ClerkLoaded> component guarantees that the Clerk object has loaded and will be available under window.Clerk. This allows you to wrap child components to access the Clerk object without the need to check it exists.

Usage

pages/_app.tsx
import "@/styles/globals.css"; import { ClerkLoaded, ClerkProvider } from "@clerk/nextjs"; import { AppProps } from "next/app"; function MyApp({ Component, pageProps }: AppProps) { return ( <ClerkProvider {...pageProps}> <ClerkLoaded> <Component {...pageProps} /> </ClerkLoaded> </ClerkProvider> ); } export default MyApp;

Once you have wrapped your app with <ClerkLoaded>, you can access the Clerk object without the need to check if it exists.

pages/index.tsx
declare global { interface Window { Clerk: any; } } export default function Home() { return <div>This page uses Clerk {window.Clerk.version}; </div>; }

What did you think of this content?

Clerk © 2024