How to Integrate Ghost with V0

Before writing any code, you need a Content API key from your Ghost instance. This is a public read-only key — unlike admin API keys, it only provides read access to published posts and pages, so it's safe to use in your Next.js Server Components without a server-side proxy. Log in to your Ghost Admin panel (usually at yourghost.io/ghost or yourdomain.com/ghost). Navigate to Settings → Integrations → Add custom integration. Give it a name like 'V0 Next.js Frontend' and click Create. Ghost generates a Content API key (a long alphanumeric string) and shows you the API URL. Copy both the Content API key and the API URL. The API URL is typically your Ghost site's root URL (e.g., https://yourblog.ghost.io) — Ghost appends /ghost/api/content/ to it automatically when you use the SDK. If you're self-hosting Ghost, make sure your Ghost instance is accessible from the internet (not just localhost) before proceeding, because Vercel's build process will fetch content from Ghost during the build phase. Also check that your Ghost version is 3.x or higher — the Content API was significantly improved in Ghost 3.0 and the @tryghost/content-api SDK targets version 3+.

Open V0 and describe the blog layouts you need. For a typical Ghost-powered blog, you'll need at least two page layouts: a post listing page (home or /blog) and a single post page (/blog/[slug]). Prompt V0 for each layout separately to get focused, production-quality results. For the listing page, describe the post card component with the data fields Ghost returns: title, feature_image (cover photo URL), custom_excerpt or excerpt, primary_author (author object with name and profile_image), primary_tag, published_at (date string), and reading_time (number, minutes). For the single post page, describe the full article layout including where the post body HTML will be injected. Ask V0 to use a clean, readable typography system — Ghost posts often contain code blocks, pull quotes, and image galleries, so the stylesheet needs to handle varied content types. In V0's Design Mode, adjust the typography and spacing to match your brand. The post body HTML that Ghost returns includes its own class names (kg-card for Koenig editor blocks, kg-image, kg-gallery-card, etc.) — you'll want to add CSS for these in your global stylesheet. Ask V0 to generate placeholder content that mimics real blog posts, including fake images, author names, and multi-paragraph excerpts, so you can evaluate the layout before connecting real Ghost data.

Install the @tryghost/content-api package, then create a Ghost API client module at lib/ghost.ts. This module initializes the Ghost Content API client with your site URL and Content API key, and exports helper functions for fetching posts, pages, tags, and authors. In your Next.js page files, import these helpers and call them in Server Components (no 'use client' directive) to fetch Ghost data at request time or build time. The @tryghost/content-api SDK returns typed response objects for posts, pages, tags, and authors. Each post object includes fields like id, title, slug, html (rendered post content), feature_image, custom_excerpt, excerpt, published_at, reading_time, primary_author, primary_tag, and tags. For the post listing page, call api.posts.browse({ limit: 12, include: ['authors', 'tags'] }) to get the first 12 posts with full author and tag data. For a single post page, call api.posts.read({ slug: params.slug }, { include: ['authors', 'tags'] }) to get a specific post by slug. Wrap the API calls in a try/catch and return null on error — Next.js not-found.tsx handles the 404 case gracefully. One important note about TypeScript: the @tryghost/content-api package has TypeScript type definitions but they're not always perfectly accurate for all Ghost versions. If you encounter type errors, you can create a local types file or use type assertions.

1import GhostContentAPI from '@tryghost/content-api';
2
3const api = new GhostContentAPI({
4  url: process.env.GHOST_URL!,
5  key: process.env.GHOST_CONTENT_API_KEY!,
6  version: 'v5.0',
7});
8
9export interface GhostPost {
10  id: string;
11  title: string;
12  slug: string;
13  html: string;
14  feature_image: string | null;
15  custom_excerpt: string | null;
16  excerpt: string;
17  published_at: string;
18  reading_time: number;
19  primary_author: { name: string; profile_image: string | null; slug: string };
20  primary_tag: { name: string; slug: string } | null;
21}
22
23export async function getPosts(page = 1, limit = 12): Promise<GhostPost[]> {
24  try {
25    return await api.posts.browse({
26      limit,
27      page,
28      include: ['authors', 'tags'],
29      order: 'published_at DESC',
30    }) as unknown as GhostPost[];
31  } catch (error) {
32    console.error('Ghost API error:', error);
33    return [];
34  }
35}
36
37export async function getPost(slug: string): Promise<GhostPost | null> {
38  try {
39    return await api.posts.read(
40      { slug },
41      { include: ['authors', 'tags'] }
42    ) as unknown as GhostPost;
43  } catch (error) {
44    return null;
45  }
46}
47
48export async function getTags() {
49  try {
50    return await api.tags.browse({ limit: 'all', include: ['count.posts'] });
51  } catch {
52    return [];
53  }
54}

Create the actual Next.js page files that wire V0's UI components to Ghost API data. For the blog listing page at app/blog/page.tsx, create a Server Component that calls getPosts() and passes the data to your V0-generated listing component. For the individual post page at app/blog/[slug]/page.tsx, call getPost(params.slug) and pass the post data to your V0-generated post layout. The most important addition here is Incremental Static Regeneration (ISR) — configure your page with revalidate to automatically regenerate cached pages after a set interval. A revalidate of 3600 (1 hour) means Ghost post updates will appear on your site within an hour of publishing. For immediate updates, add a Ghost webhook that triggers on-demand revalidation via a Next.js revalidatePath API route. To render Ghost's HTML post content, use dangerouslySetInnerHTML with DOMPurify for sanitization. Ghost's HTML output is from a trusted source (your own CMS), but sanitizing prevents XSS if someone compromised your Ghost admin. Add a global stylesheet for Ghost's Koenig editor CSS classes — the kg-card, kg-image, kg-gallery-card, and kg-bookmark-card classes need styling to look correct. For generateStaticParams, return all post slugs at build time to pre-render every post as a static page.

1import { notFound } from 'next/navigation';
2import { getPost, getPosts } from '@/lib/ghost';
3
4export const revalidate = 3600; // Revalidate every hour
5
6interface Props {
7  params: { slug: string };
8}
9
10export async function generateMetadata({ params }: Props) {
11  const post = await getPost(params.slug);
12  if (!post) return {};
13  return {
14    title: post.title,
15    description: post.custom_excerpt || post.excerpt,
16    openGraph: {
17      images: post.feature_image ? [post.feature_image] : [],
18    },
19  };
20}
21
22export async function generateStaticParams() {
23  const posts = await getPosts(1, 'all' as unknown as number);
24  return posts.map((post) => ({ slug: post.slug }));
25}
26
27export default async function PostPage({ params }: Props) {
28  const post = await getPost(params.slug);
29  if (!post) notFound();
30
31  return (
32    <article className="max-w-2xl mx-auto px-4 py-12">
33      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
34      <div className="flex items-center gap-3 text-sm text-gray-500 mb-8">
35        <span>{post.primary_author.name}</span>
36        <span>·</span>
37        <span>{new Date(post.published_at).toLocaleDateString()}</span>
38        <span>·</span>
39        <span>{post.reading_time} min read</span>
40      </div>
41      {post.feature_image && (
42        <img src={post.feature_image} alt={post.title} className="w-full rounded-lg mb-8" />
43      )}
44      <div
45        className="prose prose-lg max-w-none"
46        dangerouslySetInnerHTML={{ __html: post.html }}
47      />
48    </article>
49  );
50}

Ghost requires two environment variables: GHOST_URL (your Ghost site's root URL, e.g., https://yourblog.ghost.io — no trailing slash) and GHOST_CONTENT_API_KEY (the public Content API key from Ghost Admin → Integrations). Both are safe to use in server-side code. The GHOST_CONTENT_API_KEY is technically public (it only allows reading published content) but convention is to keep it as a server-only variable without NEXT_PUBLIC_ prefix to avoid unnecessarily exposing it. Add both variables in Vercel Dashboard → Settings → Environment Variables, selecting the Production and Preview environments. After adding variables, push your code to GitHub and Vercel will auto-deploy. For immediate Ghost-to-Vercel updates (instead of waiting for ISR), set up a Ghost webhook: go to Ghost Admin → Integrations → your integration → Add webhook. Set the event to 'Post published' and the URL to https://your-vercel-app.vercel.app/api/revalidate?secret=YOUR_SECRET&path=/blog. Create the /api/revalidate route in Next.js using revalidatePath from next/cache. For complex Ghost setups with custom membership integrations, multiple publications, or Ghost's newsletter system, RapidDev can help structure the Next.js routing and ISR configuration for optimal performance.

1# .env.local
2# Ghost CMS credentials
3GHOST_URL=https://yourblog.ghost.io
4GHOST_CONTENT_API_KEY=your_content_api_key_here
5
6# Optional: secret for on-demand ISR revalidation webhook
7REVALIDATE_SECRET=your_random_secret_here