> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ad-unblock.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Script loading for Next.js applications with React Server Components

A Next.js React Server Component for fetching and rendering external JavaScript files on the server-side before page rendering. This package provides secure, cached script loading with TypeScript support.

## Installation

```bash theme={null}
npm install @adunblock/server-tag-nextjs
```

<Warning>
  Every rendered `<script>` tag **must** include a `data-code` attribute set
  to your Account ID (verification code). AdUnblock uses this value to verify
  that the script is running on your registered domain. Find your Account ID
  at the top of your AdUnblock dashboard.
</Warning>

## Basic Usage

Import and use the `ServerTag` component in your Next.js pages or layouts:

```tsx theme={null}
import ServerTag from "@adunblock/server-tag-nextjs";

export default function MyPage() {
  return (
    <div>
      <ServerTag
        remoteUrl="https://public.adunblocker.com/api/vendor_scripts"
        scriptAttributes={{ "data-code": "YOUR_ACCOUNT_ID" }}
      />
      <h1>My Page Content</h1>
    </div>
  );
}
```

## Advanced Usage

### Custom Caching

```tsx theme={null}
import ServerTag from "@adunblock/server-tag-nextjs";

export default function MyPage() {
  return (
    <div>
      <ServerTag
        remoteUrl="https://public.adunblocker.com/api/vendor_scripts"
        cacheInterval={600} // Cache for 10 minutes (default: 300 seconds)
      />
      <h1>My Page Content</h1>
    </div>
  );
}
```

### Custom Script Rendering

Override the default script rendering with a custom callback:

```tsx theme={null}
import ServerTag from "@adunblock/server-tag-nextjs";
import Script from "next/script";

export default function MyPage() {
  return (
    <div>
      <ServerTag
        remoteUrl="https://public.adunblocker.com/api/vendor_scripts"
        renderScript={(scripts) =>
          scripts.map((src) => (
            <Script
              key={src}
              src={src}
              strategy="lazyOnload"
              onLoad={() => console.log(`Loaded: ${src}`)}
            />
          ))
        }
      />
      <h1>My Page Content</h1>
    </div>
  );
}
```

## API Reference

### Props

| Prop               | Type               | Default     | Description                                                                                          |
| ------------------ | ------------------ | ----------- | ---------------------------------------------------------------------------------------------------- |
| `remoteUrl`        | `string`           | Required    | The URL to fetch script URLs from                                                                    |
| `cacheInterval`    | `number`           | `300`       | Cache duration in seconds                                                                            |
| `scriptAttributes` | `ScriptAttributes` | `undefined` | Attributes applied to every generated `<script>` tag. **Must include `data-code: YOUR_ACCOUNT_ID`.** |
| `renderScript`     | `function`         | `undefined` | Custom script rendering function                                                                     |

### Types

```typescript theme={null}
type ScriptAttributeValue = string | boolean | number | undefined;

interface ScriptAttributes {
  [key: string]: ScriptAttributeValue;
}

interface ServerTagProps {
  remoteUrl: string;
  cacheInterval?: number;
  scriptAttributes?: ScriptAttributes;
  renderScript?: (scripts: string[]) => React.ReactNode;
}
```

## Security

* Only HTTP and HTTPS URLs are allowed
* Server-side execution prevents client-side script injection
* URL validation prevents malicious protocol usage

## Browser Compatibility

This package works with all browsers supported by Next.js 15+ and React 19.