feat: ✨ add options to use Next Script Component or a regular script tag

Author: davevanhoorn

src/script/env-script.spec.tsx

@@ -45,6 +45,46 @@ describe('EnvScript', () => {
     expect(document.querySelector('script')).not.toHaveAttribute('nonce');
   });
 
+  it('should accept Next.js Script tag props', () => {
+    const env = { NODE_ENV: 'test', API_URL: 'http://localhost:3000' };
+    const nonce = 'test-nonce-xyz';
+    const id = 'text-id-abc';
+
+    render(
+      <EnvScript
+        env={env}
+        nonce={nonce}
+        nextScriptComponentProps={{
+          strategy: 'afterInteractive',
+          id,
+        }}
+      />,
+    );
+
+    expect(document.querySelector('script')).toHaveAttribute('nonce', nonce);
+    expect(document.querySelector('script')).toHaveAttribute('id', id);
+    expect(document.querySelector('script')?.textContent).toBe(
+      `window['__ENV'] = ${JSON.stringify(env)}`,
+    );
+  });
+
+  it('should not have Next.js Script props when a regular script tag is used', () => {
+    const env = { NODE_ENV: 'test', API_URL: 'http://localhost:3000' };
+    const id = 'text-id-abc';
+
+    render(
+      <EnvScript
+        env={env}
+        withNextScriptComponent={false}
+        nextScriptComponentProps={{
+          id,
+        }}
+      />,
+    );
+
+    expect(document.querySelector('script')).not.toHaveAttribute('id', id);
+  });
+
   it.todo(
     'should get the nonce from the headers when the headerKey is provided',
   );

src/script/env-script.tsx

@@ -1,15 +1,17 @@
 // XXX: Blocked by https://github.com/vercel/next.js/pull/58129
 // import { headers } from 'next/headers';
-import Script from 'next/script';
 import { type FC } from 'react';
 
 import { type NonceConfig } from '../typings/nonce';
 import { type ProcessEnv } from '../typings/process-env';
 import { PUBLIC_ENV_KEY } from './constants';
+import Script, { ScriptProps } from 'next/script';
 
 type EnvScriptProps = {
   env: ProcessEnv;
   nonce?: string | NonceConfig;
+  withNextScriptComponent?: boolean;
+  nextScriptComponentProps?: ScriptProps;
 };
 
 /**
@@ -23,7 +25,12 @@ type EnvScriptProps = {
  * </head>
  * ```
  */
-export const EnvScript: FC<EnvScriptProps> = ({ env, nonce }) => {
+export const EnvScript: FC<EnvScriptProps> = ({
+  env,
+  nonce,
+  withNextScriptComponent = true,
+  nextScriptComponentProps = { strategy: 'beforeInteractive' },
+}) => {
   let nonceString: string | undefined;
 
   // XXX: Blocked by https://github.com/vercel/next.js/pull/58129
@@ -36,13 +43,23 @@ export const EnvScript: FC<EnvScriptProps> = ({ env, nonce }) => {
     nonceString = nonce;
   }
 
+  const html = {
+    __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} />;
+  }
+
+  // Use Next.js Script Component by default
   return (
     <Script
-      strategy="beforeInteractive"
+      {...nextScriptComponentProps}
       nonce={nonceString}
-      dangerouslySetInnerHTML={{
-        __html: `window['${PUBLIC_ENV_KEY}'] = ${JSON.stringify(env)}`,
-      }}
+      dangerouslySetInnerHTML={html}
     />
   );
 };