feat(nextjs): Support rendering ClerkProvider in client components

.changeset/gorgeous-countries-appear.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Update `<ClerkProvider />` to work in client components within the app router. This allows rendering of the provider in client components, previously the pages router provider was being imported and throwing an error.

packages/nextjs/src/app-router/client/ClerkProvider.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { ClerkNextOptionsProvider } from '../../client-boundary/NextOptionsContext';
 import { useSafeLayoutEffect } from '../../client-boundary/useSafeLayoutEffect';
 import type { NextClerkProviderProps } from '../../types';
+import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { useAwaitableNavigate } from './useAwaitableNavigate';
 
 declare global {
@@ -33,7 +34,7 @@ export const ClientClerkProvider = (props: NextClerkProviderProps) => {
     };
   }, []);
 
-  const mergedProps = { ...props, navigate };
+  const mergedProps = mergeNextClerkPropsWithEnv({ ...props, navigate });
   return (
     <ClerkNextOptionsProvider options={mergedProps}>
       {/*// @ts-ignore*/}

packages/nextjs/src/client-boundary/ClerkProvider.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useRouter } from 'next/compat/router';
+import React from 'react';
+
+import { ClientClerkProvider } from '../app-router/client/ClerkProvider';
+import { ClerkProvider as PageClerkProvider } from '../pages/ClerkProvider';
+import { type NextClerkProviderProps } from '../types';
+
+/**
+ * This is a compatibility layer to support a single ClerkProvider component in both the app and pages routers.
+ */
+export function ClerkProvider(props: NextClerkProviderProps) {
+  const router = useRouter();
+
+  const Provider = router ? PageClerkProvider : ClientClerkProvider;
+
+  return <Provider {...props} />;
+}

packages/nextjs/src/components.client.ts

@@ -1,2 +1,2 @@
-export { ClerkProvider } from './pages/ClerkProvider';
+export { ClerkProvider } from './client-boundary/ClerkProvider';
 export { SignedIn, SignedOut } from './client-boundary/controlComponents';