> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/next.js/llms.txt
> Use this file to discover all available pages before exploring further.
# Scripts
> Optimize third-party scripts in your Next.js application with the next/script component.
The `next/script` component lets you load and manage third-party scripts with built-in loading strategies that optimize performance.
## Basic usage
Import `Script` from `next/script` and add it to any layout or page:
```tsx app/layout.tsx theme={null}
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```jsx app/layout.js theme={null}
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Loading strategies
The `strategy` prop controls when the script loads relative to the page lifecycle.
Loads the script after the page becomes interactive. This is the default and is suitable for most third-party scripts that don't need to run before the page is usable.
```tsx app/page.tsx theme={null}
import Script from 'next/script'
export default function Page() {
return (
<>
)
}
```
**Use for:** Analytics, tag managers, chatbots.
Loads the script during browser idle time, after all page resources have been fetched. Use for scripts that don't need to load early.
```tsx app/page.tsx theme={null}
import Script from 'next/script'
export default function Page() {
return (
<>
)
}
```
**Use for:** Low-priority scripts, social share buttons, feedback widgets.
Loads the script before any Next.js code and before page hydration. This strategy must be placed in the root layout (`app/layout`).
```tsx app/layout.tsx theme={null}
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
**Use for:** Bot detection scripts, consent managers, polyfills that must run before any other code.
`beforeInteractive` blocks the page from becoming interactive until the script loads. Only use it for scripts that are truly critical before hydration.
Loads the script in a web worker using [Partytown](https://partytown.builder.io/). This offloads heavy third-party scripts from the main thread.
Enable the feature first in `next.config.js`:
```js next.config.js theme={null}
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
nextScriptWorkers: true,
},
}
module.exports = nextConfig
```
```tsx app/page.tsx theme={null}
import Script from 'next/script'
export default function Page() {
return (
)
}
```
**Use for:** Analytics, ad scripts, and other heavy third-party scripts you want off the main thread.
## Inline scripts
For small inline scripts, use the `Script` component with either a string or JSX children:
```tsx app/page.tsx theme={null}
import Script from 'next/script'
export default function Page() {
return (
<>
{/* Inline script with dangerouslySetInnerHTML */}
{/* Inline script as JSX children */}
)
}
```
```jsx app/page.js theme={null}
import Script from 'next/script'
export default function Page() {
return (
<>
)
}
```
Inline scripts require a unique `id` prop so Next.js can track and optimize them.
## Event handlers
Use event handler props to execute code at different points of the script lifecycle:
Fires once when the script has finished loading. Cannot be used with `beforeInteractive`.
```tsx theme={null}