Next.js external Script onLoad quirk in Head
Sometimes it’s necessary to load external JavaScript into a React/Next.js system. There are various ways of doing this, but one of the most commonly recommended is via Next.js’s <Script />
component. Today I discovered a strange quirk. If you load the script inside a Next.js <Head />
component, then the onLoad
function must be a conventional JavaScript onload function, not a React function. If you try to use a React function, it will not run, but there will be no warnings.