feat(nextjs): Drop support for next v13 and v14 (#7197)

Author: panteliselef

.changeset/ten-wolves-attack.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': major
+---
+
+Drop support for `next@13` and `next@14` since they have reached [EOL](https://nextjs.org/support-policy#unsupported-versions). Now `>= [email protected]` is required.

.github/workflows/ci.yml

@@ -296,9 +296,6 @@ jobs:
           ]
         test-project: ["chrome"]
         include:
-          - test-name: "nextjs"
-            test-project: "chrome"
-            next-version: "14"
           - test-name: "nextjs"
             test-project: "chrome"
             next-version: "15"

packages/nextjs/README.md

@@ -31,7 +31,7 @@
 
 ### Prerequisites
 
-- Next.js 13.5.7 or later
+- Next.js 15.2.3 or later
 - React 18 or later
 - Node.js `>=18.17.0` or later
 - An existing Clerk application. [Create your account for free](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_nextjs).

packages/nextjs/package.json

@@ -92,10 +92,10 @@
   },
   "devDependencies": {
     "crypto-es": "^2.1.0",
-    "next": "14.2.33"
+    "next": "15.2.3"
   },
   "peerDependencies": {
-    "next": "^13.5.7 || ^14.2.25 || ^15.2.3 || ^16",
+    "next": "^15.2.3 || ^16",
     "react": "catalog:peer-react",
     "react-dom": "catalog:peer-react"
   },

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

@@ -1,11 +1,8 @@
 'use client';
 import { ClerkProvider as ReactClerkProvider } from '@clerk/react';
-import { inBrowser } from '@clerk/shared/browser';
-import { logger } from '@clerk/shared/logger';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import nextPackage from 'next/package.json';
-import React, { useEffect, useTransition } from 'react';
+import React from 'react';
 
 import { useSafeLayoutEffect } from '../../client-boundary/hooks/useSafeLayoutEffect';
 import { ClerkNextOptionsProvider, useClerkNextOptions } from '../../client-boundary/NextOptionsContext';
@@ -14,7 +11,6 @@ import { ClerkJSScript } from '../../utils/clerk-js-script';
 import { canUseKeyless } from '../../utils/feature-flags';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { RouterTelemetry } from '../../utils/router-telemetry';
-import { isNextWithUnstableServerActions } from '../../utils/sdk-versions';
 import { detectKeylessEnvDriftAction } from '../keyless-actions';
 import { invalidateCacheAction } from '../server-actions';
 import { useAwaitablePush } from './useAwaitablePush';
