@yolo-cms/client

Official Yolo CMS client SDK for Next.js and React applications.

Installation

npm install @yolo-cms/client
# or
pnpm add @yolo-cms/client
# or
yarn add @yolo-cms/client

Quick Start

Next.js Server Components

// app/page.tsx
import { getContentBySlug } from '@yolo-cms/client/nextjs'

export default async function HomePage() {
  const content = await getContentBySlug(
    'home-hero',
    process.env.YOLO_CMS_API_URL!
  )
  
  if (!content) {
    return <div>Content not found</div>
  }
  
  return <div>{content.generated_content}</div>
}

Using the Client Class

import { YoloCMS } from '@yolo-cms/client'

const cms = new YoloCMS({
  apiUrl: 'https://your-yolo-instance.com/api/yolo'
})

const content = await cms.getContentBySlug('home-hero')

Configuration

Set your Yolo CMS API URL as an environment variable:

YOLO_CMS_API_URL=https://your-yolo-instance.com/api/yolo

API Reference

getContentBySlug(slug: string, apiUrl: string)

Fetch a single content item by slug (Next.js helper).

getContentBySlugs(slugs: string[], apiUrl: string)

Fetch multiple content items by slugs (Next.js helper).

YoloCMS Class

Main client class with methods:

• getContentBySlug(slug) - Fetch single content item
• getContentBySlugs(slugs) - Fetch multiple content items
• getContentByType(contentType) - Fetch by content type
• parseStructuredContent(contentItem) - Parse metadata

Examples

Using Structured Metadata

import { getContentBySlug, parseStructuredContent } from '@yolo-cms/client/nextjs'

export default async function HomePage() {
  const content = await getContentBySlug('home-hero', process.env.YOLO_CMS_API_URL!)
  
  if (!content) return null
  
  const structured = parseStructuredContent(content)
  const title = structured.title as string
  const description = structured.description as string
  
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

Fetching Multiple Items

import { getContentBySlugs } from '@yolo-cms/client/nextjs'

export default async function FeaturesPage() {
  const features = await getContentBySlugs(
    ['feature-1', 'feature-2', 'feature-3'],
    process.env.YOLO_CMS_API_URL!
  )
  
  return (
    <div>
      {features.map((feature) => (
        <div key={feature.id}>
          <h2>{feature.title}</h2>
          <p>{feature.generated_content}</p>
        </div>
      ))}
    </div>
  )
}

License

MIT