Saltar al contenido
pisi.to
Todas las guías

Next.js

Con next/script, en App Router o en Pages Router.

  1. App Router: mete el Script en el layout raíz

    La estrategia afterInteractive carga la llave cuando la página ya es usable, que es justo lo que quieres.

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          defer
          data-domain="example.com"
          src="https://pisi.to/js/llave.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
    tsx

  2. Pages Router: en _document

    Si todavía vives en pages/, va en el documento, dentro del <Head>.

    // pages/_document.tsx
import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script defer data-domain="example.com" src="https://pisi.to/js/llave.js" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
    tsx

  3. Despliega

    En desarrollo no verás nada: la llave no dispara en localhost a propósito (§4.4).

Comprobar que funciona

Abre tu web en una pestaña nueva y mira el dashboard: deberías aparecer en «ahora mismo en casa» en menos de diez segundos. Si no aparece, revisa el checklist del onboarding.