# Scripts
Loading third-party scripts in Next.js.
## Use next/script
Always use `next/script` instead of native `
// GOOD: Next.js Script component
import Script from 'next/script'
```
## Inline Scripts Need ID
Inline scripts require an `id` attribute for Next.js to track them:
```tsx
// BAD: Missing id
// GOOD: Has id
// GOOD: Inline with id
```
## Don't Put Script in Head
`next/script` should not be placed inside `next/head`. It handles its own positioning:
```tsx
// BAD: Script inside Head
import Head from 'next/head'
import Script from 'next/script'
// GOOD: Script outside Head
Page
```
## Loading Strategies
```tsx
// afterInteractive (default) — Load after page is interactive
// lazyOnload — Load during idle time
// beforeInteractive — Load before page is interactive (use sparingly)
// Only works in app/layout.tsx or pages/_document.js
// worker — Load in web worker (experimental)
```
## Google Analytics
Use `@next/third-parties` instead of inline GA scripts:
```tsx
// BAD: Inline GA script
// GOOD: Next.js component
import { GoogleAnalytics } from '@next/third-parties/google'
export default function Layout({ children }) {
return (
{children}
)
}
```
## Google Tag Manager
```tsx
import { GoogleTagManager } from '@next/third-parties/google'
export default function Layout({ children }) {
return (
{children}
)
}
```
## Other Third-Party Scripts
```tsx
// YouTube embed
import { YouTubeEmbed } from '@next/third-parties/google'
// Google Maps
import { GoogleMapsEmbed } from '@next/third-parties/google'
```
## Quick Reference
| Pattern | Issue | Fix |
|---------|-------|-----|
| `