chore(nextjs): Warn for deprecated nextjs versions (#4657)

.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.

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 [email protected] 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();