# Substack Embed — Next.js

> 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.

Source: https://supascribe.com/examples/nextjs

---
When you click **Copy embed code** in your [Supascribe dashboard](https://supascribe.com), 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

```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:

```tsx
// 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

```tsx
// 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>
        
      </section>

      <section>
        <h2>Latest posts</h2>
        
      </section>
    </main>
  );
}
```

Or use the embed divs directly without a component wrapper:

```tsx
// 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](https://supascribe.com/examples/react): React (CRA/Vite) without the App Router.