I am facing an issue with a third-party script that requires me to define a global window.varforthem before it loads. I checked the nextJS documentation but implementing it as suggested seems less readable and conflicts with eslint and other plugins. Additionally, placing the script in my public folder using
<Script src="/scripts/forthirdparty.js" />_next/static, plus its max-age header is set to 0 preventing CDN caching. Can you suggest a better approach or guide me on setting a custom max age for this static file?
I attempted using a regular <script> tag instead of <Script> within the <Head> element based on Steve Tomlin's advice.
The inline scripts require server configuration making the situation more complex.
// earlier in the method
const conf = `window.config = ${JSON.stringify(pageProps.config)}`;
const { config: pageConfig } = pageProps;
// later on
<Head>
<script
dangerouslySetInnerHTML={{
__html: conf,
}}
/>
<script src="/scripts/myfile.js" />
<script src={pageConfig.third_party_script_url} />
</Head>
Upon inspecting the <head> tag in Chrome, everything appears correct. However, nothing executes and I encounter the error message
Did not expect server HTML to contain a <div> in <div>.