How I fixed this Next.js error: Refused to load the script because it violate Content Security Policy directive

Recently, I migrated my portfolio website: ramunarasinga.com to Next.js using leerob.io template and wanted to integrate Microsoft clarity with Next.js.

At first, I directly copied the script and pasted it in the head tag in layout.tsx and got the following error:

I overlooked the fact that this error is related to Content Security Policy and thought this has to do with me not using Script from Next.js, so I followed along with the steps provided in How to setup …

clarity com content security error head integrate javascript layout microsoft next nextjs opensource policy portfolio react script security security policy tag template website