<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
It's not recommended to wrap the entire app in the <ClerkLoaded>
component; instead, only wrap the components that need access to the Clerk
object.
import { ClerkLoaded } from '@clerk/nextjs'
export default function Page() {
return (
<ClerkLoaded>
<p>Clerk has loaded</p>
<MyCustomSignInFlow />
</ClerkLoaded>
)
}