How to load external scripts in Next.js?

import Script from 'next/script';

export default function Page() {
  return (
    <>
      <Script src="https://example.com/script.js" />
      <h1>My Page</h1>
    </>
  );
}

// Load after page is interactive (default)
<Script src="/script.js" strategy="afterInteractive" />

// Load before page hydration
<Script src="/critical.js" strategy="beforeInteractive" />

// Load during idle time
<Script src="/analytics.js" strategy="lazyOnload" />

// Load in web worker
<Script src="/heavy.js" strategy="worker" />

<Script
  src="https://example.com/script.js"
  onLoad={() => console.log('Script loaded')}
  onError={() => console.log('Script failed')}
  onReady={() => console.log('Script ready')}
/>

<Script id="gtag">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  `}
</Script>

<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_ID"
  strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_ID');
  `}
</Script>