From a18d45ecf8171f84f5caa5aae44c1b1c73042925 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 27 Nov 2024 18:02:44 +0200
Subject: [PATCH] chore(nextjs): Warn for deprecated nextjs versions (#4657)

---
 .changeset/smooth-humans-divide.md                 |  5 +++++
 .../nextjs/src/app-router/client/ClerkProvider.tsx | 14 ++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 .changeset/smooth-humans-divide.md

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();