Functiondiscord-component-embedv0.1.0

ComponentEmbed

Renders the <script> tag Discord reads for a component embed. Discord does not run JavaScript, so render this on the server. Discord's docs say to put it in the page, typically in the <head>.

ComponentEmbed(
    { children },
    input: ComponentEmbedProps
): ReactElement

// app/[...slug]/page.tsx in Next.js
export default async function GuidePage({ params }: PageProps<'/[...slug]'>) {
    const page = await getGuidePage((await params).slug);

    // only Discord's crawler reads the <ComponentEmbed> tag
    return (
        <>
            <ComponentEmbed>
                <GuidePreview page={page} />
            </ComponentEmbed>
            <article>{page.body}</article>
        </>
    );
}

{ children }

{ children }

input

input: ComponentEmbedProps

Functiondiscord-component-embedv0.1.0

ComponentEmbed

Renders the <script> tag Discord reads for a component embed. Discord does not run JavaScript, so render this on the server. Discord's docs say to put it in the page, typically in the <head>.

ComponentEmbed(
    { children },
    input: ComponentEmbedProps
): ReactElement

// app/[...slug]/page.tsx in Next.js
export default async function GuidePage({ params }: PageProps<'/[...slug]'>) {
    const page = await getGuidePage((await params).slug);

    // only Discord's crawler reads the <ComponentEmbed> tag
    return (
        <>
            <ComponentEmbed>
                <GuidePreview page={page} />
            </ComponentEmbed>
            <article>{page.body}</article>
        </>
    );
}

{ children }

{ children }

input

input: ComponentEmbedProps