In this post, we'll explore how the @sleekcms/client package works with Next.js to fetch and display CMS content. Understanding this integration is essential for building dynamic, content-driven applications.

Overview of @sleekcms/client

The @sleekcms/client package provides an async client for seamlessly fetching content from SleekCMS. It uses a simple, promise-based API that integrates naturally with Next.js App Router and React Server Components.

Setting Up the Client

The client is configured in lib/sleekcms.ts with a few key options:

import { createAsyncClient } from '@sleekcms/client'

export function cmsClient() {
  return createAsyncClient({
    siteToken: "pub-2kzel-5d6ab732e37c4a2ea36ae91ccc509577", // OK to publicly expose
    resolveEnv: true,
    env: "latest",
    cacheMinutes: 1,
  })
}

Key configuration options:

siteToken: A public token (prefixed with pub-) that identifies your site. This is safe to expose in client-side code.
resolveEnv: Enables environment resolution for content versioning.
env: Specifies which content environment to use (e.g., "latest", "published").
cacheMinutes: Controls how long content is cached.

Fetching Data from SleekCMS

The client provides intuitive methods for fetching pages and collections.

Fetching a Single Page

Use client.getPage() to fetch a single page by its path:

const client = cmsClient()
const post = await client.getPage(`/blog/${slug}`)

This returns the page object with all its fields, or null if not found.

Fetching a Collection of Pages

Use client.getPages() to fetch all pages under a specific path:

const client = cmsClient()
const posts = await client.getPages("/blog/")

This returns an array of all blog posts, which you can then map over to display in your UI.

Getting Page Slugs for Static Generation

Use client.getSlugs() to get all slugs for static path generation:

const client = cmsClient()
const slugs = await client.getSlugs('/blog')

return slugs.map((slug: string) => ({
  slug,
}))

Integrating with Next.js App Router

Next.js App Router uses React Server Components by default, making data fetching straightforward. Here's how to integrate SleekCMS:

Dynamic Content with Server Components

For always-fresh content, disable caching in your page:

export const fetchCache = "force-no-store";
export const dynamic = "force-dynamic";

export default async function HomePage() {
  const client = cmsClient();
  const posts = await client.getPages("/blog/");

  return (
    <ul>
      {posts.map((post: any) => (
        <li key={post._path}>
          <Link href={post._path}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

Static Generation with Dynamic Params

For blog post pages, use generateStaticParams to pre-render pages at build time:

export async function generateStaticParams() {
  const client = cmsClient()
  const slugs = await client.getSlugs('/blog')

  return slugs.map((slug: string) => ({
    slug,
  }))
}

export default async function BlogPostPage({ params }: Props) {
  const { slug } = await params
  const client = cmsClient()
  const post = await client.getPage(`/blog/${slug}`)

  if (!post) {
    notFound()
  }

  return <article>{/* render post content */}</article>
}

Conclusion

The @sleekcms/client package provides a clean, async API that integrates seamlessly with Next.js App Router. By using createAsyncClient, getPage(), getPages(), and getSlugs(), you can efficiently fetch and display CMS content in your React Server Components. The public site token makes it safe to use directly in your components without exposing sensitive credentials.