diff --git a/.changeset/smooth-humans-divide.md b/.changeset/smooth-humans-divide.md new file mode 100644 index 0000000000..c5bf6a5d05 --- /dev/null +++ b/.changeset/smooth-humans-divide.md @@ -0,0 +1,5 @@ +--- +'@clerk/nextjs': patch +--- + +Warn for deprecated support for `13.x` and `14.0.x` Next.js versions. diff --git a/packages/nextjs/src/app-router/client/ClerkProvider.tsx b/packages/nextjs/src/app-router/client/ClerkProvider.tsx index 3091956160..a583880aca 100644 --- a/packages/nextjs/src/app-router/client/ClerkProvider.tsx +++ b/packages/nextjs/src/app-router/client/ClerkProvider.tsx @@ -1,6 +1,9 @@ 'use client'; import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react'; +import { inBrowser } from '@clerk/shared/browser'; +import { logger } from '@clerk/shared/logger'; import { useRouter } from 'next/navigation'; +import nextPackage from 'next/package.json'; import React, { useEffect, useTransition } from 'react'; import { useSafeLayoutEffect } from '../../client-boundary/hooks/useSafeLayoutEffect'; @@ -23,7 +26,18 @@ declare global { } } +const isDeprecatedNextjsVersion = nextPackage.version.startsWith('13.') || nextPackage.version.startsWith('14.0'); + export const ClientClerkProvider = (props: NextClerkProviderProps) => { + if (isDeprecatedNextjsVersion) { + const deprecationWarning = `Clerk:\nYour current Next.js version (${nextPackage.version}) will be deprecated in the next major release of "@clerk/nextjs". Please upgrade to next@14.1.0 or later.`; + if (inBrowser()) { + logger.warnOnce(deprecationWarning); + } else { + logger.logOnce(`\n\x1b[43m----------\n${deprecationWarning}\n----------\x1b[0m\n`); + } + } + const { __unstable_invokeMiddlewareOnAuthStateChange = true, children } = props; const router = useRouter(); const push = useAwaitablePush();