ReactifySDK · Next.js

Next.js installation

ReactifySDK is client-only. Keep Script and reactify-thread inside a "use client" boundary; server components can import that boundary as a child.

App Router (recommended)

Client embed component

// app/reactify/ThreadEmbed.tsx
"use client";

import Script from "next/script";

export function ThreadEmbed() {
  return (
    <>
      <Script src="https://reactify-cdn.s3.us-east-2.amazonaws.com/reactify.js" strategy="afterInteractive" />
      {/* @ts-expect-error custom element */}
      <reactify-thread template="hot-takes" />
    </>
  );
}

Server page

// app/page.tsx (Server Component)
import { ThreadEmbed } from "./reactify/ThreadEmbed";

export default function Page() {
  return (
    <main>
      <h1>Drop</h1>
      <ThreadEmbed />
    </main>
  );
}

Pages Router

Use next/script in pages/_app.tsx with strategy="afterInteractive", or dynamically import a client-only section that contains the custom element.

Images & video domains

If you wrap media with next/image, keep thread source playback on plain URLs inside the embed—the custom element handles its own media. Add your storage host to images.remotePatterns only if you mirror assets through Next.

← React Code examples →