Skip to content

Next.js

The App Router starter: typed reads, the visual editor, t.js and revalidateTag on publish.

DocsGet started

Docs menuNext.js

The Next.js starter (App Router) lists a collection, renders any entry from your schema, opens in the visual editor and counts visits with t.js. The fastest way in is the onboarding in the admin: Connect your site → Next.js → Starter downloads the project with your keys already in .env.

Setup in three steps

  1. Keys. Copy .env.example to .env (the downloaded starter has it filled): the project id, a secret key (mf_test_ while you build), the publishable key for t.js and the collection for the home page.
  2. Install. npm install, then npm run types to write manifolio.d.ts from your schema.
  3. Run. npm run dev and open http://localhost:3000. The first request turns the onboarding step green.
Shell
MANIFOLIO_PROJECT=01a1b2c3-0000-7000-8000-000000000000
MANIFOLIO_KEY=mf_test_your_secret_key
MANIFOLIO_SITE_KEY=mf_pk_test_your_site_key
MANIFOLIO_TYPE=article

How it reads content

TypeScript
// lib/manifolio.ts
export function cms(preview?: string | null) {
  return preview
    ? createClient({ project, preview, fetchOptions: { cache: "no-store" } })
    : createClient({ project, key, fetchOptions: { next: { tags: ["manifolio"], revalidate: 3600 } } });
}

Pages are server components, so the key never reaches the browser. Published responses are cached by Next.js under the manifolio tag.

Revalidate on publish

app/api/revalidate/route.ts verifies the webhook signature and calls revalidateTag("manifolio", "max"). In Developers → Webhooks, add https://your-site/api/revalidate with entry.published, entry.unpublished and entry.deleted, and put the whsec_ secret in MANIFOLIO_WEBHOOK_SECRET.

Visual editor

With ?mf_preview= in the address, the starter reads drafts with the token, adds data-mf-edit attributes through client.editable() and loads the bridge instead of t.js. Set the preview URL to https://your-site/{type}/{slug} in Settings → Visual editor. next.config.ts allows framing by MANIFOLIO_ADMIN_ORIGIN.

Rendering

lib/view.ts turns any entry into render nodes from the public schema: text, rich text (html), images through imageUrl() with srcset, embeds, lists, groups and blocks sections. Replace it with your own components whenever you like; cms().entries("article") is fully typed after npm run types.

Until @manifolio/sdk is on npm, the downloaded starter carries it in vendor/manifolio-sdk.