Integrations
Overview of framework integrations for the Laizy CMS generated client.
Integrations
The Laizy generated client is a plain TypeScript module with no framework-specific dependencies. It works anywhere you can run JavaScript -- server-side, client-side, or at build time.
Available Integrations
Next.js
The most common integration pattern. Use the generated client in React Server Components for server-side rendering, in API routes for backend operations, or with client-side tokens for dynamic content.
React
For React applications that are not using Next.js (Vite, Create React App, Remix, etc.), the client works in both server and client contexts.
How It Works
All integrations follow the same pattern:
- Create a
ManagementClientwith your base URL, API token, and project ID - Create a
LaizyClientby passing in the management client - Query content using the generated methods (
findMany(),findById(),count())
import { LaizyClient } from './generated/laizy';
import { ManagementClient } from '@/lib/management-client';
const managementClient = new ManagementClient({
baseUrl: process.env.NEXT_PUBLIC_LAIZY_BASE_URL!,
apiToken: process.env.NEXT_PUBLIC_LAIZY_TOKEN!,
projectId: 'your-project-id',
});
const client = new LaizyClient(managementClient);
const posts = await client.blogPost.findMany();Authentication Patterns
Different integration contexts require different token types:
| Context | Token Type | Scope |
|---|---|---|
| Server Components | Admin or Frontend | admin or content:read |
| API Routes | Admin | admin |
| Client-Side Rendering | Frontend | content:read |
| Static Site Generation | Admin or Frontend | admin or content:read |
| CLI / Scripts | Admin | admin |
Frontend tokens are safe to expose in client-side code because they only have read access to published content. Admin tokens should only be used server-side.
Client Singleton Pattern
For server-side usage, create a single client instance that can be shared across requests:
// lib/cms.ts
import { LaizyClient } from '@/generated/laizy';
import { ManagementClient } from '@/lib/management-client';
const managementClient = new ManagementClient({
baseUrl: process.env.NEXT_PUBLIC_LAIZY_BASE_URL!,
apiToken: process.env.LAIZY_API_TOKEN!,
projectId: process.env.LAIZY_PROJECT_ID!,
});
export const cms = new LaizyClient(managementClient);Then import it anywhere:
import { cms } from '@/lib/cms';
const posts = await cms.blogPost.findMany();Next Steps
- Next.js Integration -- Server Components, API routes, and ISR
- React Integration -- Client-side rendering with React
- Client Overview -- Full reference for the generated client