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

npm install @adunblock/server-tag-nextjs

Basic Usage

Import and use the ServerTag component in your Next.js pages or layouts:
import ServerTag from "@adunblock/server-tag-nextjs";

export default function MyPage() {
  return (
    <div>
      <ServerTag remoteUrl="https://config.adunblocker.com/server-tag.json" />
      <h1>My Page Content</h1>
    </div>
  );
}

Advanced Usage

Custom Caching

import ServerTag from "@adunblock/server-tag-nextjs";

export default function MyPage() {
  return (
    <div>
      <ServerTag
        remoteUrl="https://config.adunblocker.com/server-tag.json"
        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:
import ServerTag from "@adunblock/server-tag-nextjs";
import Script from "next/script";

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

API Reference

Props

PropTypeDefaultDescription
remoteUrlstringRequiredThe URL to fetch script URLs from
cacheIntervalnumber300Cache duration in seconds
renderScriptfunctionundefinedCustom script rendering function

Types

interface ServerTagProps {
  remoteUrl: string;
  cacheInterval?: number;
  renderScript?: (jsFiles: { js: 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.