Next.js App Router

Integration guide for Next.js 13+ applications using App Router

Installation

Target file: app/layout.tsx

Quick Integration

Add the following script tag to your HTML. Replace the data-key value with your actual API key.

Script Tag

import Script from 'next/script'

<Script
          src="https://cdn.antiblocker.io/ab.js"
          data-style="minimal"
          data-key="abk_****"
          strategy="afterInteractive"
        />

Complete Example

Here's a complete example showing where to place the script in your app/layout.tsx file:

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.antiblocker.io/ab.js"
          data-style="minimal"
          data-key="abk_****"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Configuration

Script Attributes

data-keyYour unique AntiBlocker API key (required)

data-styleDisplay style - choose one of 6 variants: "classic", "dark", "educational", "friendly", "minimal", or "urgent"

Implementation Notes

Use the Next.js Script component for optimal loading performance
The strategy='afterInteractive' ensures the script loads after the page becomes interactive
Place it in your root layout file (app/layout.tsx)
Works seamlessly with React Server Components

Best Practices

Performance

Place script before closing </body> tag. The script loads asynchronously and doesn't block page rendering.

Testing

Test integration in staging environment before deploying to production. Verify script loads correctly.

API Key

Obtain your unique API key from the AntiBlocker dashboard. Never share your key publicly.

Monitoring

Track detection rates and user responses through the AntiBlocker analytics dashboard.