feat(nextjs): Support rendering ClerkProvider in client components #1840
Conversation
🦋 Changeset detectedLatest commit: 83f81fb The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
!snapshot |
|
Hey @BRKalow - the snapshot version command generated the following package versions:
Tip: use the snippet copy button below to quickly install the required packages. # @clerk/backend
npm i @clerk/[email protected]# @clerk/chrome-extension
npm i @clerk/[email protected]# @clerk/clerk-js
npm i @clerk/[email protected]# @clerk/clerk-expo
npm i @clerk/[email protected]# @clerk/fastify
npm i @clerk/[email protected]# gatsby-plugin-clerk
npm i [email protected]# @clerk/nextjs
npm i @clerk/[email protected]# @clerk/clerk-react
npm i @clerk/[email protected]# @clerk/remix
npm i @clerk/[email protected]# @clerk/clerk-sdk-node
npm i @clerk/[email protected]# @clerk/shared
npm i @clerk/[email protected] |
| @@ -0,0 +1,19 @@ | |||
| 'use client'; | |||
|
|
|||
| import { useRouter } from 'next/compat/router'; | |||
There was a problem hiding this comment.
More details from the exported hook here: https://github.com/vercel/next.js/blob/canary/packages/next/src/client/compat/router.ts
There was a problem hiding this comment.
Is this a stable export we can rely on being available?
Or are we reaching into private APIs here?
There was a problem hiding this comment.
I believe it is stable and reliable, based on PR: vercel/next.js#42502.
| export function ClerkProvider(props: NextClerkProviderProps) { | ||
| const router = useRouter(); | ||
|
|
||
| const Provider = router ? PageClerkProvider : ClientClerkProvider; |
There was a problem hiding this comment.
The solution here makes perfect sense to me :)
Do you think we could merge the two client providers into one? I took a quick look and they look pretty similar.
There was a problem hiding this comment.
@nikosdouvlis possibly, the difficulty is they rely on the two different router hooks, which is why we need this layer. We could abstract the dependency on the router into a prop and use this layer to compute the prop to pass down to single provider.
…ting a custom log
| import type { Application } from '../models/application'; | ||
| import { appConfigs } from '../presets'; | ||
|
|
||
| test.describe('next build @nextjs', () => { |
There was a problem hiding this comment.
@nikosdouvlis Any feedback on the test? 🙏
| @@ -69,7 +69,7 @@ | |||
| "test:ci": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%}", | |||
| "test:integration:base": "DEBUG=1 npx playwright test --config integration/playwright.config.ts", | |||
| "test:integration:generic": "E2E_APP_ID=react.vite.* npm run test:integration:base -- --grep @generic", | |||
| "test:integration:nextjs": "E2E_APP_ID=next.appRouter.withEmailCodes npm run test:integration:base -- --grep @generic", | |||
| "test:integration:nextjs": "E2E_APP_ID=next.appRouter.withEmailCodes npm run test:integration:base -- --grep \"@generic|@nextjs\"", | |||
There was a problem hiding this comment.
As discussed in the initial RFC, I added a @nextjs tag as well.
| log: (msg: string) => { | ||
| buildOutput += `\n${msg}`; | ||
| log(msg); | ||
| }, |
There was a problem hiding this comment.
Captures and makes the build output available by way of app.buildOutput. This allows us to assert on the output.
|
This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Description
Allow
ClerkProviderto be rendered in client components in App Router. This is accomplished by introducing a "compat" layer that usesnext/compat/routerto detect the presence of the pages router. If detected, we render the pages provider, otherwise we render the app router provider.fixes JS-573
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change
Packages affected
@clerk/clerk-js@clerk/clerk-react@clerk/nextjs@clerk/remix@clerk/types@clerk/themes@clerk/localizations@clerk/clerk-expo@clerk/backend@clerk/clerk-sdk-node@clerk/shared@clerk/fastify@clerk/chrome-extensiongatsby-plugin-clerkbuild/tooling/chore