feat: ✨ clean up next script opt-out

Author: HofmannZ

src/script/env-script.spec.tsx

@@ -54,7 +54,7 @@ describe('EnvScript', () => {
       <EnvScript
         env={env}
         nonce={nonce}
-        nextScriptComponentProps={{
+        nextScriptProps={{
           strategy: 'afterInteractive',
           id,
         }}
@@ -75,8 +75,8 @@ describe('EnvScript', () => {
     render(
       <EnvScript
         env={env}
-        withNextScriptComponent={false}
-        nextScriptComponentProps={{
+        disableNextScript
+        nextScriptProps={{
           id,
         }}
       />,

src/script/env-script.tsx

@@ -1,6 +1,6 @@
 // XXX: Blocked by https://github.com/vercel/next.js/pull/58129
 // import { headers } from 'next/headers';
-import Script, { ScriptProps } from 'next/script';
+import Script, { type ScriptProps } from 'next/script';
 import { type FC } from 'react';
 
 import { type NonceConfig } from '../typings/nonce';
@@ -10,8 +10,8 @@ import { PUBLIC_ENV_KEY } from './constants';
 type EnvScriptProps = {
   env: ProcessEnv;
   nonce?: string | NonceConfig;
-  withNextScriptComponent?: boolean;
-  nextScriptComponentProps?: ScriptProps;
+  disableNextScript?: boolean;
+  nextScriptProps?: ScriptProps;
 };
 
 /**
@@ -28,8 +28,8 @@ type EnvScriptProps = {
 export const EnvScript: FC<EnvScriptProps> = ({
   env,
   nonce,
-  withNextScriptComponent = true,
-  nextScriptComponentProps = { strategy: 'beforeInteractive' },
+  disableNextScript = false,
+  nextScriptProps = { strategy: 'beforeInteractive' },
 }) => {
   let nonceString: string | undefined;
 
@@ -43,23 +43,23 @@ export const EnvScript: FC<EnvScriptProps> = ({
     nonceString = nonce;
   }
 
-  const html = {
+  const innerHTML = {
     __html: `window['${PUBLIC_ENV_KEY}'] = ${JSON.stringify(env)}`,
   };
 
   // You can opt to use a regular "<script>" tag instead of Next.js' Script Component.
   // Note: When using Sentry, sentry.client.config.ts might run after the Next.js <Script> component, even when the strategy is "beforeInteractive"
   // This results in the runtime environments being undefined and the Sentry client config initialized without the correct configuration.
-  if (!withNextScriptComponent) {
-    return <script nonce={nonceString} dangerouslySetInnerHTML={html} />;
+  if (disableNextScript) {
+    return <script nonce={nonceString} dangerouslySetInnerHTML={innerHTML} />;
   }
 
   // Use Next.js Script Component by default
   return (
     <Script
-      {...nextScriptComponentProps}
+      {...nextScriptProps}
       nonce={nonceString}
-      dangerouslySetInnerHTML={html}
+      dangerouslySetInnerHTML={innerHTML}
     />
   );
 };

src/script/public-env-script.tsx

@@ -1,12 +1,15 @@
 import { unstable_noStore as noStore } from 'next/cache';
 import { type FC } from 'react';
+import { type ScriptProps } from 'next/script';
 
 import { getPublicEnv } from '../helpers/get-public-env';
 import { type NonceConfig } from '../typings/nonce';
 import { EnvScript } from './env-script';
 
 type PublicEnvScriptProps = {
   nonce?: string | NonceConfig;
+  disableNextScript?: boolean;
+  nextScriptProps?: ScriptProps;
 };
 
 /**
@@ -23,11 +26,22 @@ type PublicEnvScriptProps = {
  * </head>
  * ```
  */
-export const PublicEnvScript: FC<PublicEnvScriptProps> = ({ nonce }) => {
+export const PublicEnvScript: FC<PublicEnvScriptProps> = ({
+  nonce,
+  disableNextScript,
+  nextScriptProps,
+}) => {
   noStore(); // Opt into dynamic rendering
 
   // This value will be evaluated at runtime
   const publicEnv = getPublicEnv();
 
-  return <EnvScript env={publicEnv} nonce={nonce} />;
+  return (
+    <EnvScript
+      env={publicEnv}
+      nonce={nonce}
+      disableNextScript={disableNextScript}
+      nextScriptProps={nextScriptProps}
+    />
+  );
 };