AnchorLabs funziona con i React Server Components?

Sì. I Server Components producono l'HTML finale dell'articolo e il runtime lo scansiona lato browser quando la pagina è pronta.

Serve un blocco inline di configurazione?

No. Il setup standard usa solo lo snippet con attributi data-pt-*; non serve nessun window.AnchorLabsConfig.

Lo snippet impatta l'idratazione iniziale?

No. Con strategy="afterInteractive" in next/script, il file viene caricato dopo l'idratazione iniziale e non compete con il render del primo paint.

Devo aggiungere anchor.widgetbay.3labs.it al CSP di Next.js?

Sì. Se hai un CSP restrittivo, aggiungi il dominio a script-src e connect-src; se mostri immagini prodotto nel tooltip, anche a img-src.

AnchorLabs su Next.js: integrazione in App Router e Pages Router con SSR e idratazione pulita

Next.js è ormai uno degli stack più usati quando una testata vuole performance, SSR e una base moderna per il frontend editoriale. Anche qui vale la stessa regola della guida principale: l'integrazione corretta di AnchorLabs non passa da blocchi JS inline o oggetti globali custom, ma dallo snippet reale del prodotto.

In pratica: index.iife.js, data-pt-auto-init="true", tag Amazon, selettore del corpo articolo, limiti di densità. Tutto il resto viene dopo.

Prerequisiti

Next.js 15 o 16
accesso a app/layout.tsx oppure a pages/_app.tsx
un wrapper chiaro per il corpo articolo
il tuo tag Amazon Associates

Step 1: App Router in `app/layout.tsx`

Nell'App Router il punto più semplice è il layout root oppure un layout di gruppo dedicato alle pagine articolo.

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="it">
      <body>
        {children}
        <Script
          id="anchorlabs-runtime"
          src="https://anchor.widgetbay.3labs.it/index.iife.js"
          strategy="afterInteractive"
          data-pt-auto-init="true"
          data-pt-selectors="article.prose,.post-body"
          data-pt-amazon-tag="tuotag-21"
          data-pt-max-total-matches="24"
          data-pt-max-matches-per-keyword="1"
          data-pt-max-matches-per-paragraph="2"
        />
      </body>
    </html>
  );
}

Punti chiave:

un solo snippet
nessun window.AnchorLabsConfig
configurazione interamente negli attributi data-pt-*
afterInteractive è il timing corretto per non impattare l'idratazione iniziale

Se non vuoi caricare lo snippet su tutto il sito, spostalo in un layout di gruppo che copre solo le pagine articolo.

Step 2: Pages Router in `pages/_app.tsx`

Nel Pages Router la via più pulita è _app.tsx con next/script:

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        id="anchorlabs-runtime"
        src="https://anchor.widgetbay.3labs.it/index.iife.js"
        strategy="afterInteractive"
        data-pt-auto-init="true"
        data-pt-selectors=".article-body,.post-body"
        data-pt-amazon-tag="tuotag-21"
        data-pt-max-total-matches="24"
        data-pt-max-matches-per-keyword="1"
        data-pt-max-matches-per-paragraph="2"
      />
    </>
  );
}

Anche qui il pattern è identico: niente config inline, niente doppio script, solo snippet reale.

Step 3: MDX e wrapper del contenuto

Su Next.js il punto davvero importante è il wrapper del corpo articolo.

Se usi Tailwind Typography:

export default function Post() {
  return (
    <article className="prose prose-lg mx-auto">
      {/* contenuto */}
    </article>
  );
}

Allora un selettore corretto è:

data-pt-selectors="article.prose"

Se usi un wrapper custom:

<article className="post-body">
  <MDXContent />
</article>

allora:

data-pt-selectors=".post-body"

Se hai più template articolo, usa più selettori nella stessa stringa CSV:

data-pt-selectors="article.prose,.post-body,.review-body"

Step 4: Content Security Policy

Se hai un CSP restrittivo, aggiungi AnchorLabs alle direttive corrette:

const cspHeader = `
  default-src 'self';
  script-src 'self' https://anchor.widgetbay.3labs.it;
  connect-src 'self' https://anchor.widgetbay.3labs.it;
  img-src 'self' https://anchor.widgetbay.3labs.it data:;
`;

Qui il vantaggio del setup snippet-only è chiaro: non hai bisogno di un blocco inline di configurazione, quindi eviti di introdurre eccezioni inutili sul CSP.

Perché questo setup ha senso su Next.js

Chi usa Next.js vuole tenere sotto controllo performance, complessità e manutenzione. Per questo il setup corretto di AnchorLabs deve restare minimale:

un solo script
nessuna configurazione JS custom lato pagina
selettori espliciti per il corpo articolo
tre limiti di densità

In questo modo mantieni il vantaggio del framework senza introdurre logica extra da seguire ad ogni contenuto nuovo.

Test locale e in produzione

In locale:

next build && next start

Poi verifica un articolo reale:

index.iife.js deve caricare correttamente
il wrapper indicato in data-pt-selectors deve esistere davvero
i tooltip devono comparire senza layout shift
il main thread non deve mostrare task lunghi anomali dovuti al runtime

Troubleshooting

Lo script carica ma non succede nulla Il selettore in data-pt-selectors non corrisponde al wrapper reale del contenuto.

Le pagine MDX non mostrano tooltip Ispeziona il DOM finale renderizzato da Next e controlla che il selettore punti al wrapper giusto.

CSP blocca lo script Aggiungi https://anchor.widgetbay.3labs.it a script-src e connect-src.

L'idratazione sembra rallentata Controlla di usare strategy="afterInteractive" e non caricare lo snippet prima del necessario.

Da dove iniziare oggi

Su Next.js il percorso più semplice è:

inserisci il <Script> nel layout o in _app.tsx
imposta data-pt-selectors sul wrapper articolo reale
aggiungi data-pt-amazon-tag
imposta i tre limiti di densità
fai un test su un articolo reale in produzione build

Per il quadro complessivo della monetizzazione editoriale, il passo successivo è Monetizzare una testata online. Per la parte analytics, vedi Come tracciare la revenue per articolo.