Docs

<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

app/layout.tsx
import { ClerkProvider, ClerkLoaded, ClerkLoading } from '@clerk/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <ClerkLoaded>{children}</ClerkLoaded>
        </body>
      </html>
    </ClerkProvider>
  )
}

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

app/page.tsx
declare global {
  interface Window {
    Clerk: any
  }
}

export default function Home() {
  return <div>This page uses Clerk {window.Clerk.version}; </div>
}
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>
}
app.tsx
import { useEffect } from 'react'
import { ClerkLoaded, ClerkProvider } from '@clerk/clerk-react'

declare global {
  interface Window {
    Clerk: any
  }
}

function App() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <ClerkLoaded>
        <Page />
      </ClerkLoaded>
    </ClerkProvider>
  )
}

function Page() {
  useEffect(() => {
    // no need to check if window.Clerk exists
    document.title = 'This page uses Clerk ' + window.Clerk.version
  }, [])

  return <div>The content </div>
}

export default App
routes/index.tsx
import { ClerkLoaded } from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <ClerkLoaded>
        <div>Clerk is loaded</div>
        <p>window.Clerk.version</p>
      </ClerkLoaded>
    </div>
  )
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on