CODEWITHSUNDEEP
javascriptnext.js
Dave Stein
Dave Stein

Reputation: 9316

Can I use a javascript file to generate inline javascript within nextjs?

I have a 3rd party script that requires me to define a global window.varforthem before they load. I took a look at the nextJS docs for this. It's done in a way where eslint and other plugins won't work aside from it being less readable for a long configuration object. If I use my public folder like <Script src="/scripts/forthirdparty.js" />, it gets slapped on the page without being optimized like the rest of the assets within _next/static. On top of that, the max-age header is set to 0 so my CDN doesn't cache that misc file. is there a better way to handle this? If not, how can I make sure my static file gets a custom max age?

I tried to use a regular <script> vs <Script> in the <Head> tag after Steve Tomlin's link below.

My inline scripts need some server config to work which makes it a bit more complicated.

// 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>

When I inspect the <head> tag in Chrome everything looks right. However nothing runs and I got the error Did not expect server HTML to contain a <div> in <div>. After compiling the first load works. Refreshes fail. Not sure why it's rendering differently on server than client.

Upvotes: 0

Views: 808

Answers (1)

Dave Stein
Dave Stein

Reputation: 9316

Writing an answer here for people that might not realize some timing issues that can arise with Next.JS implement external ".js" with <script>. My third party script manipulated the DOM. So sometimes it would do that before/after React detects DOM differences from server. The full solution was to use <script> tags in <Head> for my own scripts that just put configuration for the third party script. I kept the third party <script>s out of <Head> so they would be rendered at bottom of page after everything else ran.

Upvotes: 1

Related Questions