@@ -29,20 +25,10 @@ const LazyCreateKeylessApplication = dynamic(() =>
 );
 
 const NextClientClerkProvider = (props: NextClerkProviderProps) => {
-  if (isNextWithUnstableServerActions) {
-    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();
   const replace = useAwaitableReplace();
-  const [isPending, startTransition] = useTransition();
 
   // Call drift detection on mount (client-side)
   useSafeLayoutEffect(() => {
@@ -57,19 +43,13 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
     return props.children;
   }
 
-  useEffect(() => {
-    if (!isPending) {
-      window.__clerk_internal_invalidateCachePromise?.();
-    }
-  }, [isPending]);
-
   useSafeLayoutEffect(() => {
     window.__unstable__onBeforeSetActive = intent => {
       /**
        * We need to invalidate the cache in case the user is navigating to a page that
        * was previously cached using the auth state that was active at the time.
        *
-       *  We also need to await for the invalidation to happen before we navigate,
+       * We also need to await for the invalidation to happen before we navigate,
        * otherwise the navigation will use the cached page.
        *
        * For example, if we did not invalidate the flow, the following scenario would be broken:
@@ -85,25 +65,16 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
        * https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
        */
       return new Promise(resolve => {
-        window.__clerk_internal_invalidateCachePromise = resolve;
-
         const nextVersion = window?.next?.version || '';
 
-        // ATTENTION: Avoid using wrapping code with `startTransition` on versions >= 14
-        // otherwise the fetcher of `useReverification()` will be pending indefinitely when called within `startTransition`.
-        if (nextVersion.startsWith('13')) {
-          startTransition(() => {
-            router.refresh();
-          });
-        }
-        // On Next.js v15 calling a server action that returns a 404 error when deployed on Vercel is prohibited, failing with 405 status code.
-        // When a user transitions from "signed in" to "singed out", we clear the `__session` cookie, then we call `__unstable__onBeforeSetActive`.
+        // On Next.js 15+ calling a server action that returns a 404 error when deployed on Vercel is prohibited, failing with 405 status code.
+        // When a user transitions from "signed in" to "signed out", we clear the `__session` cookie, then we call `__unstable__onBeforeSetActive`.
         // If we were to call `invalidateCacheAction` while the user is already signed out (deleted cookie), any page protected by `auth.protect()`
         // will result to the server action returning a 404 error (this happens because server actions inherit the protection rules of the page they are called from).
         // SOLUTION:
         // To mitigate this, since the router cache on version 15 is much less aggressive, we can treat this as a noop and simply resolve the promise.
         // Once `setActive` performs the navigation, `__unstable__onAfterSetActive` will kick in and perform a router.refresh ensuring shared layouts will also update with the correct authentication context.
-        else if (nextVersion.startsWith('15') && intent === 'sign-out') {
+        if (nextVersion.startsWith('15') && intent === 'sign-out') {
           resolve(); // noop
         } else {
           void invalidateCacheAction().then(() => resolve());

packages/nextjs/src/app-router/client/useInternalNavFun.ts

@@ -33,12 +33,8 @@ export const useInternalNavFun = (props: {
           // as this is the way to perform a shallow navigation in Next.js App Router
           // without unmounting/remounting the page or fetching data from the server.
           if (opts?.__internal_metadata?.navigationType === 'internal') {
-            // In 14.1.0, useSearchParams becomes reactive to shallow updates,
-            // but only if passing `null` as the history state.
-            // Older versions need to maintain the history state for push/replace to work,
-            // without affecting how the Next router works.
-            const state = ((window as any).next?.version ?? '') < '14.1.0' ? history.state : null;
-            windowNav(state, '', to);
+            // Passing `null` ensures App Router shallow navigations keep search params reactive.
+            windowNav(null, '', to);
           } else {
             // If the navigation is external (usually when navigating away from the component but still within the app),
             // we should use the Next.js router to navigate as it will handle updating the URL and also

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

@@ -7,7 +7,6 @@ import { PromisifiedAuthProvider } from '../../client-boundary/PromisifiedAuthPr
 import { getDynamicAuthData } from '../../server/buildClerkProps';
 import type { NextClerkProviderProps } from '../../types';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
-import { isNext13 } from '../../utils/sdk-versions';
 import { ClientClerkProvider } from '../client/ClerkProvider';
 import { getKeylessStatus, KeylessProvider } from './keyless-provider';
 import { buildRequestLike, getScriptNonceFromHeader } from './utils';
@@ -37,27 +36,13 @@ export async function ClerkProvider(
     if (!dynamic) {
       return Promise.resolve(null);
     }
-    if (isNext13) {
-      /**
-       * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
-       * Without the await here, Next will throw a DynamicServerError during build.
-       */
-      return Promise.resolve(await getDynamicClerkState());
-    }
     return getDynamicClerkState();
   }
 
   async function generateNonce() {
     if (!dynamic) {
       return Promise.resolve('');
     }
-    if (isNext13) {
-      /**
-       * For some reason, Next 13 requires that functions which call `headers()` are awaited where they are invoked.
-       * Without the await here, Next will throw a DynamicServerError during build.
-       */
-      return Promise.resolve(await getNonceHeaders());
-    }
     return getNonceHeaders();
   }
 

packages/nextjs/src/app-router/server/auth.ts

@@ -11,7 +11,6 @@ import { unauthorized } from '../../server/nextErrors';
 import type { AuthProtect } from '../../server/protect';
 import { createProtect } from '../../server/protect';
 import { decryptClerkRequestData } from '../../server/utils';
-import { isNextWithUnstableServerActions } from '../../utils/sdk-versions';
 import { buildRequestLike } from './utils';
 
 /**
@@ -75,10 +74,6 @@ export const auth: AuthFn = (async (options?: AuthOptions) => {
   const request = await buildRequestLike();
 
   const stepsBasedOnSrcDirectory = async () => {
-    if (isNextWithUnstableServerActions) {
-      return [];
-    }
-
     try {
       const isSrcAppDir = await import('../../server/fs/middleware-location.js').then(m => m.hasSrcAppDir());
       return [`Your Middleware exists at ./${isSrcAppDir ? 'src/' : ''}middleware.(ts|js)`];

packages/nextjs/src/global.d.ts

@@ -35,7 +35,6 @@ interface Window {
       promisesBuffer: Array<() => void> | undefined;
     }
   >;
-  __clerk_internal_invalidateCachePromise: () => void | undefined;
   __clerk_nav_await: Array<(value: void) => void>;
   __clerk_nav: (to: string) => Promise<void>;
 

packages/nextjs/src/server/createGetAuth.ts

@@ -4,7 +4,6 @@ import type { PendingSessionOptions } from '@clerk/shared/types';
 import { isTruthy } from '@clerk/shared/underscore';
 
 import { withLogger } from '../utils/debugLogger';
-import { isNextWithUnstableServerActions } from '../utils/sdk-versions';
 import type { GetAuthDataFromRequestOptions } from './data/getAuthDataFromRequest';
 import {
   getAuthDataFromRequest as getAuthDataFromRequestOriginal,
@@ -37,11 +36,6 @@ export const createAsyncGetAuth = ({
       }
 
       if (!detectClerkMiddleware(req)) {
-        // Keep the same behaviour for versions that may have issues with bundling `node:fs`
-        if (isNextWithUnstableServerActions) {
-          assertAuthStatus(req, noAuthStatusMessage);
-        }
-
         const missConfiguredMiddlewareLocation = await import('./fs/middleware-location.js')
           .then(m => m.suggestMiddlewareLocation())
           .catch(() => undefined);