<ClerkLoaded />

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;

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="pk_test_••••••••••••••••••••••••••••••••••">
      <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>
  );
}