Quickstart

Step 1: Install

npm install @dispatchcms/next

Step 2: Add DispatchProvider

Set NEXT_PUBLIC_DISPATCH_SITE_KEY in .env.local. Optionally call initDispatch in your root layout. Wrap your app with the provider or use Server Component helpers.

import { initDispatch } from "@dispatchcms/next";

initDispatch({
  siteKey: process.env.NEXT_PUBLIC_DISPATCH_SITE_KEY!,
});

Step 3: Create blog route

Use getPosts() and getPost(slug) in async Server Components. Add app/blog/page.tsx and app/blog/[slug]/page.tsx. Render post.content (TipTap JSON) with renderToHTMLString from @tiptap/static-renderer/pm/html-string and the same extensions as the CMS.

// app/blog/page.tsx
import { getPosts } from "@dispatchcms/next";

export default async function BlogPage() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

// app/blog/[slug]/page.tsx
import { getPost } from "@dispatchcms/next";
import { notFound } from "next/navigation";
import { renderToHTMLString } from "@tiptap/static-renderer/pm/html-string";
import StarterKit from "@tiptap/starter-kit";

export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();
  const contentHtml = post.content && typeof post.content === "object"
    ? renderToHTMLString({ extensions: [StarterKit], content: post.content })
    : "";
  return (
    <article>
      <h1>{post.title}</h1>
      {post.excerpt && <p>{post.excerpt}</p>}
      {contentHtml ? <div dangerouslySetInnerHTML={{ __html: contentHtml }} /> : null}
    </article>
  );
}

Step 4: Create and publish a post in the dashboard

Log in to Dispatch, create a site if needed, then create a post and publish it.

Step 5: Refresh the page

Get your site key from Dispatch (Sites → your site), add it to .env.local, run npm run dev, and refresh. Your post should appear.

npm run dev