From 892a4d2913fa4aabcb5fd0430528dec2fb4f3089 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Thu, 5 Feb 2026 09:58:29 -0600
Subject: [PATCH 1/6] feat(nextjs): Isolate nonce fetch in Suspense boundary
 for PPR support

Move nonce fetching from the server ClerkProvider's main body into a
separate DynamicClerkScripts server component wrapped in Suspense.
This allows pages using dynamic=true to remain statically renderable
and compatible with PPR/cacheComponents.

- Create DynamicClerkScripts async server component
- Add getNonce cached function to utils
- Skip client ClerkScripts when server scripts are used
- Pass __internal_skipScripts through KeylessProvider
---
 .../src/app-router/client/ClerkProvider.tsx   |  4 +-
 .../src/app-router/server/ClerkProvider.tsx   | 46 +++++++++----
 .../app-router/server/DynamicClerkScripts.tsx | 69 +++++++++++++++++++
 .../app-router/server/keyless-provider.tsx    |  5 +-
 .../nextjs/src/app-router/server/utils.ts     | 17 +++++
 packages/nextjs/src/types.ts                  |  6 ++
 6 files changed, 129 insertions(+), 18 deletions(-)
 create mode 100644 packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx

diff --git a/packages/nextjs/src/app-router/client/ClerkProvider.tsx b/packages/nextjs/src/app-router/client/ClerkProvider.tsx
index 3177c997026..a743f73b4fa 100644
--- a/packages/nextjs/src/app-router/client/ClerkProvider.tsx
+++ b/packages/nextjs/src/app-router/client/ClerkProvider.tsx
@@ -26,7 +26,7 @@ const LazyCreateKeylessApplication = dynamic(() =>
 );
 
 const NextClientClerkProvider = <TUi extends Ui = Ui>(props: NextClerkProviderProps<TUi>) => {
-  const { __internal_invokeMiddlewareOnAuthStateChange = true, children } = props;
+  const { __internal_invokeMiddlewareOnAuthStateChange = true, __internal_skipScripts = false, children } = props;
   const router = useRouter();
   const push = useAwaitablePush();
   const replace = useAwaitableReplace();
@@ -89,7 +89,7 @@ const NextClientClerkProvider = <TUi extends Ui = Ui>(props: NextClerkProviderPr
     <ClerkNextOptionsProvider options={mergedProps}>
       <ReactClerkProvider {...mergedProps}>
         <RouterTelemetry />
-        <ClerkScripts router='app' />
+        {!__internal_skipScripts && <ClerkScripts router='app' />}
         {children}
       </ReactClerkProvider>
     </ClerkNextOptionsProvider>
diff --git a/packages/nextjs/src/app-router/server/ClerkProvider.tsx b/packages/nextjs/src/app-router/server/ClerkProvider.tsx
index 1a9da428cff..59d4c0f5b94 100644
--- a/packages/nextjs/src/app-router/server/ClerkProvider.tsx
+++ b/packages/nextjs/src/app-router/server/ClerkProvider.tsx
@@ -1,14 +1,14 @@
 import type { Ui } from '@clerk/react/internal';
 import type { InitialState, Without } from '@clerk/shared/types';
-import { headers } from 'next/headers';
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import { getDynamicAuthData } from '../../server/buildClerkProps';
 import type { NextClerkProviderProps } from '../../types';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { ClientClerkProvider } from '../client/ClerkProvider';
+import { DynamicClerkScripts } from './DynamicClerkScripts';
 import { getKeylessStatus, KeylessProvider } from './keyless-provider';
-import { buildRequestLike, getScriptNonceFromHeader } from './utils';
+import { buildRequestLike } from './utils';
 
 const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
   const request = await buildRequestLike();
@@ -17,43 +17,59 @@ const getDynamicClerkState = React.cache(async function getDynamicClerkState() {
   return data;
 });
 
-const getNonceHeaders = React.cache(async function getNonceHeaders() {
-  const headersList = await headers();
-  const nonce = headersList.get('X-Nonce');
-  return nonce
-    ? nonce
-    : // Fallback to extracting from CSP header
-      getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
-});
-
 export async function ClerkProvider<TUi extends Ui = Ui>(
   props: Without<NextClerkProviderProps<TUi>, '__internal_invokeMiddlewareOnAuthStateChange'>,
 ) {
   const { children, dynamic, ...rest } = props;
 
   const statePromiseOrValue = dynamic ? getDynamicClerkState() : undefined;
-  const noncePromiseOrValue = dynamic ? getNonceHeaders() : '';
 
   const propsWithEnvs = mergeNextClerkPropsWithEnv({
     ...rest,
     // Even though we always cast to InitialState here, this might still be a promise.
     // While not reflected in the public types, we do support this for React >= 19 for internal use.
     initialState: statePromiseOrValue as InitialState | undefined,
-    nonce: await noncePromiseOrValue,
   });
 
   const { shouldRunAsKeyless, runningWithClaimedKeys } = await getKeylessStatus(propsWithEnvs);
 
+  // When dynamic mode is enabled, render scripts in a Suspense boundary to isolate
+  // the nonce fetching (which calls headers()) from the rest of the page.
+  // This allows the page to remain statically renderable / use PPR.
+  const dynamicScripts = dynamic ? (
+    <Suspense>
+      <DynamicClerkScripts
+        publishableKey={propsWithEnvs.publishableKey}
+        clerkJSUrl={propsWithEnvs.clerkJSUrl}
+        clerkJSVersion={propsWithEnvs.clerkJSVersion}
+        clerkUIUrl={propsWithEnvs.clerkUIUrl}
+        domain={propsWithEnvs.domain}
+        proxyUrl={propsWithEnvs.proxyUrl}
+        prefetchUI={propsWithEnvs.prefetchUI}
+      />
+    </Suspense>
+  ) : null;
+
   if (shouldRunAsKeyless) {
     return (
       <KeylessProvider
         rest={propsWithEnvs}
         runningWithClaimedKeys={runningWithClaimedKeys}
+        __internal_skipScripts={dynamic}
       >
+        {dynamicScripts}
         {children}
       </KeylessProvider>
     );
   }
 
-  return <ClientClerkProvider {...propsWithEnvs}>{children}</ClientClerkProvider>;
+  return (
+    <ClientClerkProvider
+      {...propsWithEnvs}
+      __internal_skipScripts={dynamic}
+    >
+      {dynamicScripts}
+      {children}
+    </ClientClerkProvider>
+  );
 }
diff --git a/packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx b/packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx
new file mode 100644
index 00000000000..ef8b0ed37fb
--- /dev/null
+++ b/packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx
@@ -0,0 +1,69 @@
+import { buildClerkJSScriptAttributes, clerkJSScriptUrl, clerkUIScriptUrl } from '@clerk/react/internal';
+import React from 'react';
+
+import { getNonce } from './utils';
+
+type DynamicClerkScriptsProps = {
+  publishableKey: string;
+  clerkJSUrl?: string;
+  clerkJSVersion?: string;
+  clerkUIUrl?: string;
+  domain?: string;
+  proxyUrl?: string;
+  prefetchUI?: boolean;
+};
+
+/**
+ * Server component that fetches nonce from headers and renders Clerk scripts.
+ * This component should be wrapped in a Suspense boundary to isolate the dynamic
+ * nonce fetching from the rest of the page, allowing static rendering/PPR to work.
+ */
+export async function DynamicClerkScripts(props: DynamicClerkScriptsProps) {
+  const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, domain, proxyUrl, prefetchUI } = props;
+
+  if (!publishableKey) {
+    return null;
+  }
+
+  const nonce = await getNonce();
+
+  const opts = {
+    publishableKey,
+    clerkJSUrl,
+    clerkJSVersion,
+    clerkUIUrl,
+    nonce,
+    domain,
+    proxyUrl,
+  };
+
+  const scriptUrl = clerkJSScriptUrl(opts);
+  const attributes = buildClerkJSScriptAttributes(opts);
+
+  return (
+    <>
+      <script
+        src={scriptUrl}
+        data-clerk-js-script
+        async
+        crossOrigin='anonymous'
+        {...attributes}
+      />
+      {/* Use <link rel='preload'> instead of <script> for the UI bundle.
+          This tells the browser to download the resource immediately (high priority)
+          but doesn't execute it, avoiding race conditions with __clerkSharedModules
+          registration (which happens when React code runs @clerk/ui/register).
+          When loadClerkUIScript() later adds a <script> tag, the browser uses the
+          cached resource and executes it without re-downloading. */}
+      {prefetchUI !== false && (
+        <link
+          rel='preload'
+          href={clerkUIScriptUrl(opts)}
+          as='script'
+          crossOrigin='anonymous'
+          nonce={nonce}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/nextjs/src/app-router/server/keyless-provider.tsx b/packages/nextjs/src/app-router/server/keyless-provider.tsx
index e4a70a0490d..8c4289b8b2b 100644
--- a/packages/nextjs/src/app-router/server/keyless-provider.tsx
+++ b/packages/nextjs/src/app-router/server/keyless-provider.tsx
@@ -32,10 +32,11 @@ export async function getKeylessStatus(
 type KeylessProviderProps = PropsWithChildren<{
   rest: Without<NextClerkProviderProps, '__internal_invokeMiddlewareOnAuthStateChange' | 'children'>;
   runningWithClaimedKeys: boolean;
+  __internal_skipScripts?: boolean;
 }>;
 
 export const KeylessProvider = async (props: KeylessProviderProps) => {
-  const { rest, runningWithClaimedKeys, children } = props;
+  const { rest, runningWithClaimedKeys, __internal_skipScripts, children } = props;
 
   // NOTE: Create or read keys on every render. Usually this means only on hard refresh or hard navigations.
   const newOrReadKeys = await import('../../server/keyless-node.js')
@@ -52,6 +53,7 @@ export const KeylessProvider = async (props: KeylessProviderProps) => {
       <ClientClerkProvider
         {...mergeNextClerkPropsWithEnv(rest)}
         disableKeyless
+        __internal_skipScripts={__internal_skipScripts}
       >
         {children}
       </ClientClerkProvider>
@@ -68,6 +70,7 @@ export const KeylessProvider = async (props: KeylessProviderProps) => {
         // Explicitly use `null` instead of `undefined` here to avoid persisting `deleteKeylessAction` during merging of options.
         __internal_keyless_dismissPrompt: runningWithClaimedKeys ? deleteKeylessAction : null,
       })}
+      __internal_skipScripts={__internal_skipScripts}
     >
       {children}
     </ClientClerkProvider>
diff --git a/packages/nextjs/src/app-router/server/utils.ts b/packages/nextjs/src/app-router/server/utils.ts
index 1c6e24a38f4..b0c97fd7652 100644
--- a/packages/nextjs/src/app-router/server/utils.ts
+++ b/packages/nextjs/src/app-router/server/utils.ts
@@ -1,4 +1,5 @@
 import { NextRequest } from 'next/server';
+import React from 'react';
 
 export const isPrerenderingBailout = (e: unknown) => {
   if (!(e instanceof Error) || !('message' in e)) {
@@ -83,3 +84,19 @@ export function getScriptNonceFromHeader(cspHeaderValue: string): string | undef
 
   return nonce;
 }
+
+/**
+ * Fetches the nonce from request headers.
+ * Uses React.cache to deduplicate calls within the same request.
+ */
+export const getNonce = React.cache(async function getNonce(): Promise<string> {
+  // Dynamically import next/headers
+  // @ts-expect-error: Cannot find module 'next/headers' or its corresponding type declarations.ts(2307)
+  const { headers } = await import('next/headers');
+  const headersList = await headers();
+  const nonce = headersList.get('X-Nonce');
+  return nonce
+    ? nonce
+    : // Fallback to extracting from CSP header
+      getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
+});
diff --git a/packages/nextjs/src/types.ts b/packages/nextjs/src/types.ts
index 5a43befa80c..05664757a52 100644
--- a/packages/nextjs/src/types.ts
+++ b/packages/nextjs/src/types.ts
@@ -23,4 +23,10 @@ export type NextClerkProviderProps<TUi extends Ui = Ui> = Without<ClerkProviderP
    * @default false
    */
   dynamic?: boolean;
+  /**
+   * @internal
+   * If set to true, the client ClerkProvider will not render ClerkScripts.
+   * Used when scripts are rendered server-side in a Suspense boundary.
+   */
+  __internal_skipScripts?: boolean;
 };

From 3d14a18e29a91a56f7dd978ed2d1ee48ea846b42 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Thu, 5 Feb 2026 21:59:19 -0600
Subject: [PATCH 2/6] fix(nextjs): Extract shared ClerkScriptTags and add
 getNonce error handling

Extract duplicated script rendering into a shared ClerkScriptTags component
used by both ClerkScripts (client) and DynamicClerkScripts (server). Add
try/catch to getNonce() so errors in prerendering or "use cache" contexts
degrade gracefully instead of propagating unhandled.
---
 .../app-router/server/DynamicClerkScripts.tsx | 49 ++++-----------
 .../nextjs/src/app-router/server/utils.ts     | 26 +++++---
 .../nextjs/src/utils/clerk-script-tags.tsx    | 59 +++++++++++++++++++
 packages/nextjs/src/utils/clerk-script.tsx    | 42 ++++++-------
 4 files changed, 108 insertions(+), 68 deletions(-)
 create mode 100644 packages/nextjs/src/utils/clerk-script-tags.tsx

diff --git a/packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx b/packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx
index ef8b0ed37fb..1462c3e78ee 100644
--- a/packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx
+++ b/packages/nextjs/src/app-router/server/DynamicClerkScripts.tsx
@@ -1,6 +1,6 @@
-import { buildClerkJSScriptAttributes, clerkJSScriptUrl, clerkUIScriptUrl } from '@clerk/react/internal';
 import React from 'react';
 
+import { ClerkScriptTags } from '../../utils/clerk-script-tags';
 import { getNonce } from './utils';
 
 type DynamicClerkScriptsProps = {
@@ -27,43 +27,16 @@ export async function DynamicClerkScripts(props: DynamicClerkScriptsProps) {
 
   const nonce = await getNonce();
 
-  const opts = {
-    publishableKey,
-    clerkJSUrl,
-    clerkJSVersion,
-    clerkUIUrl,
-    nonce,
-    domain,
-    proxyUrl,
-  };
-
-  const scriptUrl = clerkJSScriptUrl(opts);
-  const attributes = buildClerkJSScriptAttributes(opts);
-
   return (
-    <>
-      <script
-        src={scriptUrl}
-        data-clerk-js-script
-        async
-        crossOrigin='anonymous'
-        {...attributes}
-      />
-      {/* Use <link rel='preload'> instead of <script> for the UI bundle.
-          This tells the browser to download the resource immediately (high priority)
-          but doesn't execute it, avoiding race conditions with __clerkSharedModules
-          registration (which happens when React code runs @clerk/ui/register).
-          When loadClerkUIScript() later adds a <script> tag, the browser uses the
-          cached resource and executes it without re-downloading. */}
-      {prefetchUI !== false && (
-        <link
-          rel='preload'
-          href={clerkUIScriptUrl(opts)}
-          as='script'
-          crossOrigin='anonymous'
-          nonce={nonce}
-        />
-      )}
-    </>
+    <ClerkScriptTags
+      publishableKey={publishableKey}
+      clerkJSUrl={clerkJSUrl}
+      clerkJSVersion={clerkJSVersion}
+      clerkUIUrl={clerkUIUrl}
+      nonce={nonce}
+      domain={domain}
+      proxyUrl={proxyUrl}
+      prefetchUI={prefetchUI}
+    />
   );
 }
diff --git a/packages/nextjs/src/app-router/server/utils.ts b/packages/nextjs/src/app-router/server/utils.ts
index 57d6f622d4c..8ac51f197b4 100644
--- a/packages/nextjs/src/app-router/server/utils.ts
+++ b/packages/nextjs/src/app-router/server/utils.ts
@@ -158,13 +158,21 @@ export function getScriptNonceFromHeader(cspHeaderValue: string): string | undef
  * Uses React.cache to deduplicate calls within the same request.
  */
 export const getNonce = React.cache(async function getNonce(): Promise<string> {
-  // Dynamically import next/headers
-  // @ts-expect-error: Cannot find module 'next/headers' or its corresponding type declarations.ts(2307)
-  const { headers } = await import('next/headers');
-  const headersList = await headers();
-  const nonce = headersList.get('X-Nonce');
-  return nonce
-    ? nonce
-    : // Fallback to extracting from CSP header
-      getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
+  try {
+    // Dynamically import next/headers
+    // @ts-expect-error: Cannot find module 'next/headers' or its corresponding type declarations.ts(2307)
+    const { headers } = await import('next/headers');
+    const headersList = await headers();
+    const nonce = headersList.get('X-Nonce');
+    return nonce
+      ? nonce
+      : // Fallback to extracting from CSP header
+        getScriptNonceFromHeader(headersList.get('Content-Security-Policy') || '') || '';
+  } catch (e) {
+    if (isPrerenderingBailout(e)) {
+      throw e;
+    }
+    // Graceful degradation — scripts load without nonce
+    return '';
+  }
 });
diff --git a/packages/nextjs/src/utils/clerk-script-tags.tsx b/packages/nextjs/src/utils/clerk-script-tags.tsx
new file mode 100644
index 00000000000..d10d236235d
--- /dev/null
+++ b/packages/nextjs/src/utils/clerk-script-tags.tsx
@@ -0,0 +1,59 @@
+import { buildClerkJSScriptAttributes, clerkJSScriptUrl, clerkUIScriptUrl } from '@clerk/react/internal';
+import React from 'react';
+
+type ClerkScriptTagsProps = {
+  publishableKey: string;
+  clerkJSUrl?: string;
+  clerkJSVersion?: string;
+  clerkUIUrl?: string;
+  nonce?: string;
+  domain?: string;
+  proxyUrl?: string;
+  prefetchUI?: boolean;
+};
+
+/**
+ * Pure component that renders the Clerk script tags.
+ * Shared between `ClerkScripts` (client, app router) and `DynamicClerkScripts` (server).
+ * No hooks or client-only imports — safe for both server and client components.
+ */
+export function ClerkScriptTags(props: ClerkScriptTagsProps) {
+  const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, nonce, domain, proxyUrl, prefetchUI } = props;
+
+  const opts = {
+    publishableKey,
+    clerkJSUrl,
+    clerkJSVersion,
+    clerkUIUrl,
+    nonce,
+    domain,
+    proxyUrl,
+  };
+
+  return (
+    <>
+      <script
+        src={clerkJSScriptUrl(opts)}
+        data-clerk-js-script
+        async
+        crossOrigin='anonymous'
+        {...buildClerkJSScriptAttributes(opts)}
+      />
+      {/* Use <link rel='preload'> instead of <script> for the UI bundle.
+          This tells the browser to download the resource immediately (high priority)
+          but doesn't execute it, avoiding race conditions with __clerkSharedModules
+          registration (which happens when React code runs @clerk/ui/register).
+          When loadClerkUIScript() later adds a <script> tag, the browser uses the
+          cached resource and executes it without re-downloading. */}
+      {prefetchUI !== false && (
+        <link
+          rel='preload'
+          href={clerkUIScriptUrl(opts)}
+          as='script'
+          crossOrigin='anonymous'
+          nonce={nonce}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/nextjs/src/utils/clerk-script.tsx b/packages/nextjs/src/utils/clerk-script.tsx
index aa4a42d811a..ae8076f3c78 100644
--- a/packages/nextjs/src/utils/clerk-script.tsx
+++ b/packages/nextjs/src/utils/clerk-script.tsx
@@ -4,40 +4,32 @@ import NextScript from 'next/script';
 import React from 'react';
 
 import { useClerkNextOptions } from '../client-boundary/NextOptionsContext';
+import { ClerkScriptTags } from './clerk-script-tags';
 
 type ClerkScriptProps = {
   scriptUrl: string;
   attributes: Record<string, string>;
   dataAttribute: string;
-  router: 'app' | 'pages';
 };
 
 function ClerkScript(props: ClerkScriptProps) {
-  const { scriptUrl, attributes, dataAttribute, router } = props;
-
-  /**
-   * Notes:
-   * `next/script` in 13.x.x when used with App Router will fail to pass any of our `data-*` attributes, resulting in errors
-   * Nextjs App Router will automatically move inline scripts inside `<head/>`
-   * Using the `nextjs/script` for App Router with the `beforeInteractive` strategy will throw an error because our custom script will be mounted outside the `html` tag.
-   */
-  const Script = router === 'app' ? 'script' : NextScript;
+  const { scriptUrl, attributes, dataAttribute } = props;
 
   return (
-    <Script
+    <NextScript
       src={scriptUrl}
       {...{ [dataAttribute]: true }}
       async
       // `nextjs/script` will add defer by default and does not get removed when async is true
-      defer={router === 'pages' ? false : undefined}
+      defer={false}
       crossOrigin='anonymous'
-      strategy={router === 'pages' ? 'beforeInteractive' : undefined}
+      strategy='beforeInteractive'
       {...attributes}
     />
   );
 }
 
-export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] }) {
+export function ClerkScripts({ router }: { router: 'app' | 'pages' }) {
   const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, nonce, prefetchUI } = useClerkNextOptions();
   const { domain, proxyUrl } = useClerk();
 
@@ -45,6 +37,21 @@ export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] })
     return null;
   }
 
+  if (router === 'app') {
+    return (
+      <ClerkScriptTags
+        publishableKey={publishableKey}
+        clerkJSUrl={clerkJSUrl}
+        clerkJSVersion={clerkJSVersion}
+        clerkUIUrl={clerkUIUrl}
+        nonce={nonce}
+        domain={domain}
+        proxyUrl={proxyUrl}
+        prefetchUI={prefetchUI}
+      />
+    );
+  }
+
   const opts = {
     publishableKey,
     clerkJSUrl,
@@ -61,14 +68,7 @@ export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] })
         scriptUrl={clerkJSScriptUrl(opts)}
         attributes={buildClerkJSScriptAttributes(opts)}
         dataAttribute='data-clerk-js-script'
-        router={router}
       />
-      {/* Use <link rel='preload'> instead of <script> for the UI bundle.
-          This tells the browser to download the resource immediately (high priority)
-          but doesn't execute it, avoiding race conditions with __clerkSharedModules
-          registration (which happens when React code runs @clerk/ui/register).
-          When loadClerkUIScript() later adds a <script> tag, the browser uses the
-          cached resource and executes it without re-downloading. */}
       {prefetchUI !== false && (
         <link
           rel='preload'

From 5913ae92b3115ffbf5bf3397aecfac632c352656 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Thu, 5 Feb 2026 22:13:06 -0600
Subject: [PATCH 3/6] fix(nextjs): Import from @clerk/shared to avoid barrel
 side effects in RSC

Import clerkJSScriptUrl, buildClerkJSScriptAttributes, clerkUIScriptUrl
from @clerk/shared/loadClerkJsScript instead of @clerk/react/internal in
the shared ClerkScriptTags component. The @clerk/react/internal barrel
re-exports modules that use React.createContext, which breaks when the
RSC bundler evaluates the barrel in server component context.
---
 packages/nextjs/src/utils/clerk-script-tags.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/src/utils/clerk-script-tags.tsx b/packages/nextjs/src/utils/clerk-script-tags.tsx
index d10d236235d..588d852e349 100644
--- a/packages/nextjs/src/utils/clerk-script-tags.tsx
+++ b/packages/nextjs/src/utils/clerk-script-tags.tsx
@@ -1,4 +1,4 @@
-import { buildClerkJSScriptAttributes, clerkJSScriptUrl, clerkUIScriptUrl } from '@clerk/react/internal';
+import { buildClerkJSScriptAttributes, clerkJSScriptUrl, clerkUIScriptUrl } from '@clerk/shared/loadClerkJsScript';
 import React from 'react';
 
 type ClerkScriptTagsProps = {

From 804338494c53a60e9d00bea191e48c6aaa2bd03b Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 6 Feb 2026 14:41:15 -0600
Subject: [PATCH 4/6] fix(nextjs): Guard React.cache call for non-RSC test
 environments

---
 packages/nextjs/src/app-router/server/utils.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/src/app-router/server/utils.ts b/packages/nextjs/src/app-router/server/utils.ts
index 8ac51f197b4..ada946eb5b6 100644
--- a/packages/nextjs/src/app-router/server/utils.ts
+++ b/packages/nextjs/src/app-router/server/utils.ts
@@ -157,7 +157,10 @@ export function getScriptNonceFromHeader(cspHeaderValue: string): string | undef
  * Fetches the nonce from request headers.
  * Uses React.cache to deduplicate calls within the same request.
  */
-export const getNonce = React.cache(async function getNonce(): Promise<string> {
+// React.cache is only available in RSC environments; provide a no-op fallback for tests/non-RSC contexts.
+const reactCache = typeof React.cache === 'function' ? React.cache : <T extends (...args: any[]) => any>(fn: T): T => fn;
+
+export const getNonce = reactCache(async function getNonce(): Promise<string> {
   try {
     // Dynamically import next/headers
     // @ts-expect-error: Cannot find module 'next/headers' or its corresponding type declarations.ts(2307)

From f66bd15ff0822f89a52e518e82645d168941ef97 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 6 Feb 2026 14:44:45 -0600
Subject: [PATCH 5/6] chore: Add changeset for nextjs nonce changes

---
 .changeset/thin-flies-rush.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thin-flies-rush.md

diff --git a/.changeset/thin-flies-rush.md b/.changeset/thin-flies-rush.md
new file mode 100644
index 00000000000..0c2730537bd
--- /dev/null
+++ b/.changeset/thin-flies-rush.md
@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Isolate nonce fetch in Suspense boundary for PPR support and guard `React.cache` for non-RSC environments

From 137f9f278f2b6801fcc65cc2ccb55ae78a9870f4 Mon Sep 17 00:00:00 2001
From: Jacek <jacek@clerk.dev>
Date: Fri, 6 Feb 2026 14:49:38 -0600
Subject: [PATCH 6/6] fix(nextjs): Fix formatting

---
 packages/nextjs/src/app-router/server/utils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/src/app-router/server/utils.ts b/packages/nextjs/src/app-router/server/utils.ts
index ada946eb5b6..71bea824315 100644
--- a/packages/nextjs/src/app-router/server/utils.ts
+++ b/packages/nextjs/src/app-router/server/utils.ts
@@ -158,7 +158,8 @@ export function getScriptNonceFromHeader(cspHeaderValue: string): string | undef
  * Uses React.cache to deduplicate calls within the same request.
  */
 // React.cache is only available in RSC environments; provide a no-op fallback for tests/non-RSC contexts.
-const reactCache = typeof React.cache === 'function' ? React.cache : <T extends (...args: any[]) => any>(fn: T): T => fn;
+const reactCache =
+  typeof React.cache === 'function' ? React.cache : <T extends (...args: any[]) => any>(fn: T): T => fn;
 
 export const getNonce = reactCache(async function getNonce(): Promise<string> {
   try {