Substack Embed — Next.js | Supascribe Docs

How to add a Substack subscribe form or feed widget to a Next.js app. Covers App Router setup and global script loading via layout.tsx.

When you click Copy embed code in your Supascribe dashboard, you get a snippet with your embed ID and script URL already filled in.

Load the script once in app/layout.tsx — then place the embed divs anywhere without needing "use client".

#1. Load the script in layout.tsx

// app/layout.tsx
import type { Metadata } from "next";
 
export const metadata: Metadata = { title: "My Site" };
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Paste your script tag from the Supascribe dashboard */}
        <script src="https://js.supascribe.com/v1/loader/example.js" async />
      </body>
    </html>
  );
}

#2. Create the embed component

With the script loaded globally, the component is a plain div wrapper — no useEffect, no "use client", fully compatible with Server Components:

// components/SupascribeEmbed.tsx
interface SupascribeEmbedProps {
  embedId: string;
  type: "subscribe" | "feed";
}
 
export default function SupascribeEmbed({ embedId, type }: SupascribeEmbedProps) {
  if (type === "feed") {
    return <div data-supascribe-embed-id={embedId} data-supascribe-feed />;
  }
  return <div data-supascribe-embed-id={embedId} data-supascribe-subscribe />;
}

#3. Use it in any page or component

// app/page.tsx  — Server Component, no "use client" needed
import SupascribeEmbed from "@/components/SupascribeEmbed";
 
export default function HomePage() {
  return (
    <main>
      <section>
        <h2>Get the newsletter</h2>
        <SupascribeEmbed embedId="abc123" type="subscribe" />
      </section>
 
      <section>
        <h2>Latest posts</h2>
        <SupascribeEmbed embedId="abc123" type="feed" />
      </section>
    </main>
  );
}

Or use the embed divs directly without a component wrapper:

// app/page.tsx
export default function HomePage() {
  return (
    <main>
      <div data-supascribe-embed-id="abc123" data-supascribe-subscribe />
      <div data-supascribe-embed-id="abc123" data-supascribe-feed />
    </main>
  );
}

#Using plain React (CRA / Vite)?

Load the script in public/index.html instead — see the React example.

React Example

React (CRA/Vite) without the App Router.

Substack Embed — Next.js

#1. Load the script in layout.tsx

#2. Create the embed component

#3. Use it in any page or component

#Using plain React (CRA / Vite)?

Ready to grow your Substack?