Configure <ClerkProvider/>

Clerk requires your Next.js application to be wrapped in the <ClerkProvider/> component. The <ClerkProvider /> component wraps your Next.js application to provide active session and user context to Clerk's hooks and other components.

1
import { ClerkProvider } from '@clerk/nextjs';
2

3
function MyApp({ Component, pageProps }) {
4
  return (
5
    <ClerkProvider {...pageProps} >
6
      <Component {...pageProps} />
7
    </ClerkProvider>
8
  );
9
}
10

11
export default MyApp;

1
import { ClerkProvider } from '@clerk/nextjs';
2
import type { AppProps } from 'next/app'
3

4
function MyApp({ Component, pageProps }: AppProps) {
5
  return (
6
    <ClerkProvider {...pageProps} >
7
      <Component {...pageProps} />
8
    </ClerkProvider>
9
  );
10
}
11

12
export default MyApp;