# Scripts in Next.js
# The Problem
* Scripts can slow down page load
* Different scripts need different loading priorities
* Some scripts block rendering, others don't need to
# The Solution
Basic Usage:
```typescript
import Script from 'next/script'
// Basic usage
// With strategy
```
# Loading Strategies
## 1\. `beforeInteractive`
* Loads before page hydration
* Use for critical scripts (bot detection, cookie consent)
* Must be in root layout
* Always injected in ``
## 2\. `afterInteractive` (default)
* Loads after some hydration
* Good for analytics, tag managers
* Can be anywhere in the app
## 3\. `lazyOnload`
* Loads during browser idle time
* Best for low-priority scripts
* Chat widgets, social media embeds
## 4\. `worker` (experimental)
* Offloads to web worker
* Keeps main thread free
* Great for heavy third-party scripts
# Real World Example
```javascript
```
Worker potential:
* This analytics script could run in a worker instead
* Benefits:
* Main thread stays clean for user interactions
* Doesn't compete with your app's JavaScript
* Better performance metrics (Interaction to next paint (INP), Time to Interactive (TTI))
* Especially valuable when you have many third-party scripts (analytics, tracking, ads)
**The key difference:** `afterInteractive` **still runs on the main thread, potentially impacting performance, while** `worker` **isolates these scripts from your core app functionality.**