@flexacms/next

Flexa for the Next.js App Router: server-side fetching through Next's data cache, tagged per entity and entry for precise revalidation.

npm install @flexacms/next

FLEXA_URL=https://cms.example.com
FLEXA_API_KEY=flx_...

// lib/flexa.ts
import { createFlexaClient } from '@flexacms/next';
import type { FlexaSchema } from './flexa'; // optional: npx @flexacms/cli generate

export const flexa = createFlexaClient<FlexaSchema>({ revalidate: 300 });

// app/blog/[slug]/page.tsx (Server Component)
import { notFound } from 'next/navigation';
import { flexa } from '@/lib/flexa';

export default async function Post({
    params,
}: {
    params: Promise<{ slug: string }>;
}) {
    const post = await flexa.entity('posts').find((await params).slug);

    if (!post) notFound();

    return <h1>{post.title}</h1>;
}

Reads are cached and tagged flexa, flexa:<entity> and flexa:<entity>:<id or slug>; writes are never cached. revalidate sets how long cached responses live (default 60 seconds, false to keep them until revalidated).

Revalidation

import { revalidateFlexa } from '@flexacms/next';

revalidateFlexa(); // everything
revalidateFlexa('posts'); // one entity
revalidateFlexa('posts', 'hello'); // one entry

Or expose a route for webhooks and deploy hooks:

// app/api/flexa/revalidate/route.ts
import { createRevalidateHandler } from '@flexacms/next';

export const POST = createRevalidateHandler({
    secret: process.env.FLEXA_REVALIDATE_SECRET,
});

curl -X POST https://site.example.com/api/flexa/revalidate \
  -H "Authorization: Bearer $FLEXA_REVALIDATE_SECRET" \
  -d '{"entity":"posts","entry":"hello"}'

Import createFlexaClient only from server code: the API key must not reach the browser. For client components, use @flexacms/react with a Read-only key.