bigcommerce · bookernath · Jul 14, 2025 · Jul 14, 2025 · Copilot · Jul 14, 2025
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Add support for Scripts API/Script Manager scripts rendering via next/script
@@ -19,6 +19,7 @@ import { revalidate } from '~/client/revalidate-target';
 import { WebAnalyticsFragment } from '~/components/analytics/fragment';
 import { AnalyticsProvider } from '~/components/analytics/provider';
 import { ContainerQueryPolyfill } from '~/components/polyfills/container-query';
+import { ScriptManagerScripts, ScriptsFragment } from '~/components/scripts';
 import { routing } from '~/i18n/routing';
 import { getToastNotification } from '~/lib/server-toast';
 
@@ -35,13 +36,16 @@ const RootLayoutMetadataQuery = graphql(
           }
           ...WebAnalyticsFragment
         }
+        content {
+          ...ScriptsFragment
+        }
       }
       channel {
         entityId
       }
     }
   `,
-  [WebAnalyticsFragment],
+  [WebAnalyticsFragment, ScriptsFragment],
 );
 
 const fetchRootLayoutMetadata = cache(async () => {
@@ -109,6 +113,12 @@ export default async function RootLayout({ params, children }: Props) {
 
   return (
     <html className={clsx(fonts.map((f) => f.variable))} lang={locale}>
+      <head>
+        <ScriptManagerScripts
+          scripts={data.site.content.headerScripts}
+          strategy="afterInteractive"
+        />
+      </head>
       <body className="flex min-h-screen flex-col">
         <NextIntlClientProvider>
           <NuqsAdapter>
@@ -124,6 +134,7 @@ export default async function RootLayout({ params, children }: Props) {
         </NextIntlClientProvider>
         <VercelComponents />
         <ContainerQueryPolyfill />
+        <ScriptManagerScripts scripts={data.site.content.footerScripts} strategy="lazyOnload" />
       </body>
     </html>
   );

@@ -8,6 +8,7 @@ export const graphql = initGraphQLTada<{
     DateTime: string;
     Long: number;
     BigDecimal: number;
+    UUID: string;
   };
   disableMasking: true;
 }>();

@@ -0,0 +1,66 @@
+# Script Components
+
+This directory contains components for rendering BigCommerce scripts using Next.js Script component.
+
+## Components
+
+### ScriptManagerScripts
+A single component that renders scripts with configurable strategy. Location filtering is now handled at the GraphQL level, simplifying the component logic.
+
+## Usage
+
+```tsx
+import { ScriptManagerScripts } from '~/components/scripts';
+
+// In your layout component:
+<head>
+  <ScriptManagerScripts 
+    scripts={data.site.content.headerScripts} 
+    strategy="afterInteractive" 
+  />
+</head>
+<body>
+  {children}
+  <ScriptManagerScripts 
+    scripts={data.site.content.footerScripts} 
+    strategy="lazyOnload" 
+  />
+</body>
+```
+
+## Architecture
+
+The component accepts:
+- `scripts`: Pre-filtered GraphQL scripts data (headerScripts or footerScripts)
+- `strategy`: 'afterInteractive', 'lazyOnload', or other Next.js Script strategies
+
+## Script Processing
+
+The component handles both types of BigCommerce scripts:
+
+### External Scripts (SrcScript)
+```tsx
+<Script 
+  id="bc-script-123" 
+  src="https://example.com/script.js" 
+  strategy="afterInteractive"
+  integrity="sha256-abc123..."
+  crossOrigin="anonymous"
+/>
+```
+
+### Inline Scripts (InlineScript)
+Inline scripts are rendered using `dangerouslySetInnerHTML` for reliable execution:
+```tsx
+<Script 
+  id="bc-script-456" 
+  strategy="lazyOnload"
+  dangerouslySetInnerHTML={{ __html: scriptContent }}
+/>
+```
+
+## Performance & Security
+
+- Header scripts use `afterInteractive` strategy for critical functionality  
+- Footer scripts use `lazyOnload` strategy for better performance
+- Integrity hashes are included when available for security
@@ -0,0 +1,39 @@
+import { graphql } from '~/client/graphql';
+
+export const ScriptsFragment = graphql(`
+  fragment ScriptsFragment on Content {
+    headerScripts: scripts(
+      first: 50
+      filters: { visibilities: [ALL_PAGES, STOREFRONT], location: HEAD }
+    ) {
+      ...ScriptTypeConnectionFragment
+    }
+    footerScripts: scripts(
+      first: 50
-export const ScriptsFragment = graphql(`
-  fragment ScriptsFragment on Content {
-    headerScripts: scripts(
-      first: 50
-      filters: { visibilities: [ALL_PAGES, STOREFRONT], location: HEAD }
-    ) {
-      ...ScriptTypeConnectionFragment
-    }
-    footerScripts: scripts(
-      first: 50
+// Default limit for the number of scripts to fetch. Adjust this value as needed.
+const DEFAULT_SCRIPT_LIMIT = 50;
+
+export const ScriptsFragment = graphql(`
+  fragment ScriptsFragment on Content {
+    headerScripts: scripts(
+      first: DEFAULT_SCRIPT_LIMIT
+      filters: { visibilities: [ALL_PAGES, STOREFRONT], location: HEAD }
+    ) {
+      ...ScriptTypeConnectionFragment
+    }
+    footerScripts: scripts(
+      first: DEFAULT_SCRIPT_LIMIT
-export const ScriptsFragment = graphql(`
-  fragment ScriptsFragment on Content {
-    headerScripts: scripts(
-      first: 50
-      filters: { visibilities: [ALL_PAGES, STOREFRONT], location: HEAD }
-    ) {
-      ...ScriptTypeConnectionFragment
-    }
-    footerScripts: scripts(
-      first: 50
+// Default limit for the number of scripts to fetch. Adjust this value as needed.
+const DEFAULT_SCRIPT_LIMIT = 50;
+
+export const ScriptsFragment = graphql(`
+  fragment ScriptsFragment on Content {
+    headerScripts: scripts(
+      first: DEFAULT_SCRIPT_LIMIT
+      filters: { visibilities: [ALL_PAGES, STOREFRONT], location: HEAD }
+    ) {
+      ...ScriptTypeConnectionFragment
+    }
+    footerScripts: scripts(
+      first: DEFAULT_SCRIPT_LIMIT
+      filters: { visibilities: [ALL_PAGES, STOREFRONT], location: FOOTER }
+    ) {
+      ...ScriptTypeConnectionFragment
+    }
+  }
+
+  fragment ScriptTypeConnectionFragment on ScriptTypeConnection {
+    edges {
+      node {
+        __typename
+        integrityHashes {
+          hash
+        }
+        entityId
+        consentCategory
+        location
+        visibility
+        ... on InlineScript {
+          scriptTag
+        }
+        ... on SrcScript {
+          src
+        }
+      }
+    }
+  }
+`);
@@ -0,0 +1,2 @@
+export { ScriptManagerScripts } from './scripts';
+export { ScriptsFragment } from './fragment';
@@ -0,0 +1,68 @@
+import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
+import Script from 'next/script';
+import { ComponentProps } from 'react';
+
+import { FragmentOf } from '~/client/graphql';
+
+import { ScriptsFragment } from './fragment';
+
+type ScriptsData = FragmentOf<typeof ScriptsFragment>;
+
+interface ScriptRendererProps {
+  scripts: ScriptsData['headerScripts'] | null;
+  strategy: ComponentProps<typeof Script>['strategy'];
+}
+
+export const ScriptManagerScripts = ({ scripts, strategy }: ScriptRendererProps) => {
+  if (!scripts?.edges) return null;
+
+  const scriptNodes = removeEdgesAndNodes(scripts);
+
+  return (
+    <>
+      {scriptNodes
+        .map((script) => {
+          const scriptProps: ComponentProps<typeof Script> = {
+            strategy,
+          };
+
+          // Handle external scripts (SrcScript)
+          if (script.__typename === 'SrcScript' && script.src) {
+            scriptProps.src = script.src;
+
+            // Add integrity hashes if provided
+            if (script.integrityHashes.length > 0) {
+              scriptProps.integrity = script.integrityHashes
+                .map((hashObj) => hashObj.hash)
+                .join(' ');
+              scriptProps.crossOrigin = 'anonymous';
+            }
+          }
+
+          // Handle inline scripts (InlineScript)
+          if (script.__typename === 'InlineScript' && script.scriptTag) {
+            const scriptMatch = /<script[^>]*>([\s\S]*?)<\/script>/i.exec(script.scriptTag);
+
+            if (scriptMatch?.[1]) {
+              scriptProps.dangerouslySetInnerHTML = {
+                __html: scriptMatch[1],
+              };
+            }
+          }
+
+          scriptProps.id = `bc-script-${script.entityId}`;
+
+          // Return null for invalid scripts (will be filtered out)
+          if (!scriptProps.src && !scriptProps.dangerouslySetInnerHTML) {
+            return null;
+          }
+
+          return scriptProps;
+        })
+        .filter((scriptProps): scriptProps is ComponentProps<typeof Script> => scriptProps !== null)
+        .map((scriptProps) => {
+          return <Script key={scriptProps.id} {...scriptProps} />;
+        })}
+    </>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { ScriptManagerScripts } from './scripts';
		export { ScriptsFragment } from './fragment';