How to Integrate Kentico with V0

Log in to your Kontent.ai environment at app.kontent.ai. Navigate to your project's Settings → API keys in the left sidebar. You will see the Delivery API section with two key types: the Production Delivery API key (for published content) and the Preview Delivery API key (for unpublished draft content). For the initial integration, use the Production Delivery API key. Also copy your Environment ID from the same page — it is a UUID format string. Your Delivery API key is a long JWT-like string. For a read-only V0 integration (fetching and displaying content), only the Delivery API key and Environment ID are needed — you do not need the Management API key, which is used for content creation and modification. If your content model uses linked items (e.g., a page that has linked article items), also note the content type codenames — you will use these to filter API responses. Kontent.ai's Delivery API base URL is https://deliver.kontent.ai/{environment-id}/items for fetching content items.

The official Kontent.ai Delivery SDK (@kontent-ai/delivery-sdk) provides a TypeScript-first client for the Delivery API with type-safe content item access, automatic response parsing, and built-in retry logic. Install it in your V0-exported project. If you are working directly in V0's code editor, add it to package.json manually. The SDK client is initialized with your environment ID and API key. For SSR and serverless environments (like Vercel), create the client inside the API route handler rather than as a module-level singleton — this prevents credential leakage between requests in edge cases. Alternatively, the createDeliveryClient function is safe to call at module level since it only stores the configuration, not authentication state. The SDK supports rich text HTML rendering, linked item resolution, and asset URL generation — features that would require significant custom code if using the raw REST API.

1// Install the Kontent.ai Delivery SDK
2// In your project terminal or package.json:
3// npm install @kontent-ai/delivery-sdk
4
5// app/lib/kontent.ts — shared client configuration
6import { createDeliveryClient } from '@kontent-ai/delivery-sdk';
7
8export const deliveryClient = createDeliveryClient({
9  environmentId: process.env.KONTENT_ENVIRONMENT_ID!,
10  deliveryApiKey: process.env.KONTENT_DELIVERY_API_KEY,
11  // Use preview key for draft content:
12  // previewApiKey: process.env.KONTENT_PREVIEW_API_KEY,
13  // defaultQueryConfig: { usePreviewMode: false },
14});

Open V0 at v0.dev and describe the content pages you want to build. V0 generates excellent content layouts — magazine-style homepages, structured article pages, product catalogs, and documentation layouts. When describing the data shape to V0, use Kontent.ai's terminology: content items have a system object (codename, name, type) and an elements object with named element fields. For a typical article, elements include a title text element, body rich text element, hero image asset element, and taxonomy elements for categories and tags. Describe these fields to V0 so it generates components that map cleanly to Kontent.ai's response structure. Ask V0 to fetch from /api/kentico/content so the component is ready for the API route you will create next. Use V0's Design Mode to tweak typography — rich text content especially benefits from good heading hierarchy and line spacing. Deploy once the layout looks right.

Create the Next.js API route that uses the Delivery SDK to fetch content from Kontent.ai. The SDK provides a fluent API for querying content items by type, filtering, sorting, and depth. For fetching articles, use client.items().type('article').toPromise() — where 'article' is your content type codename in Kontent.ai. The response contains an items array of typed content item objects. Each item has an elements property with the content fields. Access elements like item.elements.title.value (text), item.elements.body.value (HTML string for rich text), item.elements.hero_image.value[0].url (asset URL). For single item fetch by URL slug, use client.items().type('article').equalsFilter('elements.url_slug', slug).toPromise(). The 'url_slug' must match the exact codename of the URL slug element in your content model. The SDK handles authentication, retry logic, and response parsing automatically.

1import { NextResponse } from 'next/server';
2import { deliveryClient } from '@/app/lib/kontent';
3
4export async function GET(request: Request) {
5  const { searchParams } = new URL(request.url);
6  const limit = parseInt(searchParams.get('limit') ?? '10', 10);
7  const contentType = searchParams.get('type') ?? 'article';
8  const slug = searchParams.get('slug') ?? '';
9  const language = searchParams.get('language') ?? '';
10
11  try {
12    let query = deliveryClient
13      .items()
14      .type(contentType)
15      .limitParameter(limit)
16      .orderByDescending('system.last_modified');
17
18    if (slug) {
19      query = deliveryClient
20        .items()
21        .type(contentType)
22        .equalsFilter('elements.url_slug', slug);
23    }
24
25    if (language) {
26      query = query.languageParameter(language);
27    }
28
29    const response = await query.toPromise();
30
31    const items = response.data.items.map((item) => ({
32      id: item.system.id,
33      codename: item.system.codename,
34      name: item.system.name,
35      type: item.system.type,
36      lastModified: item.system.lastModified,
37      language: item.system.language,
38      elements: Object.fromEntries(
39        Object.entries(item.elements).map(([key, el]) => [
40          key,
41          (el as { value: unknown }).value,
42        ])
43      ),
44    }));
45
46    return NextResponse.json({ items, total: items.length });
47  } catch (error) {
48    console.error('Kontent.ai API error:', error);
49    return NextResponse.json({ error: 'Failed to fetch content' }, { status: 500 });
50  }
51}

Navigate to your Vercel project, go to Settings → Environment Variables, and add KONTENT_ENVIRONMENT_ID (the UUID from Kontent.ai Project Settings) and KONTENT_DELIVERY_API_KEY (the Delivery API key). Neither variable needs the NEXT_PUBLIC_ prefix since they are server-side only. Also add KONTENT_PREVIEW_API_KEY for the Preview environment scope if you want to support draft content preview. After adding variables, redeploy. To optimize performance, configure Incremental Static Regeneration (ISR) for content pages. In your Next.js page component, export a revalidate constant to tell Vercel how often to regenerate the page: export const revalidate = 300 for 5-minute cache. For article listing pages, 60-300 seconds is appropriate; for article detail pages that change rarely, 3600 seconds (1 hour) is better. Kontent.ai also supports webhooks for on-demand ISR — when an editor publishes a change, Kontent.ai sends a webhook to your Vercel deployment URL to trigger immediate page regeneration. Set the webhook URL to https://your-vercel-app.vercel.app/api/revalidate and pass a secret token to validate the request. For enterprise content teams requiring custom preview workflows and on-demand revalidation, RapidDev can help implement the full webhook-based ISR pipeline.

1// app/articles/page.tsx — enable ISR caching
2export const revalidate = 300; // Regenerate every 5 minutes
3
4export default async function ArticlesPage() {
5  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/kentico/articles?limit=12`);
6  const { items } = await res.json();
7  return <ArticleGrid articles={items} />;
8}
9
10// Alternatively, call Kontent.ai directly in a Server Component:
11import { deliveryClient } from '@/app/lib/kontent';
12
13export default async function ArticlesPage() {
14  const response = await deliveryClient.items().type('article').limitParameter(12).toPromise();
15  return <ArticleGrid articles={response.data.items} />;
16}