Install Tapestry on Next.js

Render a plain <script> in your root layout's <head>.

The snippet

Replace SITE_KEY with your site's key, or open this guide from your site's page in Tapestry to see it filled in.

<script src="https://cdn.patchwork.run/s/SITE_KEY.js"></script>

Steps

1. Open app/layout.tsx (App Router) or pages/_document.tsx (Pages Router).
2. Add the snippet as a plain <script> tag inside <head>, as below. Don't use next/script: every strategy it offers loads the script asynchronously.
3. If your linter flags a synchronous script (@next/next/no-sync-scripts), disable the rule for that line; here it's intentional.
4. Deploy, then load any page.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* Tapestry: must load synchronously, before the page paints */}
        <script src="https://cdn.patchwork.run/s/SITE_KEY.js" />
      </head>
      <body>{children}</body>
    </html>
  );
}