Next.js example with-strict-csp is not working properly

[ryuji-orca]

Summary

I tried to clone the with-strict-csp introduced in the Content Security Policy of Next.js and tried the script, but I get the following error.

<Script
      src="https://www.googletagmanager.com/gtag/js"
      strategy="afterInteractive"
      nonce={nonce}
    />

export const dynamic = "force-dynamic";

Refused to load the script 'https://www.googletagmanager.com/gtag/js' because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-xxxx' 'strict-dynamic' https: http: 'unsafe-inline' 'unsafe-eval'". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I tried setting force-dynamic in Layout.js but it did not solve the problem.

export const dynamic = "force-dynamic";

Is there any workaround? 🙇‍♂️

Additional information

https://github.com/vercel/next.js/blob/canary/examples/with-strict-csp/middleware.js
https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy

Example

No response