ml-cms

Code generator CLI for Next.js projects connected to Strapi v5.

Generates:

• next.config.ts — Next.js configuration file
• lib/ml-cms/mlcms.ts — Typed client instance (using strapi-typed-client) + cache tags
• lib/ml-cms/api.ts — One typed fetch function per content type
• app/api/revalidate/route.ts — Webhook handler for targeted ISR revalidation

Quick Start

npx ml-cms generate --url http://localhost:1337 --token your-api-token

The CLI will:

1. Install strapi-typed-client if not already in your project
2. Install @strapi/blocks-react-renderer for rich text rendering
3. Generate TypeScript types from your Strapi schema
4. Create the typed client files and RichText component

What Gets Generated

| File | Description | |------|-------------| | next.config.ts | Next.js configuration file with image optimization for Google Cloud Storage | | src/lib/ml-cms/mlcms.ts | MlcmsClient instance + CACHE_TAGS constants + mlcmsFetch | | src/lib/ml-cms/api.ts | One typed fetch function per content type | | src/components/RichText.tsx | Rich text renderer component for Strapi v5 blocks | | src/app/api/revalidate/route.ts | Webhook handler for targeted cache revalidation | | .env.local | REVALIDATE_SECRET auto-generated and appended |

CLI Options

| Flag | Description | Default | |------|-------------|--------| | --url | Strapi CMS base URL | NEXT_PUBLIC_MLCMS_URL env var | | --token | Strapi API token | MLCMS_API_TOKEN env var | | --client | Output path for mlcms.ts | src/lib/ml-cms/mlcms.ts | | --api | Output path for api.ts | src/lib/ml-cms/api.ts | | --revalidate | Output path for revalidate route | src/app/api/revalidate/route.ts | | --next-config | Output path for next.config.ts | next.config.ts |

Config File (optional)

Create ml-cms.config.ts in your project root to avoid passing flags every time:

export default {
  url: process.env.NEXT_PUBLIC_MLCMS_URL,
  token: process.env.MLCMS_API_TOKEN,
  output: {
    client: 'src/lib/ml-cms/mlcms.ts',
    api: 'src/lib/ml-cms/api.ts',
    revalidate: 'src/app/api/revalidate/route.ts',
    nextConfig: 'next.config.ts',
  },
}

Then just run:

npx ml-cms generate

Environment Variables

Add these to .env.local in your Next.js project:

NEXT_PUBLIC_MLCMS_URL=http://localhost:1337
MLCMS_API_TOKEN=your-api-token-here
REVALIDATE_SECRET=auto-generated-by-ml-cms-generate  # added automatically

The REVALIDATE_SECRET is added automatically by ml-cms generate. Copy it to your production environment variables manually.

Strapi Plugin Setup

Make sure the strapi-typed-client plugin is enabled in your Strapi project:

// config/plugins.ts
export default {
  'strapi-typed-client': {
    enabled: true,
    config: { requireAuth: false }
  }
}

Webhook Setup in Strapi

After generating, set up the webhook in Strapi:

1. Go to Settings → Webhooks → Create webhook
2. Set URL to https://your-app.com/api/revalidate
3. Enable Events: Entry Published, Entry Unpublished
4. Add Header: x-revalidate-secret → same value as REVALIDATE_SECRET in .env.local

Usage in Pages

import { getBlogPosts, getSiteSettings } from '@/lib/ml-cms/api'

export default async function BlogPage() {
  const [posts, settings] = await Promise.all([
    getBlogPosts(),
    getSiteSettings(),
  ])

  return (
    <div>
      {posts.data?.map((post) => (
        <article key={post.id}>{post.title}</article>
      ))}
    </div>
  )
}

Rendering Rich Text Content

The generated RichText.tsx component uses the official @strapi/blocks-react-renderer to render Strapi v5 rich text blocks:

import RichText from '@/components/RichText'
import { getPost } from '@/lib/ml-cms/api'

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)

  return (
    <article>
      <h1>{post.title}</h1>
      <RichText content={post.content} />
    </article>
  )
}

The component includes Tailwind Typography (prose) classes by default for beautiful styling. Install the plugin if you haven't:

npm install -D @tailwindcss/typography

Then add to your tailwind.config.js:

module.exports = {
  plugins: [require('@tailwindcss/typography')]
}

Re-generating After Schema Changes

Any time you add a new content type in Strapi, re-run:

npx ml-cms generate

The CLI will ask before overwriting existing files. REVALIDATE_SECRET is never overwritten.