🚀 Script Component in Next.js

The next/script component in Next.js helps load external and inline scripts efficiently, ensuring better performance and SEO.

📌 1. Why Use <Script>?

✔️ Optimizes script loading for faster page performance
✔️ Supports lazy loading and priority execution
✔️ Prevents render-blocking issues

📌 2. Importing the Script Component

javascript
import Script from "next/script";export default function Home() {  return (    <>      </>  );}

✅ Loads the script without blocking page rendering

📌 4. Script Loading Strategies

The strategy prop controls when the script is executed.

🔹 beforeInteractive: High-Priority Scripts

Loads before React hydrates the page.

javascript
<Script src="https://example.com/auth.js" strategy="beforeInteractive" />

✅ Use for authentication or critical scripts

🔹 afterInteractive: Default Behavior

Executes after the page is interactive.

javascript
<Script src="https://example.com/analytics.js" strategy="afterInteractive" />

✅ Best for analytics (Google Analytics, Facebook Pixel, etc.)

🔹 lazyOnload: Lowest Priority

Loads after the page fully loads.

javascript
<Script src="https://example.com/non-critical.js" strategy="lazyOnload" />

✅ Good for chat widgets, ads, or heavy third-party scripts

📌 5. Inline Scripts (dangerouslySetInnerHTML)

You can add inline scripts safely using Next.js.

javascript
<Script  id="custom-inline-script"  dangerouslySetInnerHTML={{    __html: `console.log("Hello from inline script!");`,  }}/>

✅ Good for small tracking codes or inline JavaScript

📌 6. Example: Adding Google Analytics

javascript
import Script from "next/script";export default function Analytics() {  return (    <>      <Script </Script>    </>  );}

✅ Ensures Google Analytics loads efficiently

📌 7. Summary: Choosing the Right Strategy